Ng Command Usage

By /

Ng command can be used for different purposes in angular cli project.

They are as follows:-

1. For Generating and serving an Angular project via a development server:
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
You can configure the default HTTP port and the one used by the LiveReload server with two command-line options :
ng serve –host 0.0.0.0 –port 4201 –live-reload-port 49153

 

2. Generating Components, Directives, Pipes and Services:
ng generate component my-new-component
ng g component my-new-component # using the alias
ng g directive my-new-directive
ng g pipe my-new-pipe

ng g service my-new-service

ng g class my-new-class

ng g interface my-new-interface

ng g enum my-new-enum

ng g module my-module

3. For Generating a route

The CLI supports routing in several ways:

  • We include the @angular/router NPM package when creating or initializing a project.
  • When you generate a module, you can use the --routing option like ng g module my-module --routing to create a separate file my-module-routing.module.ts to store the module routes.

    The file includes an empty Routes object that you can fill with routes to different components and/or modules.

    The --routing option also generates a default component with the same name as the module.

  • You can use the --routing option with ng new to create a app-routing.module.ts file when you create or initialize a project.
    4. Creating a build

    ng build

Build Targets and Environment Files

ng build can specify both a build target (--target=production or -- target=development) and an environment file to be used with that build (-- environment=dev or --environment=prod). By default, the development build target and environment are used.

5. Running unit tests

ng test

This Tests will execute after a build is executed via Karma and it will automatically watch your files for changes. You can run tests a single time via --watch=false or --single-run.

6. Running end-to-end tests

ng e2e

Before running the tests make sure you are serving the app via ng serve.

End-to-end tests are run via Protractor.

7. Deploying the app via GitHub Pages

You can deploy your apps quickly via:

ng github-pages:deploy –message “Optional commit message”
8. Linting code

You can lint your app code by running ng lint. This will use the lint npm script that in generated projects uses tslint.

You can modify these scripts in package.json to run whatever tool you prefer.

9. Commands autocompletion

To turn on auto completion use the following commands:

For bash:

ng completion 1>> ~/.bashrc 2>>&1
source ~/.bashrc

 

For zsh:

ng completion 1>> ~/.zshrc 2>>&1
source ~/.zshrc

Windows users using gitbash:

ng completion 1>> ~/.bash_profile 2>>&1
source ~/.bash_profile
10. CSS Preprocessor integration
  • When generating a new project you can also define which extension you want for style files:

ng new sassy-project –style=sass

  • Or set the default style on an existing project:

ng set defaults.styleExt scss

 

11. To check changes in the project:

ng update

Running ng update will check for changes in all the auto-generated files created by ng new and allow you to update yours.

 

Scroll to Top