Angular - Commands - Generate

Generate is used to create or add templates to your project.

Use this command after you have created a new project.

Samples

Cd \dev\bulletin\src\app 

Switch to the directory where you want to create code

Ng generate --help

Gives you help for the generate command.

Ng generate component employee –skip-test=true

Generate a component named employee. Also instructs the generator to not generate tests scripts.

Ng g c employee –skip-test=true

This is the same as above, however the generate and component commands were abbreviated to G C.

Many developers will use the most abbreviations they can, so this is pretty handy. I generally avoid these abreviations.

Ng generate component bulletin-test --skip-tests

Created a folder bulletin-test and added the following files

  • bulletin-test.component.ts - this is a typescript file that holds the programming code that drives this component.
  • bulletin-test.component.html - this is an html file that holds the code that is displayed to the user when this component is in use.
  • bulletin-test.component.css - this is a style sheet. Code in this file only applies to this component.
  • bulletin-test.component.spec.ts - this is a typescript file that holds code used when you run the project through testing.

Do not forget to stitch this component into the module by editing the app.module command. (Actually it looks like that was already done)

When you are ready to use this component then

  • Go into bulletin-list\bulletin-list.component.ts – observe/copy the selector ‘app-bulletin-list’. this is the name that other components will use to view this component.

  • Paste the tag into the app.component.html for example

    Ng generate module bulletin

Created a folder named bulletin

Added a file bulletin.module.ts

Types of things that can be generated

  • component
  • guard
  • module
  • service