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開発にチェックを入れて、インストールを開始する。
プロジェクトを作成する
③ Angularを選択する。
④ Startup.ConfigureServices()で設定しているconfiguration.RootPathには仮の値が設定されているので、プロジェクト名に変更する。
 |
| 変更前 |
 |
| 変更後 |
 |
| ツールバーにある「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 |
コマンド「npm run ng update @angular/core@9 @angular/cli@9」を実行する。
④ 削除されたパッケージをプロジェクトから削除する。
調べた感じでは、問題が発生しているパッケージは非推奨となり、削除されたとのことです。
 |
| 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で以下の記事がありました。
詳しくは分かりませんが、Angularの実行方法が変わったようです。
そのため、上記のStackOverflowに書いてある対応を行います。
 |
| 変更前 |
 |
| 変更後 |
これでHello world画面が表示できるようになります。
コメント
コメントを投稿