Angular 库给我带来了 HttpClient 的注入错误

Question

我正在尝试在 Angular（版本 18）中构建一个简单的库，可以在我的应用程序和 Angular Elements 组件中使用。

应用程序和元素的想法都很简单：通过库获取相同的对象和数据。 但它所做的只是让我头疼。

当我创建库时，我只有一项服务和一些对象。服务获取注入的 HttpClient，方法从 API 检索信息。

该服务被注入到 elements 组件中并且可以正常工作。 main.ts 已设置，没有任何错误。 当我运行元素时，我总是收到此错误：

ncaught RuntimeError：NG0203：inject() 必须从注入上下文调用，例如构造函数、工厂函数、字段初始值设定项或与

runInInjectionContext

一起使用的函数。欲了解更多信息，请访问 https://angular.dev/errors/NG0203

这是代码，从库开始：

服务：

@Injectable({ providedIn: 'root' })
export class SurveyService  {

    constructor(private client: HttpClient) {
       
    }

    getSurvey(id: string): Observable<any> {
        throw new Error("Method not implemented.");
    }
}

是的，它有一种不执行任何操作的方法。我想在没有太多代码的情况下弄清楚它。

public-api.ts

export * from './lib/survey-service.ts';

现在开始申请。请记住，这是角度元素！

main.ts

createApplication({
  providers: [
    SurveyService
  ],
})
  .then((app) => {
    const surveyComponent = createCustomElement(SurveyComponent , { injector: app.injector });
    customElements.define('survey', surveyComponent );
  })
  .catch((err) => console.error(err));

调查.component.ts

@Component({
  selector: 'app-survey',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './survey.component.html',
  styleUrl: './survey.component.scss'
})
export class SurveyComponent {

  constructor(surveyService: SurveyService  ) {
    surveyService.getSurvey("").subscribe((x: any)=>{
      console.log(x);
    })
  }
}

这给出了我之前显示的错误。当我从 SurveyService 中删除私有客户端：HttpClient 时，我没有收到任何错误，因此我认为问题出在 HttpClient 上。

我确实发现了很多 HttpClientModule，但我知道它已被弃用，我应该使用 ProvideHttpClient()。在库中，我创建了一个模块，添加了 ProvideHttpClient() 作为提供者以及服务。然后，在 elements 应用程序的 main.ts 中提供模块而不是服务：相同的结果，相同的错误。

模块：

@NgModule({
  imports: [
    CommonModule,    
  ],
  providers: [
    provideHttpClient(),
    SurveyService, // Provide the QuestionsService
  ],
  exports: [
    // Any components or services to export
  ],
})
export class SurveyServiceModule { }

其他事情不起作用：在 elements 应用程序中添加 ProvideHttpClient()...在哪里？没有地方接受！

我已按照建议将preserveSymLinks添加到我的angular.json中，现在我看到此错误：

zone.js：125 未捕获 NullInjectorError：R3InjectorError [SurveyService -> SurveyService -> HttpClient -> HttpClient]：NullInjectorError：没有 HttpClient 的提供程序！

我一直在前后努力解决这个问题，但我真的陷入困境。我做错了什么？

Answer 1

错误“RuntimeError：NG0203：inject() 必须从注入上下文调用，例如构造函数、工厂函数、字段初始值设定项或与 runInInjectionContext 一起使用的函数。”是由于 Angular 库和 Angular 应用程序链接不当造成的。

创建一个 Angular 14 库，开发时在本地使用它并将包发布到 npm

---

您应该将

provideHttpClient

添加到

providers

的

createApplication

数组中。

createApplication({
  providers: [
    SurveyService,
    provideHttpClient(), // <- changed here!
  ],
})
  .then((app) => {
    const surveyComponent = createCustomElement(SurveyComponent , { injector: app.injector });
    customElements.define('survey', surveyComponent );
  })
  .catch((err) => console.error(err));

Answer 2

创建应用程序时需要提供Http Client。就您而言，在

createApplication()

的提供商中：

createApplication({
  providers: [provideHttpClient()],
})