Angular apps have different pieces that need to work together. It has components, services, pipes, etc. All these pieces need to be configured to work together. You can either manually configure them, or you can use tools to help you faster build Angular applications. One of these tools is Angular CLI.
Per definition: “The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.”.
Angular CLI, not only helps you create what you need, but it also configures them for you by default. So, when you manually create a component, you need to create a .html file, a .ts file, and a .css file. After you create these files, you need to also configure them to work with each other and with the application as a whole. With Angular CLI this is a matter of just a command. But, which are the most important Angular CLI command and what are they used for?
Before you start, you need to have Angular CLI installed, to install Angular CLI you need to have Node.js installed, then you can just ran this command, which is going to install the latest Angular CLI version:
npm install -g @angular/cli
To verify, that Angular CLI is installed successfully you can run this command:
ng version
If installed, you are going to get the following response
If you want to quickly create an angular project, and view it you can use the following commands:
ng new my-first-project cd my-first-project ng serve
After the app runs successfully this is what you are going to see
Angular CLI Commans
Other than what we have seen so far, Angular CLI has a lot of other commands.
- ng new <workspace-name> – it is used to create a new Angular workspace. So, a new project.
- ng add <collection> – is used to add support for an external library. Ex: ng add @angular/pwa
- ng build <project> – is used to build the project
- ng deploy <project> – is used to deploy the project
- ng run <project> – is used to run the project
- ng serve <project> – is used to serve the project, which means the app runs and listens for any changes. Any change is going to trigger the app to rebuild.
- ng test – is used to run the unit tests in the project
- ng doc <keyword> – is used to open the official Angular documentation (angular.io) in a browser and searches for the <keyword> you provide.
- ng cache – is used to configure persistent disk cache and retrieve cache statistics.
- ng completion – is used to set up Angular CLI autocompletion for your terminal
- ng lint <project> – is used to run the linting tools on Angular application code in a given project folder
The most important of all commands is the ng generate. This command will generate and modify files based on a schematic parameter.
ng generate
- ng generate app-shell
- ng generate application = ng g app
- ng generate class = ng g cl
- ng generate component = ng g c
- ng generate directive = ng g d
- ng generate enum = ng g e
- ng generate guard = ng g g
- ng generate interceptor
- ng generate interface = ng g i
- ng generate library = ng g lib
- ng generate module = ng g m
- ng generate pipe = ng g p
- ng generate resolver = ng g r
- ng generate service = ng g s
- ng generate service-worker
- ng generate web-worker