グローバルにAngular CLIをインストールしないでng newする方法

angularAngular
この記事は約4分で読めます。
スポンサーリンク

自分のPCにグローバルにAngular CLIをインストールしちゃうと、プロジェクトフォルダのAngularのバージョンと乖離しちゃったりします。またCI/CDサーバーにインストールするAngular CLIとバージョンを揃えておきたいという要望もあるかと思います。

そこで今回は、グローバルにAngular CLIをインストールせずに、全てローカルで完結させる方法を考えていきたいと思います。

プロジェクトフォルダの作成

まずは作業先ともなるプロジェクトフォルダを作成します。

mkdir tekitou
cd tekitou

ローカルにAngular CLIをインストールする

続いてそのフォルダ内にAngular CLIをインストールします。

npm i @angular/cli

普段だったら-gオプションをつけるところですが、今回はつけずにプロジェクトフォルダにインストールをします。

Angular CLIのバージョンの確認

インストールしたAngular CLIのバージョンを確認してみましょう。

npx ng version

結果は以下のようになります。

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

Angular CLI: 7.2.2
Node: 10.14.2
OS: linux x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.12.2
@angular-devkit/core         7.2.2
@angular-devkit/schematics   7.2.2
@angular/cli                 7.2.2
@schematics/angular          7.2.2
@schematics/update           0.12.2
rxjs                         6.3.3
typescript                   3.2.2

今回のインストールのポイントはnpxコマンドを使用した点です。このコマンドを使用すれば、ローカルにダウンロードしたnpmパッケージをあたかもnpmコマンドの様に使えます(従来だと./node_modules/.bin/パッケージ名で指定しなければならなかった)。

ng newコマンドを利用してプロジェクトフォルダ内にインストール

ここからはプロジェクトフォルダ内にAngular関連ファイルをインストールしていきます。

ただしここでは若干の注意が必要です。というのもプロジェクトフォルダは冒頭で作ってしまったので、フォルダ内にインストールファイルを展開する必要があります。でないとディレクトリの階層が一つ余分に深くなってしまいます。

なので以下のようにコマンドを実行します。

npx ng new PROJECT_NAME --directory=./ --routing=true --style=scss

オプションで–directory=./と指定する事により、現ディレクトリ内にインストールできます(他のオプションはルーティングの有効化とSCSSの利用を意味します)。

ブラウザに表示されるかテスト

最後にローカルサーバーを起動して、ブラウザに表示されるか確認しましょう。

npx ng serve

以下のように表示されていればOKです。

ngserve

コメント