Visual Studio 2017でAngular CLIで生成されたプロジェクトを実行することは可能ですか?
Hello Worldアプリケーションを生成しようとしましたが、Visual Studio 2017で実行できません。
ng new HelloWorld
フォルダをウェブサイトとして開き、[開始]をクリックしました。他の誰かがこれを解決しましたか?
「読み込み中...」は永久に実行されます。
答えはノーです。VSはAngular CLIプロジェクトを実行できません。.*proj
Angular CLIアプリケーションには、VSにプロジェクトの処理方法を指示するファイルはありません。それがなければ、VSは単なるコードエディターです。
Angular 4アプリケーションを開発/デバッグする場合は、VS以外の別のIDEを検討することをお勧めします。VS Codeを使用しています。これを使用すると、F5キーを押して、少ない労力でAngular CLIアプリケーションのデバッグを開始できます。ng serve
開発中にアプリケーションを実行するには、CLIから引き続き必要です。
VS 2017を使用してAngular開発を行う必要がある場合は、VSで使用できるSPAテンプレートを確認してください。
これらはASP.Net Core MVCとAngular 4を組み合わせたものです。それほど悪くはありません。しかし、それらにはMicrosoftの手法が少し含まれています。つまり、テンプレートは必ずしもAngularの規則であることがわかっているものに従っているわけではありません。彼らはMicrosoftにされてきた。あなたがそれを乗り越えることができれば、これらは良いことです。
私はそれらをいじってみましたが、正直に言って、それらが何かを迅速に稼働させるためにうまく機能していると言えます。VSがIDEの選択である場合、それは素晴らしいことです。もちろん、Angular CLIはこれらでは使用できません。少なくとも、私はそれを試したことはありませんし、おそらく試みません。
これがお役に立てば幸いです。
アップデート(2017-08-17)
Visual Studio 2017 15.3には、通常のWebアプリケーション.NET CoreプロジェクトテンプレートとしてAngularテンプレートが組み込まれています。ReactおよびReact / Reduxテンプレートも含まれています。テンプレートを選択肢として表示するには、[新しいASP.NET Coreアプリケーション]ダイアログでASP.NET Core 2.0を選択する必要があります。1.1以下を選択した場合、テンプレートはオプションのリストに表示されません。
アップデート(2018-02-23)
マイクロソフトは、ASP.NET Core 2.0アプリケーションで使用するいくつかの新しいテンプレートを提供しました。詳細については、こちらをご覧ください。新しいAngularテンプレートには、Angular CLIのサポートが含まれています。したがって、CLIに精通している場合、これはもう少し自宅のように感じるはずです。つまりng g
、この新しいテンプレートを使用してコードを生成するコマンドを実行できます。SSRはまだテンプレートの一部ですが、機能させるために少しコーディングする必要がありますが、大したことではありません。
アップデート(2018-08-28)
この回答に関するコメントで指摘されているように、この更新の時点では、ASP.NET Core Angularテンプレートは依然としてAngular 5(正確には5.2.0)のプロジェクトを生成します。私は正常に使用しているng update
更新する6+角度CLIバージョンで利用できるコマンドをClientAppこれが機能するためにASPテンプレートはバージョン5から6に構築すること(溶液の角の部分を)あなたは角CLIバージョンを持っている必要があります6がマシンにグローバルにインストールされています(npm i -g @angular/cli
)。
テンプレートリポジトリのコミットに基づいて、MSがAngular 6のサポートを追加したことを知っています。いつそれが広く利用可能になるかは私にはわかりません。それが出たら、将来のアップデートを探してください!
アップデート(2019-10-03)
最新の更新プログラムを適用したVS 2019(v16.3.2)には、Angular 8.0.0がAngularテンプレートとともに含まれています。.NET Core 3.0 SDKも含まれています。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加