When we work with Aungular, we usually have to create some componenets, build, run project, … So, to reduce our time considering to do wasted thing, we must use Angular CLI.
So, in this article, we will find some common commands to manage our Angular project with Angular CLI.
Table of contents
- Setup node.js and npm
- Setup Angular CLI
- Create new Angular project
- Generate new parts
- Generting a route
- Build our project
- Run project
- Some useful commands
Setup node.js and npm
The first thing we have to do is to download node.js. You can visit the node.js website to fetch suitable version.
The installation may take a while.
To check the existence or the version of node.js, npm, we use command:
node -v npm -v
Setup Angular CLI
npm install -g @angular/cli
Create new Angular project
ng new our_name_project
This command will generate a new project. Inside of that folder, it will create all the files for a basic but already executable angular application.
It will also install all required external dependencies. It can actually take some time.
ng new command, there are many additional flags. So, the below table will have description about these flags.
||It will stop the CLI from making any changes to the file system. Instead, it will print everything it would have done to console.|
||skips the installation of external dependencies when we do not want to install or do not have a internet connection.|
||using CSS pre-processor such as SASS. Because the CLI creates normal CSS-files for every component by default.|
||creates project with force when having some issues.|
||list all the details of generating project.|
Generate new parts
There are some parts that we need to create:
To create a new component, we can use the following command:
ng generate component header
The below table will describe commands that need to make our parts:
Generting a route
Build our project
This command will do some steps:
build application, compress and encapsulate source code.
Using this command, the app is still in an development state. So, it means the certain optimizations where not perform and the app is still using the development environment variables.
To change this situation, use the
ng build --prod
It will cause the CLI to build our application and places the output in a directory called
Resource in CSS such as images, fonts will be embedded inline if size < 10KB.
ng serve -o
Some following character in this command:
- start our application in development mode at local.
- It will watch the directory of our application for changes. So if it detects a change, it will recompile the application (partly) and automatically update the application in the browser.
- default port: 4200
It will have some options:
Some useful commands
ng test: the source code will be tested within development.
ng e2e: start application and run test script.
ng lint: the source code have to be clean code to follow the standard of project (using tslint).
ng update: update application to the newest version.
ng doc [search term]: open API document of Angular.
ng config: get/set some values of configuration.
Thanks for your reading.