Angular 18库集成HttpClient在Angular Elements中出现注入错误

1. Angular Elements的注入隔离性：Angular Elements编译为自定义元素后，会在独立的注入器环境中运行，主应用的HttpClient配置不会自动共享给Elements组件，两者的注入上下文是分离的。
2. 库的HttpClient提供逻辑错误：Angular 18以独立组件API为核心，仅在库的NgModule中添加provideHttpClient无法覆盖Elements组件的注入需求——如果SurveyComponent是独立组件，它不会关联到库NgModule的注入器。
3. preserveSymLinks的副作用：该配置会改变模块解析路径，导致库和主应用的HttpClient实例无法共享，反而让Elements组件的注入器找不到正确的提供者，触发NullInjectorError。

1. 改用Angular 18独立API重构库代码 #

• 重构SurveyService：使用providedIn: 'root'声明，并通过inject()获取HttpClient：

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class SurveyService {
  private http = inject(HttpClient);

  getSurveyData() {
    return this.http.get('/api/survey');
  }
}

• 将SurveyComponent改为独立组件：在组件配置中直接提供HttpClient，确保组件自身的注入器能获取到依赖：

import { Component, inject } from '@angular/core';
import { SurveyService } from './survey.service';
import { provideHttpClient } from '@angular/common/http';

@Component({
  selector: 'app-survey',
  standalone: true,
  providers: [provideHttpClient],
  template: `<div>{{ surveyData | async }}</div>`
})
export class SurveyComponent {
  private surveyService = inject(SurveyService);
  surveyData = this.surveyService.getSurveyData();
}

2. 调整库的打包配置 #

在angular.json的库构建配置中，确保externalDependencies不包含@angular/common/http，避免将HttpClient排除在Elements组件的打包产物外：

{
  "projects": {
    "your-library": {
      "architect": {
        "build": {
          "options": {
            "externalDependencies": [],
            "outputPath": "dist/your-library"
            // 其他配置...
          }
        }
      }
    }
  }
}

3. 移除preserveSymLinks配置 #

删除angular.json或tsconfig.json中的preserveSymLinks项，该配置会干扰模块解析，导致依赖查找失败。

4. 主应用注册Elements组件的正确方式 #

如果主应用是独立应用，直接注册独立组件即可，无需导入库的NgModule：

import { createCustomElement } from '@angular/elements';
import { SurveyComponent } from 'your-library';
import { createApplication } from '@angular/core';

async function registerElements() {
  const appRef = await createApplication();
  const SurveyElement = createCustomElement(SurveyComponent, {
    injector: appRef.injector
  });
  customElements.define('app-survey', SurveyElement);
}

registerElements();

• Angular Elements组件必须在自身的注入上下文内提供HttpClient，因为它的运行环境和主应用注入器是隔离的。
• Angular 18的独立组件API能简化依赖管理，无需依赖NgModule传递提供者。
• 禁止将@angular/common/http设为库的外部依赖，否则Elements组件运行时会找不到对应的模块。

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