【Angular】プロジェクト作成~最初にやっておきたい処理

概要

Angularを開発するときに最初にやっておきたい処理を実践的に書いておきます。開発環境としてOSはWindows,IDEはVS Codeを使用しますがMacでも対して変わらないかと。

インストール

Anguarを開発するときはひな形を作成するangular/cliをインストールする必要があります。厳密にはangular/cliを使わなくても開発できますが、angular/cliを使ったほうが楽であり、使わない理由はないので。

node.js

angular/cliの前にnode.jsのインストールが必要です。node.jsはバージョンが頻繁に変わるのでnvmをインストールする方が得策。以前、nvmからnode.jsをインストールする記事を書いているのでそれを参考に

【Windows】nvmからnode.jsをインストールする
nvm-windows windowsのnvmはいくつか種類がありますが、個人的に楽でLinux、Macとコマンドが似ているnvm-win...

angular/cli

angular/cliはグローバルインストールした方が楽です。インストール方法はコマンドプロンプトまたはpower shellからnpmコマンドを使用しインストールします。

Angularプロジェクトの作成

angular/cliをインストールするとngコマンドが使用できるようになります。ngを使用してプロジェクトの雛形を作成しますが、その前にcssスタイルかscssスタイルかを決めておいたほうが良いでしょう。後々変更するのは手間ですからね。

とりあえず実行

とりあえず実行してみましょう。作成したプロジェクトに移動し、npm startコマンドを発行します。

起動が成功するとhttp://localhost:4200/にアクセスできるはずです。うまくいかない場合は、アンチウィルスなどで切断されている可能性があります。その場合はアンチウィルスのファイアウォールを一時的に停止させるなどをしてみてください。

デバックの設定

うまく起動できたらデバックの設定をしておきましょう。これも以前に記事を書いています。

【Angular】VS Codeでデバック設定
VS Codeを使ってAngularのデバック設定から実行まで行う。

package.jsonの編集

作成するAngularのサーバーの設置場所がトップディレクトリ以外の場合はbase-hrefの設定をしていた方が開発環境と実行環境で差異がなくなるのでおすすめです。

base hrefの例
URL base href
http://example.com / または指定なし
http://example.com/path/ /path/
http://example.com/path/to/ /path/to/

base href付きのscriptをpackage.jsonに変更・追記します。

npm startでサブディレクトリまで掘り下げたAngularサイトが表示されます。これで実行環境とパスによる失敗が無くなります。

とりあえずFormModuleをいれる

FormModuleはデフォルトで入っていません(DIされていない)。HTMLのinputタグを使わないSPAは無い方が珍しいので忘れる前に入れておきましょう。

よきAngularライフを

とりあえず。こんなところです。

スポンサーリンク
レタリング(大)広告
レタリング(大)広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レタリング(大)広告