将 Angular 组件降级为 AngularJS 时出现意外的提供程序

Question

我已经成功地 bootstrap 我的混合应用程序，但是当我尝试在我的 AngularJS 模板中使用降级的 Angular 组件指令时，我得到此错误：

Error: StaticInjectorError[{providers:[[object Object]], parent:[object Object], name:"DowngradeComponentAdapter"}]: Unexpected provider
    at staticError (core.js:1360)
    at recursivelyProcessProviders (core.js:1209)
    at new StaticInjector (core.js:1079)
    at Function.webpackJsonp../node_modules/@angular/core/esm5/core.js.Injector.create (core.js:1051)
    at DowngradeComponentAdapter.webpackJsonp../node_modules/@angular/upgrade/esm5/static.js.DowngradeComponentAdapter.createComponent (static.js:230)
    at doDowngrade (static.js:528)
    at Object.link (static.js:554)
    at angular.js:1383
    at invokeLinkFn (angular.js:10610)
    at nodeLinkFn (angular.js:9999) "<test-comp>"

我的 AngularJS 宿主组件和都是非常简单的静态组件。不能 google 类似的东西。请帮忙

Answer 1

尝试在您的 app.module.ts

中导入 HttpClientModule

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

@NgModule({
    imports: [
     HttpClientModule
    ]
})

Answer 2

如果我对你的问题的理解正确，那么你正在尝试使用来自 AngularJS 代码的 Angular 组件。鉴于这是正确的，希望以下信息对您有所帮助：

生成的降级组件是一个指令，你需要在AngularJS模块中注册它。

angular.module('yourApp', [])
       .directive(
       'yourComponent',
       downgradeComponent({ component: YourComponent }) as 
       angular.IDirectiveFactory);

因为这是一个 Angular 组件，您需要将它添加到您的 AppModule 声明中。
由于此组件正被 AngularJS 模块使用，如果它是一个入口点，请将其添加到 NgModule 的 entryComponents。

我猜您错过了在某处注册该组件。以供参考 - https://angular.io/guide/upgrade#using-angular-components-from-angularjs-code了解更多信息

Answer 3

问题显然是我安装了更新版本的@angular/upgrade (5.2)，它与我系统 (5.1) 上的其他 angular 软件包不兼容。

将 Angular 组件降级为 AngularJS 时出现意外的提供程序

Unexpected provider when downgrading Angular component to AngularJS

angular

angular5