LoginSignup

Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

LoginSign up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@nishitaku

【Angular】ng generate の便利なオプション

Last updated at Posted at 2022-02-09

バージョン

% ng version
Angular CLI: 13.2.2

基本構文

% ng generate <schematic> [options]

<schematic>には、スキーマ(moduleやcomponent)を指定します。

options

--dry-run (-d)

実行前に生成、更新されるファイルを確認しておきたいときに。

% ng generate component test -d
CREATE src/app/test/test.component.scss
CREATE src/app/test/test.component.html
CREATE src/app/test/test.component.spec.ts
CREATE src/app/test/test.component.ts
UPDATE src/app/app.module.ts

NOTE: The "dryRun" flag means no changes were made.

--defaults

対話モードを無効化します。
例えば、ng generate applicationの場合、通常だと
? Would you like to add Angular routing? (y/N) や
? Which stylesheet format would you like to use? (Use arrow keys)
のように、コマンド入力が必要となりますが、--defaultsを指定すれば、全てデフォルト設定で自動でやってくれます。

--module

指定可能なスキーマ：component directive module pipe
指定したモジュールのimportsに自動的に追加されます。

% ng generate module modules/test --module=app.module.ts
CREATE src/app/modules/test/test.module.ts
UPDATE src/app/app.module.ts
app.module.ts
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TestModule } from './modules/test/test.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TestModule // NEW
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

指定する文字列は.module.tsを省略可能。
src/appからの相対パスで指定します。
(例)src/app/modules/test/test.module.tsにimportしたい場合

% ng generate module modules/test2 --module=modules/test
CREATE src/app/modules/test2/test2.module.ts
UPDATE src/app/modules/test/test.module.ts

--export

指定可能なスキーマ：component directive pipe
指定した場合、モジュールのexportsに追加されます。
SharedModuleなどに含まれるコンポーネントを生成するときに使いましょう。

% ng generate component test --export
CREATE src/app/test/test.component.scss
CREATE src/app/test/test.component.html
CREATE src/app/test/test.component.spec.ts
CREATE src/app/test/test.component.ts
UPDATE src/app/app.module.ts
app.module.ts
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TestComponent } from './components/test/test.component';

@NgModule({
  declarations: [
    AppComponent,
    DefaultComponent,
    TestComponent,
  ],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
  exports: [TestComponent],
})
export class AppModule {}

--skip-tests

指定可能なスキーマ：application class component directive guard interceptor pipe resolver service
指定した場合、spec.tsを生成しません。

% ng generate component test --skip-tests
CREATE src/app/test/test.component.scss
CREATE src/app/test/test.component.html
CREATE src/app/test/test.component.ts
UPDATE src/app/app.module.ts

--flat

指定した場合、ディレクトリを作成しません。
指定可能なスキーマ：component directive guard interceptor module pipe resolver service

% ng generate module modules/test --flat
CREATE src/app/modules/test.module.ts

--routing

指定可能なスキーマ：application module
指定した場合、同時にルーティングモジュールを作成します。

% ng generate module modules/test --routing
CREATE src/app/modules/test/test-routing.module.ts
CREATE src/app/modules/test/test.module.ts
test.module.ts
test.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { TestRoutingModule } from './test-routing.module';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    TestRoutingModule
  ]
})
export class TestModule { }
test-routing.module.ts
test-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TestRoutingModule { }

--route

指定可能なスキーマ：module
指定されたパスで遅延ロードするモジュールを生成します。
生成されたモジュールのルートに表示されるコンポーネントと、ルーティングモジュールも同時に作成されます。
遅延ロードさせるモジュールを--moduleオプションで指定する必要があります。

% ng generate module modules/test --route=hoge --module=app
CREATE src/app/modules/test/test-routing.module.ts
CREATE src/app/modules/test/test.module.ts
CREATE src/app/modules/test/test.component.scss
CREATE src/app/modules/test/test.component.html
CREATE src/app/modules/test/test.component.spec.ts
CREATE src/app/modules/test/test.component.ts
UPDATE src/app/app-routing.module.ts
app-routing-module.ts
app-routing-module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // UPDATE
  {
    path: 'hoge',
    loadChildren: () =>
      import('./modules/test/test.module').then((m) => m.TestModule),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}
test-routing.module.ts
test-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TestComponent } from './test.component';

const routes: Routes = [{ path: '', component: TestComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TestRoutingModule { }

--change-detection (-c)

指定可能なスキーマ：component
OnPushを指定した場合、ChangeDetectionStrategy.OnPushで生成されます。

% ng generate component test --change-detection="OnPush"
CREATE src/app/test/test.component.scss
CREATE src/app/test/test.component.html
CREATE src/app/test/test.component.spec.ts
CREATE src/app/test/test.component.ts
UPDATE src/app/app.module.ts
test.component.ts
test.component.ts
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-onpush',
  templateUrl: './onpush.component.html',
  styleUrls: ['./onpush.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OnpushComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

--display-block (-b)

指定可能なスキーマ：component
スタイルに:host { display: block; }が追加されます。

% ng generate component test --display-block
CREATE src/app/test/test.component.scss
CREATE src/app/test/test.component.html
CREATE src/app/test/test.component.spec.ts
CREATE src/app/test/test.component.ts
UPDATE src/app/app.module.ts
test.component.scss
test.component.scss
:host {
  display: block;
}

nameの指定方法

例えばmoduleの場合、基本構文はこうなります。

% ng generate module <name> [options]

この<name>へ指定する文字列は、コマンド実行時のカレントディレクトリによって挙動が変わるため、注意が必要です。

カレントディレクトリがプロジェクトルートの場合は、src/appからの相対パスを指定します。
(例)src/app/modulesに作成する場合

% ng generate module modules/test
CREATE src/app/modules/test/test.module.ts

カレントディレクトリがプロジェクトルート以外の場合は、カレントディレクトリからの相対パスを指定します。
(例)カレントディレクトリがsrc/app/hogeで、src/app/modulesに作成する場合

% ng generate module ../modules/test
CREATE src/app/modules/test/test.module.ts

ちなみに、指定されたサブディレクトリが存在しない場合（上記の場合modulesディレクトリが存在しない場合）は、自動で作成してくれます。

さいごに

他にも色々なオプションがあるので、一度目を通しておくのがいいと思います。
Angular公式

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?