誰能建議如何在 AngularJS/Angular 混合應用程序中進一步調試這個 HttpClient 注入錯誤（沒有 http_HttpClient 的提供者）？

Question

所以我有一個混合的 AngularJS/Angular 應用程序，除了我無法注入 HttpClient 模塊（沒有 http_HttpClient 的提供程序）之外，它都運行良好。 奇怪的是，已棄用的 @angular/http 模塊可以正常工作。

所以這是如何工作的，我們從一個 AngularJS 應用程序開始，然后加載 Angular 和相關模塊，並使用 ngUpgrade 對其進行配置，以讓 Angular 啟動 AngularJS 應用程序。 然后，您可以在 AngularJS 應用程序中使用 Angular 組件，並隨着時間的推移升級 AngularJS 組件。

因此，除了 HttpClient 模塊之外，經過大量試驗和錯誤后，這一切都可以正常工作。

這是定義和增強 AngularJS 應用程序和 Angular 應用程序的主要 app.ts（注意已棄用的 @angular/http 模塊僅用作測試。我真正需要的是 @angular/common/http）：

import 'core-js';
import 'zone.js/dist/zone';
import * as angular from "angular";
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule, downgradeComponent, downgradeInjectable } from '@angular/upgrade/static';
import { NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { MatDialogModule } from "@angular/material/dialog";
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';

// Angular Components
import { FeedbackComponent } from '../app/angular/main/dashboard/dashboardpanel/panels/feedback/feedback.component';
import { UserFeedbackComponent } from './angular/main/help/user-feedback/user-feedback.component';
import { NotificationModalComponent } from './angular/shared/notifications/notificationmodal/notification-modal.component';
import { NotificationSnackbarService } from './angular/shared/notifications/notificationsnackbar/notification-snackbar.service';
import { DashboardPanelComponent } from './angular/main/dashboard/dashboardpanel/dashboardpanel.component';


//Angular services
import { FeedbackService } from './angular/main/dashboard/dashboardpanel/panels/feedback/feedback.service';
import { FeedbackService } from './angular/main/dashboard/dashboardpanel/panels/feedback/feedback.service';

// The AngularJS app
const angularjsApp = angular
  .module('angularjsApp', [])
  .factory('feedbackService', downgradeInjectable(FeedbackService))
  .factory('userFeedbackService', downgradeInjectable(UserFeedbackService))
  // Downgrade the Angular Components
  .directive(
    'angularDashboardPanel',
    downgradeComponent({component: DashboardPanelComponent})//as angular.IDirectiveFactory
  )
  .directive(
    'angularFeedbackComponent',
    downgradeComponent({component: FeedbackComponent})//as angular.IDirectiveFactory
  );

// Angular app
@NgModule({
  declarations: [
    DashboardPanelComponent,
    FeedbackComponent,
    UserFeedbackComponent,
    NotificationModalComponent,
  ],
  entryComponents: [
    DashboardPanelComponent,
    FeedbackComponent,
    UserFeedbackComponent,
    NotificationModalComponent
  ],
  imports: [
   BrowserModule,
    BrowserAnimationsModule,
    UpgradeModule,
    HttpModule,
    HttpClientModule,
    MatDialogModule,
    MatSnackBarModule,
    FormsModule,
  ],
 providers: [
    FeedbackService,
    UserFeedbackService,
    NotificationSnackbarService,
  ],
})

export class AppModule {
   //Override Angular bootstrap so it doesn't do anything
   ngDoBootstrap() {
  }

  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});
});

export default angularjsApp;

我嘗試注入 HttpClient 的服務 (UserFeedbackService)（請注意，如果我嘗試將其注入組件中，我會收到相同的錯誤，因此它看起來與服務無關）：

import { Inject, Injectable } from '@angular/core';
import { HttpClient, HttpClientModule, HttpHeaders, HttpParams } from '@angular/common/http';
import {Http, Response, URLSearchParams} from '@angular/http';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';

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

export class UserFeedbackService {
    constructor(private http: Http,
              private httpClient: HttpClient, // This line causes the error
              private _snackBar: MatSnackBar,
              private dialog: MatDialog) {}

}

這是錯誤：

UserFeedbackComponent_Host.ngfactory.js:5 ERROR NullInjectorError: StaticInjectorError[UserFeedbackComponent -> UserFeedbackService]: 
  StaticInjectorError(AppModule)[UserFeedbackService -> http_HttpClient]: 
    StaticInjectorError(Platform: core)[UserFeedbackService -> http_HttpClient]: 
      NullInjectorError: No provider for http_HttpClient!
    at NullInjector.get (core.js:11564:27)
    at resolveToken (core.js:12300:24)
    at tryResolveToken (core.js:12245:16)
    at StaticInjector.get (core.js:12140:20)
    at resolveToken (core.js:12300:24)
    at tryResolveToken (core.js:12245:16)
    at StaticInjector.get (core.js:12140:20)
    at resolveNgModuleDep (core.js:24401:29)
    at _createClass (core.js:24456:32)
    at _createProviderInstance (core.js:24420:26)
View_UserFeedbackComponent_Host_0 @ UserFeedbackComponent_Host.ngfactory.js:5
proxyClass @ compiler.js:25336
logError @ core.js:33167
handleError @ core.js:6990
dispatchEvent @ core.js:24026
eval @ core.js:31370
eval @ platform-browser.js:607
_ZoneDelegate.invokeTask @ zone.js:447
onInvokeTask @ core.js:29112
_ZoneDelegate.invokeTask @ zone.js:446
Zone.runTask @ zone.js:218
ZoneTask.invokeTask @ zone.js:529
invokeTask @ zone.js:1718
globalCallback @ zone.js:1749
globalZoneAwareCallback @ zone.js:1785

ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 1, nodeDef: {…}, elDef: {…}, elView: {…}}
View_UserFeedbackComponent_Host_0   @   UserFeedbackComponen…Host.ngfactory.js:5
proxyClass  @   compiler.js:25336
logError    @   core.js:33167
handleError @   core.js:6995
dispatchEvent   @   core.js:24026
eval    @   core.js:31370
eval    @   platform-browser.js:607
_ZoneDelegate.invokeTask    @   zone.js:447
onInvokeTask    @   core.js:29112
_ZoneDelegate.invokeTask    @   zone.js:446
Zone.runTask    @   zone.js:218
ZoneTask.invokeTask @   zone.js:529
invokeTask  @   zone.js:1718
globalCallback  @   zone.js:1749
globalZoneAwareCallback @   zone.js:1785

這是 package.json：

"dependencies": {
   "@angular/animations": "12.2.16",
    "@angular/cdk": "^12.2.13",
    "@angular/common": "12.2.16",
    "@angular/compiler": "12.2.16",
    "@angular/core": "12.2.16",
    "@angular/elements": "^12.2.16",
    "@angular/forms": "12.2.16",
    "@angular/http": "^7.2.16",
    "@angular/localize": "^12.2.16",
    "@angular/material": "12.2.13",
    "@angular/material-moment-adapter": "^13.1.1",
    "@angular/platform-browser": "12.2.16",
    "@angular/platform-browser-dynamic": "12.2.16",
    "@angular/router": "12.2.16",
    "@angular/service-worker": "12.2.16",
    "@angular/upgrade": "^12.2.16",
    "@babel/polyfill": "^7.12.1",
    "@fortawesome/fontawesome-pro": "^5.15.4",
    "@ng-bootstrap/ng-bootstrap": "^9.1.1",
    "@ngxs/storage-plugin": "^3.7.2",
    "@ngxs/store": "^3.7.2",
    "@nrwl/angular": "12.9.0",
    "@types/angular": "^1.8.4",
    "typescript": "^4.7.4",
     ...
}
"devDependencies": {
    "@angular-devkit/build-angular": "12.2.6",
    "@angular-eslint/eslint-plugin": "12.3.1",
    "@angular-eslint/eslint-plugin-template": "12.3.1",
    "@angular-eslint/template-parser": "12.3.1",
    "@angular/cli": "12.2.6",
    "@angular/compiler-cli": "12.2.0",
    "@angular/language-service": "12.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.9.0",
    "webpack-merge": "^4.2.2",
    "webpack-notifier": "^1.8.0"
    ...
}

版本：

Angular CLI: 12.2.6
Node: 14.18.0
Package Manager: npm 6.14.15
OS: win32 x64

Angular: 12.2.16
... animations, common, compiler, core, elements, forms
... localize, platform-browser, platform-browser-dynamic, router
... service-worker, upgrade

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1202.6
@angular-devkit/build-angular      12.2.6
@angular-devkit/core               12.2.17
@angular-devkit/schematics         12.2.17
@angular/cdk                       12.2.13
@angular/cli                       12.2.6
@angular/compiler-cli              12.2.0
@angular/http                      7.2.16
@angular/language-service          12.2.0
@angular/material                  12.2.13
@angular/material-moment-adapter   13.3.9
@schematics/angular                12.2.17
rxjs                               6.6.7
typescript                         4.7.4
webpack                            4.46.0

其他提供程序注入 OK，所以看起來只是 HttpClient 的問題。

另請注意，我使用相同的 Angular 版本 12* 構建了一個基本的 AngularJS 和 Angular 應用程序作為測試，並使用 ngUpgrade 引導它，並毫無問題地注入 HttpClient。

出現上述錯誤的應用程序是一個更大的生產應用程序。 如何進行？

我已經記錄了一個支持 Angular 的案例，但他們說使用 stackoverflow！

所以，我花了一段時間試圖找到一個解決方案，所以任何幫助都將不勝感激！

Answer 1

在根 app.module.ts 中導入 HttpClientModule @angular/common/http

將其添加到根 app.module.ts 的 ngModule 內的 imports 數組中。

@ngModule {
.
.
imports : [HttpClientModule]
.
.
}

這應該讓 Angular 將 HttpClient 對象注入到所有其他組件。