Top 10 Angular CLI Commands To Boost Your Productivity


Setting up a new project in Angular and creating all the necessary files would be a huge task and literally it might kill loads of our time. But the fun part is tools like Angular CLI is helping us to overcome all those unnecessary loads of works and honestly, it does all for us and also sets risk free development!


A quick Shot On Angular CLI

Angular CLI is a command-line interface (CLI) which is introduced to ease the development by automating things up and it is completely written and maintained by the Angular team.  with this, you will be able to create new Angular projects and also perform required operations such as adding components, services, directives without hassles.

With help of angular CLI we can follow up great practices in development to reduce the time consumption, so on today will find the top 10 angular CLI commands that actually remains salvage for the Angular developers.


Install the Angular CLI

Run the below command to run Angular application in your local system,


npm install -g @angular/cli

Once you run the above command, it will globally install angular cli using npm package manager. Also, this will help us to create projects, generate application and various ongoing development tasks such as testing, bundling, and deployment.


Create New Project

To create a new ng new file-name like


ng new my-first-project


Note: my-first-project is the file name I kept here and you can name it as you wish


If you run that command it will create angular project dependencies like source file as src, testing files as e2e folders and dependencies package and angular configuration files  inside that file like below

Best To Read: Top 10 Angular Blogs You Must Read


Serve the Angular Application


Basically, Angular includes a server, so it will be easy for us to build and serve application location and before running an application, we must go to the root folder (my root folder is my-first-project)


cd my-first-project


And, then start the application using ng serve and if you want open it in your browser then you should use command –open


ng serve --open

Compiling Angular application In Production

Above mentioned command used to run the application in development mode and to run it in a production mode, you can use the below command,


ng build --prod --aot


So, It will compile the all ts files into js files and it will create a dist folder and will store it as a subfolder


Note: ‘aot’ means Ahead of Time Compilation which compiles your app at build time


The built-in pod mode will replace environment.ts with and you can see all the settings in angular.json file of your application.


Generate files in the angular application

Initially,  while you are creating an angular application it will have the basic files like app component whereas if you want to create your custom component then you can follow the below command.


ng generate component <your-component-name>


It will create the component along with required files like .ts, .html, .css and spec.ts


As mentioned above, you can able to generate,


  • service
  • class
  • directive
  • module
  • interface
  • guard
  • pipe
  • enum and more


Instead of the component, you have to replace above commands what you want to require


Run your Unit Test Cases


Use this to run the unit test cases of angular project


ng test


Test cases will run after a build via Karma. It will run after every change but if you want to run only one time then you can add like –watch = false


Run your automated test cases

You can test e2e files using,


ng e2e


It will run your e2e files which are configured in protractor.conf.js  with help of Protractor tool


Install New Packages


If you want to add new packages to your project then you can directly add to your package by using this,


npm install

In case, if you want to install a particular package or need to save package.json then follow,


npm install --save <package-name>

Update your Application

You can update all the packages from old version to new versions by using this command,


ng update


While doing this you may get errors but you can avoid this by updating individually,


ng update <package-name>

Linting your application:-

ng lint


It will run the (tslint) which is used to print lint errors and it won’t be automatically but in case If you want auto fix then you can use the below command,


ng lint <project-name> --fix


Contact form 7 Mailchimp extension by Renzo Johnson - Web Developer


Hopefully, these commands of Angular CLI can set development at ease and will save you a lot of time. Hope you will find it helpful and let us know your favorite commands in the comment section.


Building an angular application? Like to hear more from Angular experts? Don’t miss out to read more from the great minds in the industry!


Contact us today to get free 20 hrs of consulting & proof of concept from experts”