无法在使用 ngUpgrade 升级的 AngularJS/Angular 混合应用程序中注入 HttpClient。获取“NullInjectorError：没有 http_HttpClient 的提供者！”

Question

我有一个使用 ngUpgrade 升级的 AngularJS/Angular 混合应用程序。一切运作良好。新的 Angular 组件（降级）在 AngularJS 应用程序中运行良好。

但是，我无法让 HttpClient 模块实例化。

我已按照文档和示例进行操作，但没有成功。

这是完整的错误：

NullInjectorError: StaticInjectorError(AppModule)[UserFeedbackService -> http_HttpClient]: 
  StaticInjectorError(Platform: core)[UserFeedbackService -> http_HttpClient]: 
    NullInjectorError: No provider for http_HttpClient!
    at NullInjector.get (core.js:11545:27)
    at resolveToken (core.js:12281:24)
    at tryResolveToken (core.js:12226:16)
    at StaticInjector.get (core.js:12121:20)
    at resolveToken (core.js:12281:24)
    at tryResolveToken (core.js:12226:16)
    at StaticInjector.get (core.js:12121:20)
    at resolveNgModuleDep (core.js:24381:29)
    at _createClass (core.js:24430:29)
    at _createProviderInstance (core.js:24400:26) '<angular-feedback-component _nghost-gam-c0="">'

您可以看到它实际上是在抱怨 http_HttpClient，这很奇怪，因为我在此报告中看到的大多数情况都是 HttpClient。我没有在任何地方使用 http_HttpClient 引用。

这是 app.ts：

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


@NgModule({
  imports: [
    HttpClientModule,
    BrowserModule,
    UpgradeModule,
    MatDialogModule,
    BrowserAnimationsModule,
    FormsModule,
  ],
  declarations: [
    FeedbackComponent,
    UserFeedbackComponent,
  ],
  entryComponents: [
    FeedbackComponent,
    UserFeedbackComponent,
  ],
  providers: [
    UserFeedbackService,
  ],
})

这是 Angular 服务：

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

constructor(@Inject(HttpClient) private http: HttpClient, private dialog: MatDialog) { }

或

constructor(private http: HttpClient, private dialog: MatDialog) { }

在没有对 HttpClient 的引用的情况下，该服务可以正常工作。服务没有问题，就好像我尝试将 HttpClient 注入控制器一样，我得到了同样的错误。

仅供参考，这就是混合应用在 app.ts 中的引导方式：

export class AppModule {

constructor(private upgrade: UpgradeModule) { }

// Bootstrap using the UpgradeModule
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, ['angularjsApp'], {strictDi: true});
});

使用 Angular 12.2.16 和 AngularJS 1.8.3。

花了几天时间试图解决这个问题，因此我们将不胜感激。

更新：

有趣的是，这适用于已弃用的 @angular/http 模块，但我仍然收到 @angular/common/http 模块的错误！有什么想法吗？

这是完整的服务代码。 Http 工作，而 HttpClient 给出错误：

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

@Injectable({
  providedIn: 'root',
})

@Inject(HttpClient)
export class UserFeedbackService {


  constructor(private http: Http, private httpClient: HttpClient) { }
 // constructor(@Inject(HttpClient) private http: HttpClient, private dialog: MatDialog) {


}

Answer 1

你的 HttpClientModule 应该在 BrowserModule 之后声明：

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule, //after BrowserModule
    UpgradeModule,
    MatDialogModule,
    BrowserAnimationsModule,
    FormsModule,
  ],
  declarations: [
    FeedbackComponent,
    UserFeedbackComponent,
  ],
  entryComponents: [
    FeedbackComponent,
    UserFeedbackComponent,
  ],
  providers: [
    UserFeedbackService,
  ],
})