Angular CLI: Commands to boost your productivity

In this tutorial we are going to learn about Angular CLI commands that we can use to boost our productivity while creating an angular application.

1. Intro and Commands

Check version of node js installed : node –version Check version of npm installed : npm –version Install angular: npm install -g @angular/cli

2. Creating a project

Create a project: ng new my-project Move into the project folder: cd my-project Launch the default code editor: code .

3. Running the scripts from package.json file

Use the command “npm run” to run any script Start server: npm run start to run ng serve from package.json file in our case Build project for production: npm run build to run ng build

4. Building project for dev and production

npm run build –env=prod npm run build –env=dev

5. Creating a project with Advanced options

Previously set up routing: ng new my-project-one –routing (This will create a new routing module inside app folder) Use scss instead of css: ng new my-project-two –style=scss (This will create scss files instead of css files) Have multiple options: ng new my-project-two –style=scss –routing ng new my-project-two –style=scss –routing –prefix=bg

6. Working with assets folder

npm run build always moves all the assets files also. Lets copy one image into src/assets and npm run build – it will copy the file in to build folder How to control which files to move or not from assets: Move only img2 folder files from src assets to destination assets “assets”: [ “src/favicon.ico”, { “glob”: “**/*”, “input”: “src/assets/img2”, “output”: “assets/img2” } ], Always a better idea to have all files from assets and controllable files or folders from a new folder eg: misc-assets

7. Installing Bootstrap

npm install bootstrap angular.json file “styles”: [ “src/styles.css”, “node_modules/bootstrap/dist/css/bootstrap.min.css” ]

8. npm start or ng serve with Advanced options

ng serve: Builds the files in memory and launches on a port. Also refreshes automatically when there is any code change Change package.json file ng serve –open: After launching the app, open it in browser: ng serve –port=9099 –open: Compile, build the files and Launch app on port 9099 and open in browser

9. ng generate component

ng generate –help (To see all the options we have) ng g c recipe-item –dry-run (To see what will happen if you run the command) ng g c recipe-item –flat –dry-run (–flat option the components are directly created under app folder without it’s own folder) ng g c recipe-item (To actually render the component folder) Note that this component is used in app module

10. ng generate module

ng g m main-items (Generate a module) ng g c main-items/recipe-main-item –module=main-items

11. ng generate directive

ng g d main-items/directives/custominput –module=main-items (ng gen dir path modulename)

12. ng g service

ng g s my-services/recipe-api

13. ng g pipe

ng g p pipes/addcommas (The pipe is added by default to app.module) ng g p pipes/removecommas –module=main-items

14. ng generate class

ng g class class/recipe

15. ng generate interface and enums

Interfaces helps us define data types for our data with the help of data (No need of creating classes, if there is no logic) ng g interface interfaces/recipe ng g enum enums/recipe-type

16. ng generate guard

(Route Guard helps us protect certain routes) ng generate guard payment Import the guard in app module providers And modify the guard code.

17. ng test

karma is used to test our application by default. And to run the tests it uses the default browser i.e. chrome. (karma.conf.js) Run the command ng test. It will fail e.g. if in app.component.html, the h1 title tag has a different text then what’s mentioned in app.component.spec.ts

ng test –code-coverage To get a detailed report of code coverage in coverage folder. It will tell which codes were run during test and which were not. Note that the codes to execute or not are decided by test cases in spec.ts file.

ChromeHeadless By default full fledged chrome is launched in order to perform the test. But in order to save some load we can use the ChromeHeadless option in browser for karma.conf.js and run the test silently in chrome without launching it.

End to End Test: ng e2e Run the above command and launch the app on chrome. It will auto run the app and finish the testing for us.

18. Building Angular Application

Angular cli uses the command: ng build with webpack and does the following things for us: Compile typescript files, build all packages, minify files, compiling scss to css, inlining css, adding scoped css, moving assets etc.

ng build output: dist folder By default it runs in development mode (Thus non optimized files in dist folder) ng build –prod (It will now have optimized files in dist folder)