asp.net-core
Angular2と.Net Core

Angular 2 Hello Worldのクイックチュートリアル！ Visual Studio 2015で.NETコアを持つアプリケーション

ステップ：

1. 空の.Net Core Webアプリケーションを作成する：

2. wwwrootに行き、Index.htmlと呼ばれる通常のhtmlページを作成します。

3. 静的ファイルを受け入れるようにStartup.csを設定します（これには "Microsoft.AspNetCore.StaticFiles"を追加する必要があります： "project.json"ファイルの "1.0.0"ライブラリ）。

4. NPNファイルを追加：

   • WebUiプロジェクトを右クリックし、NPN設定ファイル（package.json）を追加します。

   • パッケージの最終バージョンを確認します。

     注：ビジュアルスタジオがパッケージのバージョンを検出しない場合（一部のパッケージがバージョンを表示し、一部のパッケージがそうでないためにすべてのパッケージをチェックします）、ビジュアルスタジオに来るノードのバージョンが正しく動作していない可能性がありますおそらく外部にノードjsをインストールし、そのインストールをVisual Studioにリンクする必要があります。

     私。ノードjsをダウンロードしてインストールします： https : //nodejs.org/es/download/

     ii。インストールをVisual Studioにリンクします： https : //ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ ： iii。 （オプション）package.jsonを保存した後、依存関係をプロジェクトにインストールします。そうでない場合は、package.jsonファイルと同じ場所からコマンドプロンプトを使用して「npm install」を実行します。

     注：Visual Studioに追加できる拡張機能である「コマンドラインを開く」をインストールすることをお勧めします。

5. タイスクリプトを追加：

   • WebUiプロジェクトの中で、組織のためだけにTsScriptフォルダを作成します（TypeScriptはブラウザには送られず、通常のJSファイルに変換されます）。このJSファイルはgulpを使ってwwwroot foderに行くものです。詳細は後述します）。

   • そのフォルダの中に「TypeScript JSON設定ファイル」（tsconfig.json）を追加します。 そして、次のコードを追加してください：

     

   • WebUiプロジェクトのルートに、typings.jsonという新しいファイルを追加します。 そして、次のコードを追加してください：

   • Web Projectのルートでコマンドラインを開き、 "typings install"を実行すると、これは入力フォルダを作成します（これは、ステップ4、番号iiiの注記のオプションのステップとして説明されている「Open Command Line」を必要とします）。

6. gulpを追加してファイルを移動する：

   • Webプロジェクトのルートに「Gulp Configuration File」（gulpfile.js）を追加します。
   • コードを追加：

7. "tsScripts"フォルダ内にAngular 2ブートストラップファイルを追加する：

   app.component.ts

   app.module.ts

   main.ts

8. wwwrootの内側に、次のファイル構造を作成します。

9. scriptsフォルダー内（ただしアプリケーション外）に、systemjs.config.jsを追加します。 そして、次のコードを追加してください：

10. Gulp Taskを実行して、wwwrootでスクリプトを生成します。

    • gulpfile.jsを右クリック
    • タスクランナーエクスプローラー私。タスクがロードされていない場合（「読み込みに失敗しました。「出力ウィンドウ」を参照してください）出力ウィンドウに移動し、エラーを見てください。ほとんどの場合、gulpファイルの構文エラーです。
    • 「デフォルト」タスクと「実行」を右クリックしてください（時間がかかり、確認メッセージはあまり正確ではありませんが、プロセスはまだ終了していますが、そのことを覚えておいてください）。

11. Index.htmlを次のように変更します。

12. 今すぐ走って楽しんでください。

    ノート：

    • typescriptでコンパイルエラーが発生した場合（例えば "TypeScript Virtual Project"）、Visual Studio用のTypeScriptバージョンが "package.json"で選択したバージョンに従って更新されないことを示すインジケータです。 ： https : //www.microsoft.com/en-us/download/details.aspx?id=48593

参考文献：

• Deborah KurataのPluralsightでの "Angular 2：Getting Started"コース：

  https://www.pluralsight.com/courses/angular-2-getting-started-update

• 角度2の公式文書：

  https://angular.io/

• Mithun Pattankarによる記事：

  http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

  http://www.mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio/

.NET Coreプロジェクト（バージョン0.8.3）でAngular 2コンポーネントを生成するときに予想されるエラー

.NET Coreプロジェクトで新しいAngular 2コンポーネントを生成すると、次のエラーが発生することがあります（バージョン0.8.3以降）。

Error locating module for declaration
        SilentError: No module files found

または

No app module found. Please add your new Class to your component. 
        Identical ClientApp/app/app.module.ts

[溶液]

1. app.module.client.tsの名前をapp.client.module.tsに変更します。

2. app.client.module.tsを開く：宣言の先頭に3ドット "..."を付け、宣言を角かっこで囲みます。

   例： [...sharedConfig.declarations, <MyComponent>]

3. Open boot-client.ts：新しいapp.client.moduleリファレンスを使用するようにインポートを更新します。

   たとえばimport { AppModule } from './app/app.client.module';

4. 次に、新しいコンポーネントを生成しようとします： ng g component my-component

[説明]

Angular CLIは、プロジェクト内のapp.module.tsという名前のファイルを探し、declarationsプロパティの参照を検索してコンポーネントをインポートしようとします。これは配列でなければなりません（sharedConfig.declarationsのように）が、変更は適用されません

[ソース]

• https://github.com/angular/angular-cli/issues/2962
• https://www.udemy.com/aspnet-core-angular/learn/v4/t/lecture/6848548 （セクション3.33講演者Bryan Garzon）