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 environment.prod.ts 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 404 "Not Found"]
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.

Are you looking for Angular developers to build your application? Here is the comprehensive guide on how to hire Angular developers. Also, it guides you with the following topics.

• Angular developer skills.
• How an ideal Angular developer resume should look.
• Top Angular developer tools.
• Commonly asked Angular developer interview questions.
• Present Angular developer job opportunities.

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”