Angular 17运行时出现NullInjectorError，无app.module.ts如何解决？

你在Angular 17独立组件项目中遇到如下错误：

main.ts:5 ERROR NullInjectorError: R3InjectorError(Environment Injector)[_AuthGuard -> _AuthService -> _HttpClient -> _HttpClient]:
NullInjectorError: No provider for _HttpClient!

问题原因 #

你仅在AppComponent的imports数组中导入了HttpClientModule，但该模块提供的服务仅对AppComponent及其子组件生效。而AuthService和AuthGuard通过providedIn: 'root'注册在根注入器中，根注入器无法获取到HttpClient的提供者，导致依赖注入失败。

解决方案 #

在main.ts中使用Angular提供的provideHttpClient()函数，将HttpClient相关服务注册到根注入器，具体步骤如下：

1. 打开main.ts，新增provideHttpClient的导入：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

2. 在bootstrapApplication的配置里，把provideHttpClient()加入providers数组：

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

3. 可删除AppComponent的imports中的HttpClientModule，因为根注入器已提供相关服务，无需在组件内重复导入。

完成以上修改后，根注入器中的AuthService和AuthGuard就能正常获取HttpClient实例，解决报错问题。

内容的提问来源于stack exchange，提问作者ToMakPo