2016-10-26 4 views
5

私はangle-cliで構築された角度2のアプリケーションを持っており、コンポーネントの1つに角度1のディレクティブを使用する必要があります(別のアプリケーションから再利用するため) 。私はからのステップに従っ:

https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-angular-1-component-directives-from-angular-2-code

しかし、今、私はこのエラーになったし、それを乗り越えることができません。私はangular2.0.2を使用しています(以前はベータ版でハイブリッドアプリを構築していましたが、angle1アプリでしたが、アダプタのダウングレード機能で角度2のコンポーネントを使用しました)。私が持っている私のapp.module.tsで

import { UpgradeAdapter } from '@angular/upgrade'; 
const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); 

const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail'); 

@NgModule({ 
    imports:  [ 
     BrowserModule, 
     ... 
    ], 
    declarations: [ 
     ...  
    HeroDetail 
    ] 
}) 
export class AppModule { } 

と私のヒーロー-detail.component.tsは次のようになります。

export const heroDetail = { 
    templateUrl: 'hero-detail.html', 
    controller: function() { 
    } 
}; 

と私のヒーロー-detail.htmlがどのように見えますこの:

<h2>Windstorm details!</h2> 

私は単にテンプレートに追加することによって、別の角度2の成分でディレクティブを使用しよう:

ng serveを実行すると、アプリケーションは正常にコンパイルされますが、ページをロードしようとすると、前述のエラーが発生します。

私がこれをどのように進めることができるかに関する提案はありますか?

+1

これはどの進歩ですか?私は同じ問題を経験しています。 – vangorra

答えて

2

不適切なブートストラップロジックがあるようです。

これは、ことを確認して、実際には非常に明白ではありません:あなたは@NgModule({bootstrap:[ ... ]})と任意のNG2コンポーネントをブートストラップしていない

  • 。代わりに、あなたのメインモジュールに空のngDoBootstrap() { }メソッドがあるはずです。
  • ルートテンプレートはng1テンプレートです。私。 index.htmlには、ng1コンポーネントまたはダウングレードng2コンポーネントのみが必要です。 ng2コンポーネントをルートとして持つことができますが、まずそれをダウングレードする必要があります。

    enter image description here

    ... NG2インジェクタがNG1から必要なすべてのプロバイダを持っていることを保証します:

公式アップグレードガイドは、DOM構造の例が含まれています。

関連する問題