w3resource

ng generate

Generates and/or modifies files based on a schematic

ng generate <schematic> [options]
ng g <schematic> [options]

Description

Takes the name of the project, as specified in the projects section of the angular.json workspace configuration file. When a project name is not supplied, it will execute for all projects.

Arguments

ARGUMENT DESCRIPTION
<schematic>

The schematic or collection:schematic to generate. This option can take one of the following sub-commands:

  • appShell
  • application
  • class
  • component
  • directive
  • enum
  • guard
  • interface
  • library
  • module
  • pipe
  • service
  • serviceWorker
  • universal
  • webWorker

Options

OPTION DESCRIPTION
--defaults=true|false When true, disables interactive input prompts for options with a default.
--dryRun=true|false When true, runs through and reports activity without writing out results.
Default: false
Aliases: -d
--force=true|false When true, forces overwriting of existing files.
Default: false
Aliases: -f
--help=true|false|json|JSON Shows a help message for this command in the console. Default: false
--interactive=true|false When false, disables interactive input prompts.

Schematic commands

appShell

ng generate appShell [options]
ng g appShell [options]

Generates an app shell for running a server-side version of an app.

Options

OPTION DESCRIPTION
--appDir=appDir The name of the application directory.
Default: app
--appId=appId The app ID to use in withServerTransition().
Default: serverApp
--clientProject=clientProject The name of the related client app.
--index=index The name of the index file
Default: index.html
--main=main The name of the main entry-point file.
Default: main.server.ts
--name=name The HTML selector of the Universal app
--outDir=outDir The output directory for build results.
Default: dist-server

application

ng generate application <name> [options]
ng g application <name> [options]

Generates a new basic app definition in the "projects" subfolder of the workspace.

Arguments

ARGUMENT DESCRIPTION
<name> The name of the new app.

Options

OPTION DESCRIPTION
--enableIvy=true|false

EXPERIMENTAL True to create a new app that uses the Ivy rendering engine.
Default: false
--inlineStyle=true|false When true, includes styles inline in the root component.ts file. Only CSS styles can be included inline. Default is false, meaning that an external styles file is created and referenced in the root component.ts file.
Default: false
Aliases: -s
--inlineTemplate=true|false When true, includes template inline in the root component.ts file. Default is false, meaning that an external template file is created and referenced in the root component.ts file.
Default: false
Aliases: -t
--lintFix=true|false

When true, applies lint fixes after generating the application.
Default: false
--minimal=true|false When true, creates a bare-bones project without any testing frameworks. (Use for learning purposes only.)
Default: false
--prefix=prefix A prefix to apply to generated selectors.
Default: app
Aliases: -p
--routing=true|false When true, creates a routing NgModule.
Default: false
--skipInstall=true|false Skip installing dependency packages.
Default: false
--skipPackageJson=true|false When true, does not add dependencies to the "package.json" file.
Default: false
--skipTests=true|false When true, does not create "spec.ts" test files for the app.
Default: false
Aliases: -S
--style=css|scss|sass|less|styl The file extension or preprocessor to use for style files.
Default: css
--viewEncapsulation=    Emulated|Native|None|ShadowDom The view encapsulation strategy to use in the new app.

class

ng generate class <name> [options]
ng g class <name>[options]

Creates a new generic class definition in the given or default project.

Arguments

ARGUMENT DESCRIPTION
<name> The name of the new class.

Options

OPTION DESCRIPTION
--lintFix=true|false When true, applies lint fixes after generating the class.
Default: false
--project=project The name of the project.
--skipTests=true|false When true, does not create "spec.ts" test files for the new class.
Default: false
--type=type Adds a developer-defined type to the filename, in the format "name.type.ts".
Default:

component

ng generate component <name> [options]
ng g component <name> [options]

Creates a new generic component definition in the given or default project.

Arguments

ARGUMENT DESCRIPTION
<name> The name of the component.

Options

OPTION DESCRIPTION
--changeDetection=Default|OnPush The change detection strategy to use in the new component.
Default: Default
Aliases: -c
--entryComponent=true|false

When true, the new component is the entry component of the declaring NgModule.
Default: false

--export=true|false When true, the declaring NgModule exports this component.
Default: false
--flat=true|false When true, creates the new files at the top level of the current project.
Default: false
--inlineStyle=true|false When true, includes styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.
Default: false
Aliases:?-s
--inlineTemplate=true|false When true, includes template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.
Default: false
Aliases: -t
--lintFix=true|false When true, applies lint fixes after generating the component.
Default: false
--module=module The declaring NgModule.
Aliases: -m
--prefix=prefix The prefix to apply to the generated component selector.
Aliases: -p
--project=project The name of the project.
--selector=selector The HTML selector to use for this component.
--skipImport=true|false When true, does not import this component into the owning NgModule.
Default: false
--skipTests=true|false When true, does not create "spec.ts" test files for the new component.
Default: false
--spec=true|false Deprecated: Use "skipTests" instead.
When true (the default), generates a "spec.ts" test file for the new component.
Default: true
--style=css|scss|sass|less|styl The file extension or preprocessor to use for style files.
Default: css
--styleext=styleext Deprecated: Use "style" instead.
The file extension to use for style files.
Default: css
--viewEncapsulation=    Emulated|Native|None|ShadowDom The view encapsulation strategy to use in the new component.
Aliases: -v

Previous: ng test
Next: ng update



Follow us on Facebook and Twitter for latest update.