Angular cli generate component

In this video we will discuss generating components using Angular CLI.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

You must have the npm packages installed to be able to generate components using Angular CLI. Otherwise when we try to generate components using the ng generate command we will get the following error.
node_modules appears empty, you may need to run 'npm install'

The following command creates a new Angular project with name "myProject" but it does not install the npm packages as we have used -si flag. The -si flag as we know skips installing the npm packages.
ng new myProject -si

At this point if we try to generate a new component using the following ng generate command, it reports an error - node_modules appears empty, you may need to run 'npm install'
ng generate component abc

We will have to first execute npm install command to install the required packages. Once this is done we will be able to generate components.

To generate a component use the following Angular CLI command
ng generate component ComponentName

OR the shortcut as shown below. In the following command the letter g stands for generate and the letter c stands for component
ng g c ComponentName

When we execute this command (ng g c abc) , several things happen
1. A folder with name abc is created
2. The component files (Component class, View template, CSS file and the spec file ) are created and placed inside the folder "abc"

Placing the generated component folder in a different folder : By default a separate folder is created for every new component that we generate, and the component files (.ts, .css, .html & .spec) are placed in this folder. This newly created folder is placed in the app folder by default. If you want the newly created folder to be placed in a different folder other than the app folder, simply include the folder name in the ng generate command

Generating a new component without a folder : To create a component without a folder, use --flat option with the ng generate command

Placing the flat component files in a different folder other than app : A flat component is a component that is created with --flat option. This component does not have it's own folder. By default the flat component files are placed in the "app" folder. If you want to place them in a different folder instead, specify the folder name along with the ng generate command.

Using --dry-run flag with component generation : Just like how we can use the --dry-run flag with "ng new" command, we can also use it with ng generate command. The --dry-run flag reports the files and folders that will be generated, without actually generating them. Once you are happy with what it is going to generate, you can remove the --dry-run flag and execute the command.

If you want an inline template and styles instead of an external template and stylesheet, use -it flag for inline template and -is flag for inline styles. Along the same lines, if you do not want a spec file use --spec=false. Notice we are also using the -d flag.

To use sass instead of CSS with your component, use the --style=scss flag with ng generate command. If you want less use --style=less

Text version of the video

Slides

Angular CLI Tutorial

Angular CLI Text articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

[sanmani]

ng g c -d --style=scss or ng g c -d --style scss both command working. Just for sharing an information. Thank you Pragim Team

[Joserbala]

Thank you a lot about your Angular tutorials, they are superb!

[amidalwadi]

superb clarification.... ! Thank you. :)

[sashidhar]

For generating a component inside an another folder, the backslash or forward-slash doesn't matter abc/xyz or abc\xyz

[josephregallis]

In my version of Angular, the abc.component.css file was not created. It seems that every time I create a new component, the .css file is not created. .scss file not created either with style=scss.

[anilnaidu]

Hi sir i got this error in cmd
i installed "npm install" pakages
D:\>cd app1
D:\app1>code .
'code' is not recognized as an internal or external command,
operable program or batch file.
i got this error and also my default browser is chrome but its not taken or rectifying the my browser can you help me please

[mahmoudraslan]

we can use --skip-tests instead of --spec=false

[ihsanullah]

Sir can we use these commands with visual studio?

[shashankpadelkar]

Sir Please Create Some Videos for Sql Automation jobs

[choudharymustansar]

Option "spec" is deprecated: Use "skipTests" instead.

[muditsharma]

Make sure the video is clear. most of the time it shows as blur

[DeepakBadoni]

Sir angular 4 pe video bna do please ab angular 2 absolute ho gayi hai

[riteshshende]

One error is.
The generate command requires to be run in an angular project, but a project definition could not be found.

Please reply