Angular CLI Features For Faster Development

before we start i’am assuming that you have a basic knowledge of angular and angular cli, this article not for beginner so be careful.

Angular Cli it’s powerful tool you can maximize your productivity if you use it right, staring from generating new app to build process all this steps is done without writing any line of code and that’s make us focus on business of our app, but there is more than that, let’s dive in

Aliases for fast typing

this list contains most used commands inside angular-cli projects, of course that list not completed feel free to type help flag to see how to write aliases for any command you are used a lot.

ng --help

Check before made changes

If You specified the dry-run flag, so no changes will be written, that flag can be useful when you try to create something but you are not sure about it.

ng g c Awesome -d

Set Settings

well, some of default settings not fit you or your team, or it’s not fit for specific project, no problem angular cli can help you to fix that with three options.

1. set your settings when you start a new project
2. set your setting using ng set command
3. set your setting globally by adding -g flag ( and that command make it default for any next project ).

How can i set global or local settings :

ng set defaults.<KEY> <value> [-g]

examples :

Target where to provide Your services:

angular cli by default doesn't provide your service in any module especially if your app contains multi-modules, so how we can provide our service during creation without add it manually, so simple see example blow

// this command will provide  a service in RootModule
ng g s [Service Name] --module=Root

Lint Your Code

angular-cli came with built in output styles you can use but for me, my favorite one was stylish

ng lint --format=stylish

you can also fix those errors by simply add fix flag

ng lint --fix

Proxy service

During development, you often end up in the situation where you have your backend API server running at one address (i.e. localhost:8080) while your frontend development server runs on another (i.e. localhost:4200).

• First create proxy.config.json file

• Then serve your app with proxy option by type this command

ng serve --proxy-config proxy.config.json

If you enjoyed this article, please click that little green heart below. That would be incredible.