Question

我正在尝试升级Angular1组件并在我的Angular2应用程序中使用the official Angular2 documentation here在＆＃34;使用Angular 2 Code＆＃34;中的Angular 1组件指令下使用它，但它会出现以下错误：

error_handler.js:54 TypeError: Cannot read property 'get' of undefined
    at ChartDirective.UpgradeComponent (upgrade_component.js:97)

在第97行仔细检查后，这个。$检查员未定义：

我的代码非常简单：

import { Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

export const coolComponent = {
  template: 'cool',
  controller: function() {
  }
};

@Directive({
    selector: 'app-chart'
})
export class ChartDirective extends UpgradeComponent {

    constructor(elementRef: ElementRef, injector: Injector) {
        super('coolComponent', elementRef, injector);
    }
}

我的引导主要是：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

以下是问题的简化版本，只需极少的复制步骤： https://github.com/dolanmiu/angular2-upgrade-test

由angular-cli

生成

Answer 1

我有类似的问题。为了解决我的问题，我从AppModule定义中删除了以下行：

bootstrap: [AppComponent]

就我而言，我还必须将AppComponent添加到我的entryComponents部分：

entryComponents: [AppComponent]

如果您还没有实施ngDoBootstrap方法，还需要实施：

export class AppModule {
  ngDoBootstrap() {}
}

Answer 2

这是我创建的一个工作示例的插图。我遇到了和你描述的一样的问题。对我来说关键是降级我的AppComponent并将降级的组件放入Angular 1应用程序中：

import { App1Component } from './app1.component';
import { App } from './app';
import { downgradeComponent } from '@angular/upgrade/static';

angular.module('ng1', [])
  .directive(
      'ng2AppComponent',
      downgradeComponent({component: App})
    )
  .component('app1Component', App1Component);

的index.html：

...
<body>
   <ng2-app-component></ng2-app-component>
</body>
...

然后我需要按照上面的描述进行操作，并将AppComponent移动到AppModule中的entryComponents。

@NgModule({
  imports: [ BrowserModule, UpgradeModule ],
  declarations: [ App, App1Directive ],
  entryComponents: [ App ]
})
export class AppModule {
  ngDoBootstrap() {}
}

在我的示例中，降级的Angular 2 AppComponent位于index.html中，但是如果对您的应用程序更有意义，您可以将它放在您想要的任何Angular 1模板中。

https://plnkr.co/edit/YSw63x10WAEivMWdNffj?p=preview

Answer 3

当您使用ng2来引导应用程序时，它无法使用UpgradeComponent升级的ng1指令。

您需要使用ng1来引导应用程序和ng2组件，然后在ng2组件中使用ng1指令。

哪些需要删除bootstrap @NgModule中的所有内容，并将AppComponent移至entryComponents，然后在AppModule中清空ngDoBootstrap()：

@NgModule({
    bootstrap: [  ],
    //...
    entryComponents: [
        AppComponent,
        //...
    ]
})
export class AppModule {
    public ngDoBootstrap() {}
}

之后，降级AppComponent：

import { AppComponent } from '../app.component';
import { downgradeComponent } from '@angular/upgrade/static';
//...
angular.directive(
    'app', downgradeComponent({
        component: AppComponent
    }) as angular.IDirectiveFactory
);

现在，您可以在ng2组件中渲染ng1指令。

更多详情：Angular2 UpgradeComponent missing $injector

Angular2 UpgradeComponent缺少$ injector

3 个答案: