Direkt zum Inhalt

Faster Angular 2 Project Set up with Angular CLI

As my background was mainly in Angular 1.x, setting up new a Angular 2 project manually was complicated to me in the beginning. There were many new things involved
to get the app up and running. Fortunately, Angular 2 now comes with Angular CLI project - a command line tool for Angular 2 projects, which helps us develop the project easier and faster.

Prerequisites

According to the documentation, Angular CLI requires Node 4.x+. But there are some people, who have problems with Angular CLI on Node 4.x. If you run into the same problems, you may want to check your Node version. I am running Node 6.3.0, which works fine with Angular CLI.

We can check the Node-version by running

$ node --version

Installing Angular CLI

Angular CLI can be installed globally via npm.

$ npm install -g angular-cli

We now have the command ng available. We can see all available sub-commands and their options by running ng --help. In this article, we use the Angular CLI version 1.0.0-beta.21. 

Creating a new project

To generate a new Angular 2 app, we can use ng new <PROJECT_NAME> command. For example,

$ ng new buzzwoo-contacts

Creating new project with Angular CLI

Angular CLI will generate some necessary files as well as the app's scaffolds. Here’s an overview of what we have, so far:

  • src directory for source files of our application.
    • Angular CLI creates an index.html which contains the <app-root> component. That is the root component of our app.
    • We have main.ts as an entry point of the app. It is where the app is bootstrapped.
    • Also, we have an app directory that contains files for the <app-root> component.
  • e2e directory for E2E tests for Protractor.
  • At root project level, we also have configuration files for Angular CLI, Karma, and Protractor.

Starting the built-in web server

Type in the command 

$ ng serve

Then open http://localhost:4200. We can see the message "app works!" that verifies the app is working. It also comes with file watchers to transpile .ts files and automatically reload the page when source files are changed. Updating CSS/SCSS/HTML files will trigger automatic reload too.

Running unit and end-to-end tests

One thing I really like about Angular CLI is that it also prepares unit and end-to-end tests structures for us. Since setting up Karma and Protractor manually can be time consuming for some developers, Angular CLI makes it work out of the box. This really saves a lot of time. 

Unit tests

$ ng test

Runing ng-test command with Angular CLI

This will start up the Karma server to run unit tests. By default, it starts in watch mode, meaning it will re-run the tests when they are changed. With the generated app via ng new command, we have 2 unit tests executed for AppComponent. The default browser is Chrome.

End-to-end tests

End-to-end tests are executed by Protractor. Before running a test, make sure you have the app running by ng serve and leave it open as its own terminal window. Then we can run end-to-end tests by command:

$ ng e2e

Image

Protractor executes end-to-end tests in Chrome. With the generated app, we have one end-to-end test.

Angular CLI also generates a Page Object class, container helper methods to write end-to-end tests easier.

Summary

Angular CLI saves a lot of time to set up new Angular 2 project. We covered generating app scaffolds, as well as the unit and end-to-end test structure. Not only can we save up some time with the CLI tools, but we can also ensure that our application structure will match the Angular Style Guide.

Angular CLI can do much more. We will explore more on it in the next posts in the series.

It is also worth mentioning that it is a good idea to take a step back and see what Angular CLI generates for us. Try to understand concepts and rationales behind it. Hopefully we can learn something from the tool itself.

 

Über den Autor:
Armno Prommarak
Armno Prommarak
Teamleitung / Frontend

Frontend-Entwicklung wird immer komplexer und mit Armno haben wir einen sehr erfahrenen Leiter des Teams. Bei den aktuellsten Entwicklungen ist er immer auf dem neuesten Stand. 

Wie können wir Sie unterstützen?

Kontaktieren Sie uns

Copyright © 2018 BUZZWOO! GmbH & Co. KG