Angular: ワークスペースとプロジェクトの構成


前提


ドキュメント


プロジェクト作成コマンド

ng new

ng generate application


ワークスペースとプロジェクトの作成パターン


ワークスペース

ng newで指定した名前で新規作成されるディレクトリ。


angular.json

ワークスペースやプロジェクト、ngコマンドのデフォルト設定を記述したもの。ng newで自動生成。

ワークスペースに関するデフォルト

"newProjectRoot": "projects"

"defaultProject": "プロジェクト名"

プロジェクトに関するデフォルト

projects

  "projects": {
    "プロジェクト名": {
    },
    "プロジェクト名": {
    },
  },

ng newのデフォルトを変える主なオプション


ワークスペースとプロジェクトを同時作成する

ng new プロジェクト名 --defaults 

ワークスペースだけ作る

# プロジェクトはまだ作らない
ng new ワークスペース名 --create-application=false  --defaults

プロジェクトを新規作成する

ng generate application プロジェクト名

プロジェクトルートの内容

browserslist
e2e/
karma.conf.js
src/
tsconfig.app.json
tsconfig.spec.json
tslint.json

レンダリングエンジンIvy


後からライブラリをnpm installする

Angularライブラリ(node_modules/以下)が含まれていない状態でも、package.jsonに依存の設定があればすぐインストールできる。

ライブラリもプロジェクトも空のワークスペースを作る

ng new ワークスペース名 --defaults --skip-install --create-application=false

これでもワークスペースには、angular.jsonpackage.jsonが含まれている。

README.md  angular.json  package.json  tsconfig.json  tslint.json

プロジェクトがないときのangular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {}
}

ライブラリを入れる

GitHubで配布されているAngularサンプルでも、たいていはpackage.jsonがあるので、後からnpm installできる。

# ワークスペースで
npm install