在 Angular 库服务中注入 httpCLient 时出错 [重复]答案

【问题标题】：error when injecting httpCLient in Angular library service [duplicate]在 Angular 库服务中注入 httpCLient 时出错 [重复]
【发布时间】：2021-11-23 04:46:56
【问题描述】：

我已经使用 Angular 12 开发了一个应用程序，现在我想开发一个库来为这个应用程序以及未来的其他应用程序提供服务。

我可以构建库，构建和运行应用程序，当库中的服务只有一个记录到控制台的方法时，它工作正常。

不过，这个库的最终目标是在 REST API 上进行 HTTP 调用。

只要我想通过测试 URL 使用服务中的 HttpClient，我仍然可以构建库和应用程序，但是当我运行应用程序时，我收到以下错误：

core.js:6479 ERROR Error: inject() must be called from an injection context
    at injectInjectorOnly (core.js:4745)
    at Module.ɵɵinject (core.js:4755)
    at Object.EshopDaoService_Factory [as factory] (eshop-dao.service.ts:8)
    at R3Injector.hydrate (core.js:11438)
    at R3Injector.get (core.js:11257)
    at R3Injector.get (core.js:11268)
    at Object.get (core.js:25036)
    at lookupTokenUsingModuleInjector (core.js:3342)
    at getOrCreateInjectable (core.js:3454)
    at Module.ɵɵdirectiveInject (core.js:14737)

这是服务的代码，其中注释了记录到控制台并且工作正常的测试方法

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

    private readonly apiRoot = 'https://api.tvmaze.com';

    constructor(
        private http: HttpClient
        ) { }

    /*
    getShow(id: number): Observable<any> {
        const url = `${this.apiRoot}/shows/${id}`;
        return this.http.get(url);
    }
    */

    getShow(id: number): void {
        console.log('id: ' + id);
    }

}

这里是 tsconfig.app.json：

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "esnext",
        "outDir": "./out-tsc/app",
        "experimentalDecorators": true,
        "allowJs": true,
        "types": []
    },
    "angularCompilerOptions": {
        "enableIvy": true,
        "allowEmptyCodegenFiles": true
    },
    "files": [
        "src/main.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "src/**/*.d.ts"
    ]
}

【问题讨论】：

您需要在您的库中注册来自 '@angular/common/http' 的 HttpClientModule 模块，以便知道注入器。
您能否将项目的tsconfig.app.json文件添加到您的问题中？
也许你可以在这里找到一些提示：stackoverflow.com/questions/51485868/…
将 tsconfig.app.json 添加到问题中。
@EricMalalel 尝试将"paths": { "@angular/*": [ "../node_modules/@angular/*" ] } 添加到tsconfig.json 中的compilerOptions。

标签： angular http

【解决方案1】：

我认为你应该在你的库中将服务声明为提供者，然后在项目中导入 HttpClientModule。

@Injectable()
export class EshopDaoService {
// .... your code
}

在你的图书馆模块中

@NgModule({
declarations: [
    YourComponentLibrary,
    ...
],
imports: [CommonModule],
exports: [YourComponentLibrary],
providers: [EshopDaoService]
})
export class YourModuleLibrary { }

然后在你的 AppModule 中

 @NgModule({
   declarations: [
        AppComponent
      ],
   imports: [
        BrowserModule,
        HttpClientModule,
        YourLibraryModule
      ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

【讨论】：

已经这样做了。