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:
2. Generating Components, Directives, Pipes and Services:
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/routerNPM package when creating or initializing a project. - When you generate a module, you can use the
--routingoption likeng g module my-module --routingto create a separate filemy-module-routing.module.tsto store the module routes.The file includes an empty
Routesobject that you can fill with routes to different components and/or modules.The
--routingoption also generates a default component with the same name as the module. - You can use the
--routingoption withng newto create aapp-routing.module.tsfile 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:
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:
For zsh:
Windows users using gitbash:
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.