Angular独立应用集成HttpClientInMemoryWebApiModule遇NullInjectorError问题

你遇到的NullInjectorError是因为在独立组件的imports数组中直接使用HttpClientInMemoryWebApiModule.forRoot()导致的——forRoot()用于配置模块的根级提供者，这类操作不能放在组件的导入列表里，必须在应用的启动配置中处理。

解决步骤： #

1. 修改组件代码：移除组件中HttpClientInMemoryWebApiModule.forRoot()的导入，保留必要的基础模块：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [
        CommonModule,
        HttpClientModule
    ],
    template: `<!-- 你的组件模板内容 -->`
})
export class AppComponent {}

2. 在应用启动文件配置提供者：打开main.ts，在bootstrapApplication的providers数组中注入HttpClientInMemoryWebApiModule.forRoot()返回的提供者：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './app/in-memory-data.service';

bootstrapApplication(AppComponent, {
    providers: [
        ...HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService).providers
    ]
});

这样配置后，HttpClientInMemoryWebApiModule的根级依赖会被正确注入，即可解决_HttpClient缺失的错误。

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