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)
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,
- 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,
npm install --save <package-name>
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,
ng update <package-name>
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,
ng lint <project-name> --fix
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.
“Contact us today to get free 20 hrs of consulting & proof of concept from experts”
Latest posts by Nagarani Gorantla (see all)
- Improving Performance with Web Workers : Learn How - September 24, 2019
- 10 Common Mistakes That Angular Developers Will Commit - June 21, 2019
- Top 10 Angular CLI Commands To Boost Your Productivity - December 24, 2018