Advance Angular CLI, Become Pro in Angular

Angular CLI

Angular is a powerful framework to build great project, when we say a name angular first comes in mind is Google, but angular is also have a powerful thing called Angular command-line interface (CLI), which name developer work easier and faster to build Angular applications.

Angular CLI commands

The Angular CLI helps with:

Bootstrapping a project It creates the initial project structure with a root NgModule and a root component and bootstraps it using the platformBootstrapDynamic method.

The project is also configured to use the webpack loader which handles things like module loading, bundling and minification of dependent code.

Basic Command Need to Know

npm install--g @angular/cli

This command is basically used for installing the Angular CLI globally in your system. After installed you can create new project.

ng help

Providing available online help command related to angular by executing this command. This help can be varieties option, list of details will come in the prompt that what all available option is present in angular CLI.

ng help

ng generate --help

This command gives an entire list of executable commands in angular with mentioning some common short description. The user can easily able to understand which command needs to be used for what purpose by executing this command. It is also basically providing online help in angular with some additional short description for proper user visibility. Have a try.

ng new angular-first-project

This command is using for creating one new basic project in angular with all required dependencies and folder structure, the developer should need to go to the corresponding workspace and executing this command for creating one new project.

ng serve

This command is basically helping for building the app and ensure its availability locally. By executing this command server is responsible to automatically rebuild entire code changes and reloads the same immediately in the pages if the developer changes anything in the source file.

Several sub command is also available with ng serve. Like

ng serve -o 

This command open browser when code get compiled.

ng serve --host 0.0.0.0 --disable-host-check

Allow you to connect to the ng serve using your IP instead of localhost and this will disable host check and allow to access from outside(instead of localhost) with IP address.

ng serve --port 4200

Mention the port that the application will listen.

ng config

This command is basically helping for retrieving all the configurations details and option for setting or editing the corresponding set up configuration from the command prompt.

There have some common mechanism need to be followed by the angular developer, like configuration file name should maintain in camel case whereas option name of executing command can be in camel case or normal.

ng --build my-first-app -c production

This command is basically using for building the new application which developed and as well as copy the same build application to the production environment. This command is helpful for converting your code to JS with very minimal and uglified JS file. Command must need to execute inside the workspace directory. After executing this command, it generated one output directory with name dist/ on the provided output path.

Few advance options is given with build command.

 --allowed-common-js-dependencies 

A list of CommonJS packages that are allowed to be used without a build time warning, but before providing the option make sure give it in array.

allowedCommonJsDependencies”: [“lodash”]

-- base-href

Base URL for the application being built.

-- build-optimizer

Enables ‘@angular-devkit/build-optimizer’ optimizations when using the ‘aot’ option.

-- delete-output-path

Delete the output path before building.

-- named-chunks

Use file name for lazy loaded chunks.

Intermediate Commands

There are several other popular commands, which are also used by the Angular developer which are used less but more effective.

ng e2e

ng e2e (Jasmine + Protractor). This is very much useful for the common developer especially in the case of an end to end testing on the angular developed app. Executing this command ensure of building the app and serve the same locally with the update changes.

Protractor tests are using real data, and doing the HTTP (or whatever you are using) calls to fetch the data and consume/test it.

ng lint

This is for linking the angular app with one popular tool linting. It helps for running this linting tool on the developed code in angular on the provided folder of the project. It's basically ensuring code quality.

ng run

This command is basically helping for running one of the architect targets by taken help with the custom optional building configuration. This kind of configuration normally defined earlier associated with the project.

Advance Commands

ng new app-name — prefix yourcustomname

This prefix command will add prefix in all the selector in application.

ng serve --hmr

Angular 11 CLI added this new HMR which Inject changes without application restart. This is a big change in angular CLI, will make development more advance and simple

ng lint --fix

This command run and it will check any lint issue in project.

Fix is the category which means try to fix any errors exists.

These are the mostly used CLI command which developer required in their daily thing development. Please give a clap if you like the articles.

Keep coding, thanks for reading this blog.