既存のASP.NET Webページに角2コンポーネントを使用する

Question

ウェブサイトのフロントエンド部分を角2に移動しようとしています。 現在、私は本当に大きなですASP.NET 4.5ウェブサイト。今の

私はそれが（asp.netを交換できればと）時間とともに成長するように、分離角度2プロジェクトを作成したい 私はのVisual Studio（2015）でこのプロジェクトを作成したいです実際にはのASP.NETウェブサイトでいくつかの角型コンポーネントまたはモジュールを使用してください。 角度AppModuleはASP Webサイトにあるとしますか？

私はいくつかの調査を行いましたが、回答や例が見つかりませんでした。

npmとsystem.jsに依存していますか？多くの人がグルップを使ってファイルをコピーしているのを見ました。

これを行う「正しい」方法はありますか？

すべてのヘルプは非常にこの質問は、Visual Studioに特有のものではなく、はい、あなたは確かにこれを達成することができます

Answer 1

をいただければ幸いです。

あなたが示唆したように、Angularアプリケーションを別のプロジェクトとして維持することができます。

SystemJSとそのページ内またはそのマスターページ内のスクリプトタグを経由して、その構成（あなたはまた、CMSのために動的にこれを行うことができ含めだけ、あなたの.aspxページに作成する必要が追加されている

1. 他のあらゆる種類の戦略を使用します）。例えば、アプリケーションのルート要素に対応するセレクタでマークアップタグを追加する

   <script src="loction-of-systemjs.js"></script> 
   <script src="loction-of-systemjs.config.js"></script> 
   

2. については、お使いの.aspxマークアップに、「私-embeddedableウィジェット」を言います。上記成分の選択を含むページに埋め込まれたスクリプトタグからSystemJS.importを介してアプリケーションをインポート例

   <my-embeddedable-widget>Loading...</my-embeddedable-widget> 
   

3. ため。たとえば、これは'私-embeddedableウィジェット'があなたのSystemJSの構成で設定されていることを二つ

   1. を前提としていること

      <script> 
          SystemJS.import('my-embeddedable-widget') 
          .catch (function(e) { 
           console.error(e); 
          }); // not using .bind or => here since aspx tends to imply older browser support 
      </script> 
      

   注意。そうでない場合の例

   SystemJS.config({ 
       packages: { 
       'my-embeddedable-widget': { 
        main: 'main.ts' // just an example, could be main.js or anything really 
       } 
       } 
   }); 
   

   のためには、アプリのような適切な上記のconfigエントリを追加することができます（強く推奨）または、まさにこのような例として、アプリケーションのエントリポイントへのパスから直接インポートmy-embedable-widget/main.tsまたはmy-embedable-widget/main.jsを使用します。

4. あなたのウィジェットのエントリポイントは、zone.jsなどのプラットフォームレベルの依存関係をすべて宣言している可能性があります。例えば

   私-embeddedableウィジェット/ main.ts

   import 'zone.js'; 
   import 'core-js'; 
   // ... 
   import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
   // .... 
   

   これはあなたのウィジェットが要求されたときSystemJSローダは自動的にそれらをもたらすことを意味します。私たちがローダ自体と同じように個別のスクリプトタグを使ってそれらを持ち込むことができますが、ESモジュールを使用してウィジェットの明示的な依存関係を持たせることで、メンテナンス性が向上し、必要になるまでロードを延期できます。さらに、.aspxページからウィジェットをさらに分離するのに役立ちます。しかし、ページ上の他のJavaScriptがこれらpolyfillsを必要とする場合、あなたは全く