Angular CLI

Angular CLI

Recently I wrote about how good angular works with .net core. And since I already went through that exercise I decided to share some of my experience with the angular CLI and how to get angular up and running.

First thing first we need typescript.
If you don’t have typescript installed you can do it by

npm install -g typescript@latest

However if you do have it, I strongly recommend to update it to the latest version by

npm update -g typescript

Next step is to install the actual angular cli

npm install -g @angular/cli

And after that to verify that the CLI is installed by typing

ng -v

Now that we have the CLI available it is very easy to get our new angular application up and running. The CLI itself has a lot of options and can be used for a lot of things. The complete reference for it, with all options can be found on https://github.com/angular/angular-cli/wiki/new Or another way to find out more about the CLI is

ng --help

It is quite simple to create new angular app at this point, but there are still a few options to keep in mind. For example any of the commands below will create a new app. But what is important noting is that –skip-install make it so it doesn’t actually install all the dependencies, which usually takes a while and that –dry-run makes it so it doesn’t create anything what so ever, but only prints what it would normally create like file structure if you leave out “–dry run” , this is actually quite useful because you don’t want to install of the dependencies and configure everything and then to realize that you missed something and to have to do it all over again and wait again and again. A really cool parameter is ” –routing ” which makes it much easier to add routes to your angular app.

ng new myapp
ng new myapp --dry-run
ng new myapp --skip-install
ng new myapp --routing --prefix wisp --skip-tests --skip-install --style scss

Once the application is created you can very easily create new components. For example:

ng generate component customer
ng generate component modals/modalLogin
ng g c customer

Also creating new service is just as easy:

ng generate customer-model
ng generate service customer-data
ng g s sales-data -m app.module

Generating a new module is again in a similar way using:

ng g module admin --routing

Now when it comes to starting your application, the traditional way npm start, but there are few other ways to do that as well, which provide options for whether or not to reload the content on change, or to open the app on specific port.

ng serve -o
ng serve --open
ng serve --live-reload
ng serve -lr
ng serve -lr false
ng serve -p 8626

When it comes to linting, the angular CLI has a cool command:

ng lint --fix

The best way of development new angular applications is using the Angular CLI, but if you have a good reason to continue developing the application specifically without the CLI, you can basically do that also using

ng eject

Finally when you are done developing your angular app and when it is time to prepare it for deployment, that is quite easy with the CLI. The only thing for me which was quite interesting was the AOT compilation with angular, but unfortunately I couldn’t get it working with my project because of custom attributes. Those are few ways how to make deployment build:

ng build --prod
ng build --env=prod
ng build --prod --env=prod --aot=false

Leave a Comment

Your email address will not be published. Required fields are marked *