3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Angular6の環境をVisualStudio2017で構築する方法

Last updated at Posted at 2018-08-05

VisualStudio2017にAngularのTemplateがあるが、Angular4用なのでAngular6の環境を構築する方法を忘備録としてまとめてみた。

1.VisualStudio2017で「ASP.NET Core Webアプリケーション」を選択
ng6-1.png

2.APIを選択
ng6-2.png

3.ソリューションを選択し、右クリックから「Open Command Line」→「Developer Command Prompt」を開く
ng6-4.png
※「Open Command Line」が表示されない場合は、拡張機能と更新プログラムからインストールする。

4.コマンドプロンプトから「ng new プロジェクト名」を入力して実行
ng6-5.png
※エラーが表示されて終了するが無視

5.「package.json」からパッケージの復元を実行

6.「startup.cs」を開き、Configureメソッドを以下のコードを追加

startup.cs
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
  if (env.IsDevelopment())
  {
    app.UseDeveloperExceptionPage();
  }

  app.UseMvc();
  
  //以下の2行を追加
  app.UseDefaultFiles();
  app.UseStaticFiles();
}

7.「angular.json」を開き「outputPath」の設定値を「wwwroot」に変更
ng6-9.png

8.プロジェクトの編集を開き「PropertyGroup」タグに以下のコードを追加

<TypeScriptCompilerBlocked>true</TypeScriptCompilerBlocked>
<PostBuildEvent>ng build --aot</PostBuildEvent>    

ng6-10.png

9.「Developer Command Prompt」を開き、「ng build」コマンドを実行

10.エラーがないことを確認しVisualStudio2017にてデバッグを実行
初期状態だと「localhost/api/values」が起動されるので、必要に応じて変更する(プロジェクトのプロパティ→デバッグ→ブラウザの起動の設定を変更)。
ng6-13.png

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?