angular-cliでappフォルダ直下にコンポーネントを作成したい

angular-cliのng generate componentでappフォルダ直下にコンポーネントを作成したい場合は、--flatオプションを付けるか、.angular-cli.jsonで設定を変更します。

環境

確認を行った環境

@angular/cli: 1.3.0
node: 8.1.3
os: darwin x64

設定前

ng generate componentでコンポーネントを作成

ng g component test

/src/app以下は次のようなディレクトリ構成になる

src
├── src/app
│   ├── src/app/app.component.css
│   ├── src/app/app.component.html
│   ├── src/app/app.component.spec.ts
│   ├── src/app/app.component.ts
│   ├── src/app/app.module.ts
│   └── src/app/test
│       ├── src/app/test/test.component.css
│       ├── src/app/test/test.component.html
│       ├── src/app/test/test.component.spec.ts
│       └── src/app/test/test.component.ts
...略...

設定する

設定ファイルを変更して常にflatオプションを有効にする場合

defaults->component->flatをtrueに設定します。

.angular-cli.json

{
// ...略...
  "defaults": {
    "styleExt": "css",
    "component": {
      "flat": true
    }
  }
}

確認する

ng generate componentでコンポーネントを作成

オプションを使用

ng g component --flat test

設定ファイルを変更済みの場合

ng g component test

app以下には他のファイルと同列にコンポーネントが配置されている

src
├── src/app
│   ├── src/app/app.component.css
│   ├── src/app/app.component.html
│   ├── src/app/app.component.spec.ts
│   ├── src/app/app.component.ts
│   ├── src/app/app.module.ts
│   ├── src/app/test.component.css
│   ├── src/app/test.component.html
│   ├── src/app/test.component.spec.ts
│   └── src/app/test.component.ts
...略...

参考

angular-cli -wiki
https://github.com/angular/angular-cli/wiki/generate-component