Angular CLI cheat sheet

Install Globally

npm install -g @angular/cli

Install Locally

npm install @angular/cli

To run a locally installed version of the angular-cli, you can call ng commands directly by adding the .bin folder within your local node_modules folder to your PATH. The node_modules and .bin folders are created in the directory where npm install @angular/cli was run upon completion of the install command.
Alternatively, you can install npx and run npx ng <command> within the local directory where npm install @angular/cli was run, which will use the locally installed angular-cli.

Install Specific Version (Example: 6.1.1)

npm install -g @angular/cli@6.1.1

Usage

ng help

Generating and serving an Angular project via a development server

ng new PROJECT-NAME

cd PROJECT-NAME

ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

You can configure the default HTTP host and port used by the development server with two command-line options :

ng serve --host 0.0.0.0 --port 4201

Generating Components, Directives, Pipes and Services

You can use the ng generate (or just ng g) command to generate Angular components:

ng generate component my-new-component

ng g component my-new-component # using the alias 

# components support relative path generation 

# if in the directory src/app/feature/ and you run 

ng g component new-cmp

# your component will be generated in src/app/feature/new-cmp 

# but if you were to run 

ng g component ./newer-cmp

# your component will be generated in src/app/newer-cmp 

# if in the directory src/app you can also run 

ng g component feature/new-cmp

# and your component will be generated in src/app/feature/new-cmp 

You can find all possible blueprints in the table below:

Scaffold	Usage
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Guard	ng g guard my-new-guard
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

1.      ng g module new-module to create a new moduleangular-cli will add reference to components, directives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow these steps:

2.       call ng g component new-module/new-component

This should add the new component, directive or pipe reference to the new-moduleyou've created.

Updating Angular CLI

If you're using Angular CLI 1.0.0-beta.28 or less, you need to uninstall angular-clipackage. It should be done due to changing of package's name and scope from angular-clito @angular/cli:

npm uninstall -g angular-cli

npm uninstall --save-dev angular-cli

To update Angular CLI to a new version, you must update both the global package and your project's local package.

Global package:

npm uninstall -g @angular/cli

npm cache verify

# if npm version is < 5 then use `npm cache clean` 

npm install -g @angular/cli@latest

Local project package:

rm -rf node_modules dist 

# use rmdir /S/Q node_modules dist in Windows Command Prompt; 

use rm -r -fo node_modules,dist in Windows PowerShell 

npm install --save-dev @angular/cli@latest

npm install

Some Useful Flag for Angular CLI.

1.     To open project automatically in a browser Tab

ng serve --o
OR
ng serve --open

2. Create project with routing file by default

ng new ProjectName --routing

3. Run project on different Port (Apart from default Port 4200)

ng serve --port 4201

4. Changing Base href while build

ng build --base-href=yourValue
OR
ng build --base-href /myUrl/

5. For performance of your application

* ng build --prod
* ng build --aot

6. Adding custom prefix for new project

ng new your-project --prefix custom

7. For Inline Template/Style of your component

ng g c button --inline-style --inline-template

You can anyone as per your requirements.

8. Avoid Hashing of file names while bundle your application

ng build -prod --output-hashing none
OR
ng build -prod --output-hashing=none