Angular2 UpgradeComponent缺少$注射器

我想在我的Angular2應用升級Angular1成分和使用它的「使用從角2碼角1個組件配置」下的下列the official Angular2 documentation here，但它提供了以下錯誤：

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

我對引導main.ts是：

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

這是問題的簡化版本，以最少的再現步驟： https://github.com/dolanmiu/angular2-upgrade-test

它生成angular-cli

來源

2016-11-18 Dolan

我有一個類似的問題。要解決我的問題，我從我的AppModule定義中刪除以下行：

bootstrap: [AppComponent]

在我的情況，我也只好到AppComponent添加到我的entryComponents部分：

entryComponents: [AppComponent]

您還需要實現ngDoBootstrap方法，如果你還沒有：

export class AppModule { 
    ngDoBootstrap() {} 
}

來源

2016-11-18 20:32:44

它仍然無法使用！相反，我得到一個錯誤，說應用程序不是自舉的。有道理，因爲你告訴我刪除'AppModule'中的'bootstrap'行[Screenshot here]（http://imgur.com/a/7o3Bi） – Dolan

遵循Angular網站的指示，我還實現了'ngDoBootstrap'方法。這應該擺脫你的錯誤。 –

這是我創建一個工作示例的蹲點。我遇到了與你所描述的相同的問題。對我來說，關鍵是要降級我AppComponent和降級組件放置到角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() {} 
}

在我的例子降級角2 AppComponent是在index.html的，但你可以把它放在任何你想要的角1個模板，如果你的應用程序更有意義。

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

來源

2017-02-08 15:36:46 dmungin

我想將Angular1組件升級到Angular2，雖然因爲我們的大部分代碼庫都是Angular2。降級不是一種選擇，除非我們降級5個月的工作：P。更容易升級1個組件嗎？ – Dolan

我明白基於我的回答的困惑，但看看這裏的角度文檔：https://angular.io/docs/ts/latest/api/upgrade/index/UpgradeAdapter-class.html如果你檢查點8 「心理模型」中指出：「角1總是首先被引導，並擁有最底層的視角。」這意味着你必須有一個Angular 1 app引導到像document.documentElement這樣的東西（就像我的plunker一樣）。從那裏你降級你的Angular 2 AppComponent並將其放置在底部視圖中。你不需要降級每一個其他的Ng2組件，只是主要的入口組件。 – dmungin

它不能利用UpgradeComponent升級NG1指令，當您使用NG2來引導你的應用程序。

您需要使用ng1來引導應用程序和ng2組件，然後在ng2組件中使用ng1指令。

這就需要刪除的@NgModulebootstrap的所有內容，並在上文AppModule移動AppComponent到entryComponents，然後空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

來源

2017-02-22 08:29:20 LeeGenD

Angular2 UpgradeComponent缺少$注射器

回答

相關問題