Angular2 UpgradeComponent $インジェクタ

を逃す私はAngular1コンポーネントをアップグレードし、「角度2コードから角度1コンポーネントディレクティブを使用する」の下にthe official Angular2 documentation hereに従うことによって、私のAngular2アプリでそれを消費しようとしていますが、それは次のエラーを与える：

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定義から次の行を削除：

entryComponents: [AppComponent]

あなたはまた、実装する必要があります。私の場合は

bootstrap: [AppComponent]

、私も自分のentryComponentsセクションにAppComponentを追加する必要がありましたお持ちでない場合はngDoBootstrap方法は、：ここでは

export class AppModule { 
    ngDoBootstrap() {} 
}

出典

2016-11-18 20:32:44

まだ動作しません！代わりに、私は、アプリケーションがブートストラップされていないと言っているエラーを取得します。 'AppModule'の' bootstrap'行を削除するように言ってから意味があります（スクリーンショットはこちら）。（http://imgur.com/a/7o3Bi） – Dolan

Angularのウェブサイトの指示に従って、私も 'ngDoBootstrap'を実装しました。方法。それはあなたのエラーを取り除くはずです。 –

は、私が作成した実施例のplunkerです。私はあなたが説明したのと同じ問題を抱えていた。私のための鍵は、私の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ヶ月間の作業をダウングレードしない限り、選択肢ではありません。 1つのコンポーネントを簡単にアップグレードできますか？ – Dolan

私は自分の答えに基づいて混乱を理解していますが、角度のある文書をご覧ください：https://angular.io/docs/ts/latest/api/upgrade/index/UpgradeAdapter-class.htmlポイント8をチェックすると「メンタルモデル」の中で、「角度1は常に最初にブートストラップされ、一番下のビューを所有している」と述べています。これは、（私のプランナーのように）document.documentElementのようなものにアングル1のアプリケーションをブートストラップする必要があることを意味します。そこからAngular 2 AppComponentをダウングレードし、その底面図の中に配置します。メインエントリコンポーネントだけを他のすべてのNg2コンポーネントにダウングレードする必要はありません。 – dmungin

アプリケーションをブートストラップするNG2を使用するときには、UpgradeComponentでアップグレードNG1ディレクティブを使用することはできません。

アプリケーションとng2コンポーネントをブートストラップするためにng1を使用し、次にng2コンポーネントでng1ディレクティブを使用する必要があります。@NgModuleのbootstrap内のすべてのコンテンツを削除し、entryComponentsにAppComponentを移動し、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

出典

2017-02-22 08:29:20 LeeGenD

Angular2 UpgradeComponent $インジェクタ

答えて

関連する問題