googleads
Top 10 Angular CLI Commands To Boost Your Productivity | Angular CLI
preloder
Angular Tips & Tricks Web Development

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,

 

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

 

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)

 

And, then start the application using ng serve and if you want open it in your browser then you should use command –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,

 

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.

 

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

 

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,

 

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,

 

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

 


Update your Application

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

 

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

 


Linting your application:-

 

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,

 

Like What You're Reading ?

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” 

 

The following two tabs change content below.

Nagarani Gorantla

Software Engineer having 2 years of experience in Web Development, hands on expertise in Ruby, Ruby On Rails, Angular and CMS. An Active ally of Social services and Blood camps.

Leave a Reply

Your email address will not be published. Required fields are marked *

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call