Angular Commands Cheat Sheet

This Angular commands cheat sheet will help you get started using the Angular CLI (Command Line Interface).

Creating components

Create a component

ng generate component Cities

The above command will create a new folder in the src/app/ directory named Cities and within the new folder create four component files.

• cities.component.html: (Component Template File)
• cities.component.spec.ts: (Component Test File)
• cities.component.ts: (Component TypeScript File or Controller)
• cities.component.css: (Component CSS File. If the Angular application is configured for Saas the file extension will be scss instead of css)

The command will also modify the app.module.ts file by registering the new component.

The –dry-run switch

Use the --dry-run switch to see what a command will do before executing the command.

ng generate component Cities --dry-run

Create a component without a test file with –skip-tests

Use the --skip-tests switch to create a component without a test (.spec) file.

ng generate component Cities --skip-tests --dry-run

Specify the module to register your new component in with –module=app

If you have more than one module, in addition to the root module (AppModule – app.module.ts), you can specify which module to register your new component in.

ng generate component Cities --module=app --skip-tests --dry-run

Putting it all together – remove the –dry-run switch

ng generate component Cities --module=app --skip-tests

In the above command there is no –dry-run switch so the command is actually executed. A new directory called cities is created in the src/app folder and three component files were created without the test file. In addition the new component was registered in the root module by updating the app.module.ts file.