Skip to content

Set up your Angular 4 project with Angular CLI

Howdy howdy!

First of all, I must say that Angular 1.X was really that framework in which I didn’t get in too much. But since Angular 2 (now up to Angular 4.2) things captivated me pretty fast. So, I decided to get in to it and see what’s doing this powerfull framework and how can make my work easier. Let’s see how the things are boosted.

 

1. What’s with this strange versions 1, 2,… 4 ???

Well, angular is a total different framework than Angular 1.X even if the principles are the same (actually, those are the same in the entire JS World 😀 ). Angular 1 came up with one type of architecture and Angular 2 came up with another approach. After Angular 2, they released another version, and no… it’s not angular 2.1, but Angular 4 or as they call it simple Angular (now it’s up to Angular 4). They choosed 4 to avoid some version conflicts. Differences between Angular 2 and 4, are pretty small. Most of the changes are behind the scenes.

To make a short resume of the improvements I find them so usefully:

  • lighter builded app
  • animation package (as I said, all animations now are moved into one package called @angular/animations;
  • *ngIf now takes also one else statement
  • TypeScript 2.2 and others

 

2. What’s the best editor for Angular 4

I’m pretty confident that there are bunch of editors that can handle this one, but I find very usefully with Angular Webstorm or the Visual Code Studio with some puligns.

 

3. How to start a new Angular 4 application

Well, using Angular CLI, we can just hit the following command in our new folder.

ng new projectName

 

4. Adding componenets, services and any other files using Angular CLI

You can add any type of new element:

  • class
  • compoenent
  • directive
  • enum
  • guard
  • interface
  • module
  • pipe
  • service
ng generate [type] [file_name]

All type of elements and more details about how to generate them are available at the Angular CLI Documentation.

4. Running our app

Now, once you’re project is having all it’s components added, you can hit the following command in terminal

ng serve

or on a different port if the current one looks to be busy

ng serve --port 8080

5. Compile our app

After what we’ve added all the code of our app, we just hit in the CLI

ng build --prod --aot

This command will compile all our code, select all needed elements, minify it and added them in the dist folder from our project.

 

More informations about Angular and Angular CLI can be founded in the official website: https://angular.io/.

Be First to Comment

Leave a Reply

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