Working with angular-cli: Generating components, directives, pipes, services, etc.

Introduction#

The angular-cli tool can help you to scaffold different parts of an angular application (components, directives, pipes, services, classes, guards, interfaces, enums and modules).

Syntax#

ng generate [component | directive | service | pipe | class | enum | interface | guard | module] [name] [flags…]
ng g [c | d | s | p | cl | e | i | g | m] [name] [flags…]

Parameters#

Parameter	Description
`component` or `c`	Used to generate component
`directive` or `d`	Used to generate directives
`service` or `s`	Used to generate services
`pipe` or `p`	Used to generate pipes
`class` or `cl`	Used to generate classes
`enum` or `e`	Used to generate enums
`interfaces` or `i`	Used to generate interfaces
`guard` or `g`	Used to generate guards
`module` or `m`	Used to generate modules
`--flat` or `-f`	Used to enable/disable directory creation
`--inline-template` or `-it`	Used to enable/disable inline html templates in components
`--inline-style` or `-is`	Used to enable/disable inline styles in components
`--prefix` or `-p`	Used to disable or change prefix
`--spec` or `-s`	Used to enable/disable `.spec` files creation
`--skip-import`	Used to skip the module import
`--app` or `-a`	Used to specify app name to use
`--module` or `-m`	Used to specify the declaring module
`--view-encapsulation` or `-ve`	Used to specify the view encapsulation strategy in components
`--change-detection` or `-cd`	Used to specify the change detection strategy in components
`--routing` or `-r`	Used to specify if routing module file should be generated

“Generate command” usage

You can use the ng generate or ng g command to generate Angular building blocks (components, services, pipes, etc.).

You can find all possible blueprints in the table below:

Scaffold	Usage	Shortened
Component	`ng generate component component-name`	`ng g c component-name`
Directive	`ng generate directive directive-name`	`ng g d directive-name`
Pipe	`ng generate pipe pipe-name`	`ng g p pipe-name`
Service	`ng generate service service-name`	`ng g s service-name`
Class	`ng generate class class-name`	`ng g cl class-name`
Guard	`ng generate guard guard-name`	`ng g g guard-name`
Interface	`ng generate interface interface-name`	`ng g i interface-name`
Enum	`ng generate enum enum-name`	`ng g e enum-name`
Module	`ng generate module module-name`	`ng g m module-name`

So, for example, if you run ng generate component user-list - angular-cli will:

create user-list directory in src/app folder or folder where you have run the command.
inside that directory generate 4 files (user-list.component.ts, user-list.component.html, user-list.component.css and user-list.component.spec.ts)
add user-list as a declaration in the @NgModule decorator of the nearest module.

Generating components

To add a component with a selector [prefix]-user-list, run:

  $ ng g c user-list
  
  installing component
    create src/app/user-list/user-list.component.css
    create src/app/user-list/user-list.component.html
    create src/app/user-list/user-list.component.spec.ts
    create src/app/user-list/user-list.component.ts
    update src/app/app.module.ts

prefix prevents element name collisions with components in other apps and with native HTML elements.

So, for example, if prefix is app - generated component will have app-user-list selector.

To prevent prefix usage add --prefix false or -p false flag

  $ ng g c user-list --prefix false

import { Component } from '@angular/core';

@Component({
  selector: 'user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent {}

To prevent .spec files creation add --spec false or -sp false flag

  $ ng g c user-list --spec false

  installing component
    create src/app/user-list/user-list.component.css
    create src/app/user-list/user-list.component.html
    create src/app/user-list/user-list.component.ts
    update src/app/app.module.ts

To use inline html templates instead of external templates add --inline-template or -it flag

  $ ng g c user-list --inline-template

  installing component
    create src/app/user-list/user-list.component.css
    create src/app/user-list/user-list.component.spec.ts
    create src/app/user-list/user-list.component.ts
    update src/app/app.module.ts

To use inline styles instead of external styles add --inline-style or -is flag

  $ ng g c user-list --inline-style

  installing component
    create src/app/user-list/user-list.component.html
    create src/app/user-list/user-list.component.spec.ts
    create src/app/user-list/user-list.component.ts
    update src/app/app.module.ts

To prevent folder creation add --flat or -f flag

  $ ng g c user-list --flat
  
  installing component
    create src/app/user-list.component.css
    create src/app/user-list.component.html
    create src/app/user-list.component.spec.ts
    create src/app/user-list.component.ts
    update src/app/app.module.ts

You can also combine flags listed above. For example, to create only .component.ts file without .css, .html, .spec files and folder use the following command.

  $ ng g c user-list -f -it -is -sp false
  
  installing component
    create src/app/user-list.component.ts
    update src/app/app.module.ts

All generate component flags:

Description	Flag	Shortened	Default Value
Prevent folder creation	`--flat`	`-f`	`false`
Prevent prefix usage	`--prefix false`	`-p false`	`true`
Prevent `.spec` files creation	`--spec false`	`-sp false`	`true`
Enable inline html templates	`--inline-template`	`-it`	`false`
Enable inline styles	`--inline-style`	`-is`	`false`

Generating directives

To add a directive with a selector [prefix]Highlight, run:

  $ ng g d highlight

  installing directive
    create src/app/highlight.directive.spec.ts
    create src/app/highlight.directive.ts
    update src/app/app.module.ts

To prevent prefix usage add --prefix false or -p false flag

  $ ng g d highlight --prefix false

import { Directive } from '@angular/core';

@Directive({
  selector: '[highlight]'
})
export class HighlightDirective {}

To prevent .spec files creation add --spec false or -sp false flag

  $ ng g d highlight --spec false

  installing directive
    create src/app/highlight.directive.ts
    update src/app/app.module.ts

To enable folder creation add --flat false or -f false flag

  $ ng g d highlight --flat false
  
  installing directive
    create src/app/highlight/highlight.directive.spec.ts
    create src/app/highlight/highlight.directive.ts
    update src/app/app.module.ts

You can also combine flags listed above. For example, to create only highlight.directive.ts file inside highlight folder without .spec file use the following command.

  $ ng g d highlight -f false -sp false

  installing directive
    create src/app/highlight/highlight.directive.ts
    update src/app/app.module.ts

All generate directive flags:

Description	Flag	Shortened	Default Value
Enable folder creation	`--flat false`	`-f false`	`true`
Prevent prefix usage	`--prefix false`	`-p false`	`true`
Prevent `.spec` files creation	`--spec false`	`-sp false`	`true`

Generating services

To add a service with a name UserService, run:

  $ ng g s user

  installing service
    create src/app/user.service.spec.ts
    create src/app/user.service.ts

To prevent .spec files creation add --spec false or -sp false flag

  $ ng g s user --spec false
  
  installing service
    create src/app/user.service.ts

To enable folder creation add --flat false or -f false flag

  $ ng g s user --flat false

  installing service
    create src/app/user/user.service.spec.ts
    create src/app/user/user.service.ts

You can also combine flags listed above. For example, to create only user.service.ts file inside user folder without .spec file use the following command.

  $ ng g s user -f false -sp false

  installing service
    create src/app/user/user.service.ts

All generate service flags:

Description	Flag	Shortened	Default Value
Enable folder creation	`--flat false`	`-f false`	`true`
Prevent `.spec` files creation	`--spec false`	`-sp false`	`true`

Generating pipes

To add a pipe with a name searchByName, run:

  $ ng g p search-by-name

  installing pipe
    create src/app/search-by-name.pipe.spec.ts
    create src/app/search-by-name.pipe.ts
    update src/app/app.module.ts

To prevent .spec files creation add --spec false or -sp false flag

  $ ng g p search-by-name --spec false
  
  installing pipe
    create src/app/search-by-name.pipe.ts
    update src/app/app.module.ts

To enable folder creation add --flat false or -f false flag

  $ ng g p search-by-name --flat false
  
  installing pipe
    create src/app/search-by-name/search-by-name.pipe.spec.ts
    create src/app/search-by-name/search-by-name.pipe.ts
    update src/app/app.module.ts

You can also combine flags listed above. For example, to create only search-by-name.pipe.ts file inside folder search-by-name folder without .spec file use the following command.

  $ ng g p search-by-name -f false -sp false

  installing pipe
    create src/app/search-by-name/search-by-name.pipe.ts
    update src/app/app.module.ts

All generate pipe flags:

Description	Flag	Shortened	Default Value
Enable folder creation	`--flat false`	`-f false`	`true`
Prevent `.spec` files creation	`--spec false`	`-sp false`	`true`

Generating modules

To add a module called GuestModule, run:

  $ ng g m guest

  installing module
    create src/app/guest/guest.module.ts

To enable .spec files creation add --spec or -sp flag

  $ ng g m guest --spec

  installing module
    create src/app/guest/guest.module.spec.ts
    create src/app/guest/guest.module.ts

To enable routing add --routing or -r flag

  $ ng g m guest --routing

  installing module
    create src/app/guest/guest-routing.module.ts
    create src/app/guest/guest.module.ts

You can also combine flags listed above. For example, to create module with routing and specs use the following command.

  $ ng g m guest -sp -r
  
  installing module
    create src/app/guest/guest-routing.module.ts
    create src/app/guest/guest.module.spec.ts
    create src/app/guest/guest.module.ts

All generate module flags:

Description	Flag	Shortened	Default Value
Enable `.spec` files creation	`--spec`	`-sp`	`false`
Enable routing	`--routing`	`-r`	`false`