有人能建议如何在AngularJS/角混合应用程序中进一步调试这个HttpClient注入错误(没有http_HttpClient的提供者)吗？

Question

所以我有一个混合的AngularJS/Angular，除了我无法让HttpClient模块注入(没有http_HttpClient的提供者)之外，它都工作得很好。奇怪的是，不推荐的@ar角/http模块工作得很好。

因此，我们从一个AngularJS应用程序开始，然后加载角模块和相关模块，然后使用ngUpgrade配置它，以获得引导AngularJS应用程序的角度。然后，您可以在AngularJS应用程序中使用角组件，并随着时间的推移升级AngularJS组件。

因此，除了HttpClient模块之外，经过大量的尝试和错误之后，所有这些都能正常工作。

这是主要的app.ts，它定义并引导AngularJS应用程序和角应用程序(请注意，废弃的@ar角/http模块仅用作测试。我真正需要的是@ar角/ really /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;

服务(UserFeedbackService)，其中我尝试注入HttpClient (请注意，如果我试图将它注入到组件中，我会得到相同的错误，因此它看起来与服务无关)：

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的一个问题。

还请注意，我已经使用相同的角度版本12*搭建了一个基本的AngularJS和AngularJS作为测试，并使用ngUpgrade引导它，并且没有任何问题注入HttpClient。

上面错误的应用程序是一个更大的生产应用程序。怎么继续？

我记录了一个有棱角支撑的箱子，但是他们说使用堆栈溢出！

因此，我花了一段时间试图找到解决这一问题的办法，因此，今后的任何帮助都将受到感谢！

Answer 1

导入根HttpClientModule @angular/common/http中的根app.module.ts

将其添加到根ngModule of app.module.ts中的imports数组中。

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

这应该让角度将HttpClient对象注入到其他所有组件中。