角度1内でレンダリングされないダウングレードAngular2コンポーネント

Question

私たちはtypescriptを使用してng1と2を混合し、モジュールローダーを使用しないという独特の状況があります。私はng1とng2の両方をブートストラップすることができましたが、コードの中にブレークポイントを入れてコードが実行されるのを見たが、コンポーネントには何も表示されませんでした。

コンパイル段階ではなく実行時ではなく、エラーは発生しません。角度1つのアプリの定義、es2015

(function() { 
    'use strict'; 
    angular.module('myApp', []); 
})(); 

myapp.ng2.ts - - 角度の2アプリの定義、typescriptです

namespace MyApp { 

let NgModule = ng.core.NgModule; 
let BrowserModule = ng.platformBrowser.BrowserModule; 
let UpgradeAdapter = ng.upgrade.UpgradeAdapter; 

@NgModule({ 
    imports: [BrowserModule] 
}) 

export class MyAppNg2 {} 

export const upgradeAdapter = new UpgradeAdapter(MyAppNg2); 

$(document).ready(function() { 
    upgradeAdapter.bootstrap(document.body, ['MyApp'], {strictDi: false}); 
}); 

} 

myapp.js：ここ

コードです

fullDetails.component.ts - 角度2 、typescriptです

namespace MyApp.Components.Misc { 

    let Component = ng.core.Component; 

    @Component({ 
     selector: 'full-details-header', 
     template: `This is ng2 component` 
    }) 

    export class FullDetailsHeaderComponent { 
    } 

} 

bootstrap.js - angular1、es2015

angular.module('myApp').component('fullDetailsHeader', MyApp.upgradeAdapter.downgradeNg2Component(MyApp.Components.Misc.FullDetailsHeaderComponent)); 

Answer 1

私は、これは角度のベータ版のためだと思うので、それは私が行っていないいる、と言うには少し難しいですしかし、あなたはまた、あなたのメインモジュールのentryComponents配列にダウングレードしたいコンポーネントを宣言する必要があり2+角度のバージョンのためのプロセスをアップグレードします。

@NgModule({ 
    imports: [BrowserModule], 
    entryComponents: [FullDetailsHeaderComponent] 
}) 

これがAngularベータ版であると仮定して、あまり働いていない場合、これを取り除き、Angularの最新バージョンを使用してofficial guideに従ってください。ベータ版とアンリリース版のAngularの間にng1/ng2ハイブリッドアプリケーションを作成した例では、ベータ版のアップグレードプロセスに関連する問題のトラブルシューティングを行う価値はないと感じる例では、多すぎます。

これはまだ質問や例を検索するのはかなり難しい領域ですので、Angularバージョン2+のアップグレードプロセスに関する質問がある場合は、新しい質問をしてpingしてください。

ここでは、Angularコンポーネントをダウングレードし、AngularJSで使用する実例を示した0​​を紹介します。これは、バージョン4.0.0以降でのみ動作するダウングレードプロセスで複数の移行を使用します。