カテゴリー
Angular node.js プログラミング

Visual Studio Code(VSCode)でAngular開発環境構築

Visual studio CodeのインストールからNode.jsのインストールまで

下記URLを参照ください。
Visual Studio CodeでVue開発環境を構築

Visual Studio Code設定

Angularで使用する拡張機能一式まとめられている “Angular Essentials” をインストールします。
メニューの左の「Extensions」ボタンを押して、検索窓に “Angular Essentials”と検索てインストールします。

Angular CLIのインストール

Angularのバージョンをプロジェクト毎に変えて行きたいので、
CLIはローカルインストールにします。
フォルダを作成してコマンドプロンプトでその場所まで移動して下記コマンドを実行します。
(今回は使用しませんが、オプション -g をつけるとグローバルインストールになります。)

npm init -y
npm install @angular/cli

匿名の使用情報データを送信するかをきかれるので、今回はnoを入力しました。

? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. No

インストールされたか確認します。
ローカルにインストールされました。

npx ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.17
Node: 12.13.0
OS: win32 x64
Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.17
@angular-devkit/core         8.3.17
@angular-devkit/schematics   8.3.17
@angular/cli                 8.3.17
@schematics/angular          8.3.17
@schematics/update           0.803.17
rxjs                         6.4.0

プロジェクトを作成

プロジェクトを作成します。
コマンドプロンプト でAngularCLIをインストールしたフォルダに移動して下記コマンドを実行します。
(今回プロジェクトは”test”としました。
インストール中にroutingの 有無 とStyleSheetのフォーマットをきかれたので初期値のままとしました。

npx ng new test

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

VisualStudioCodeの「ファイル」「フォルダを開く」で先ほど作成したプロジェクトフォルダを指定します。

プロジェクトが読み込まれたら、[ターミナル]-[新規ターミナル]を選択します。

次にターミナルウィンドウに下記コマンドを入力します。

npx ng serve

コンパイルが完了したら表示されているURLにブラウザでアクセスします。
http://localhost:4200/
下記ページが表示されました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です