Visual StudioでAngularの開発をする

 Angularの勉強を始めたので、今回はその内容になります。

さて、Angularの開発はVisual Studio Code(VSCode)で行うのがデファクトスタンダードだと思います。

しかし、私はどうしてもVisual Studio(VS)でやりたかった。

なぜなら、VSCodeも素晴らしいIDEですが、VSにはかなわないと思うからです。

ところが、いざ勉強を始めるために開発環境を構築しようとしたところ、一筋縄ではいかなかったので、私みたいに「AngularをVSでやりたい!」という人のために書き留めておきます。

Node.jsをインストールする

公式サイトから最新版を落としてきてインストールします。

特段理由が無ければTLS版を選択する

Visual StudioにNode.js開発ツールをインストールする

① Visual Studio Installerを起動して、変更を選択する。

② Node.js開発にチェックを入れて、インストールを開始する。


プロジェクトを作成する

① ASP.NET Core Web アプリケーションを選択する。

② プロジェクト名などを入力して、プロジェクトを作成する。

③ Angularを選択する。

④ Startup.ConfigureServices()で設定しているconfiguration.RootPathには仮の値が設定されているので、プロジェクト名に変更する。
変更前
変更後

⑤ Hello world画面が表示できることを確認する。
ツールバーにある「IIS Express」から実行できる

Angularのバージョンを上げる

「ClientApp」がクライアント側のソースコード、つまりAngularのソースコードになります。


① インストールされているAngularのバージョンを確認する。


ngコマンドを実行するためには、ClientAppへ移動して頭に「npm run」を付ける必要があります。

インストールされたAngularは8なので、現時点で最新の10へバージョンアップします。

② まずは8の最終版へバージョンアップする。

コマンド「npm run ng update @angular/core@8 @angular/cli@8」を実行する。

Angular 8.2.12 → 8.2.14
③ 9へバージョンアップする。

コマンド「npm run ng update @angular/core@9 @angular/cli@9」を実行する。


④ 削除されたパッケージをプロジェクトから削除する。
10へバージョンアップしようとすると、@nguniversal/module-map-ngfactory-loaderで以下のエラーが発生します。

調べた感じでは、問題が発生しているパッケージは非推奨となり、削除されたとのことです。
そのため、プロジェクトから「@nguniversal/module-map-ngfactory-loader」で検索し、全て削除します。
app.server.module.ts

package.json


package-lock.json

⑤ 10へバージョンアップする。

コマンド「npm run ng update @angular/core @angular/cli」を実行する。


現時点で最新のバージョンになりました。


プロジェクトを実行可能な状態にする

① SyntaxErrorを解決する。

プロジェクトを実行すると、SyntaxErrorが発生します。

原因を調べたところ、StackOverflowで以下の記事がありました。

ncaught SyntaxError: Strict mode code may not include a with statement

詳しくは分かりませんが、@angular/platform-serverを抹消すればいいようです。

app.server.module.ts


main.ts

package.json

package-lock.json

② タイムアウトを解決する

プロジェクトを実行するとタイムアウトが発生します。

原因を調べたところ、StackOverflowで以下の記事がありました。

TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 0 seconds

詳しくは分かりませんが、Angularの実行方法が変わったようです。

そのため、上記のStackOverflowに書いてある対応を行います。

変更前

変更後

これでHello world画面が表示できるようになります。


コメント

このブログの人気の投稿

Ryzen 5 3400G を購入!

開発用PCをカスタマイズ

田代、会社員やめるってよ