Angular · Angular2 · Node · Visual Studio Code

Angular CLI Quick start

Even though angular-cli still is in beta I truly believe it is the best way for starting development with angular 2. If you have not read my post on angular starter you can get it here. In that post I am using systemJS and light server created for angular 2. The angular team has changed the build system from SystemJS to webpack now in the angular-cli and I will show you how to get started and how everything works.

By reading this post and watching my youtube how to you will know how to:

– Create an angular 2 project with angular-cli
– Run your project with or without LiveReload
– Build your project for development or production with or without Ahead of time compiling
– End to end and unit testing
– Create components, services, classes…..

Prerequisites: Nodejs and Visual Studio Code

1. Install angular-cli on your developer machine
Install the angular-cli globally by using node package manager. Open cmd prompt and type:

npm install -g angular-cli

Since the angular-cli project is very much alive with rapid changes you should follow up on updates provided on cli.angular.io.
Update angular-cli:

Npm uninstall -g angular-cli
Npm cache clean
Npm install -g angular-cli@latest

2. Create and run your first project:
Open cmd promt and navigate to the folder where you want your project to be created and type:

ng new YOUR-PROJECT-NAME

angularcli1

This will create a new angular 2 project for you in a folder with the same name as you have provided as your project name. This can take a bit of time, but when it is done you can navigate to the root of your created project and type:

Ng serve

angularcli2

This will build and start the project for you and you can now navigate to “localhost:4200” in your browser. Congratulations! You have your first angular 2 project running with angular-cli.

3. Run you project with LiveReload.
In some cases, you may want your browser to reload when you change your code. You can do this by starting your project via:

Ng serve --host 127.0.0.0 --port 4201 --live-reload-port 49153

4. Build your project for development or production with or without Ahead of time compiling

One of the major things with angular-cli is setting up your environment to support development and production. So, you may want to build you application to deploy and now angular-cli also support Ahead of time compiling.
To build you project navigate to the root of your project in cmd prompt and type:

Ng build

Angular-cli will build your project for you with the current setup you have in your environment settings. By default, they will be added for you a create project in the “src/environments” folder.
Now, if you want to build for production you can type:

Ng build --prod

You will get the report in you cmd window and angular-cli will add the files to deploy under “dist/” folder.

angularcli3

If you want to use Ahead of time compiling simple type:

Ng build --prod --aot

5. Unit or end to end testing

If you build a “real” application, you probably want to have unit testing. Angular-cli provide this using Karma and Jasmine. I am not going to dig into debugging or Continues Integration here, just show how a simple unit test in angular-cli works.
Open cmd prompt in the root folder of you project and type:

Ng test

(If you don’t want karma to automatically watch your files for changes you can run the test by typing: ng test –watch=false )

angularcli4

The default project provided for you by the angular-cli on create new project will include unit tests. The test environment setup will look for files under your “app/” folder that ends with “.specs.ts” and run those on “ng test”.

End to end testing is also provided for you by angular-cli. This runs via Protractor with webdriver-manager as a helper tool to get an instance of Selenium Server running.
To run the test simple open a cmd promt and navigate to the root of your project and type:

Ng e2e

(You will have to start your project first via ng-serve before you can run this test)

angularcli5

From the default project structure, you can see that you have a folder “e2e”. The configuration of Protractor is set up to look for all files in this folder ending with “.e2e-specs.ts”.

6. Create new components, services, classes…
You probably want to create new components, directives, pipes, classes and what not in your application. You can defiantly do that by adding the files manually, and adding injections for those in the @module. Angular-cli provide a nice optimized way of doing that with simply opening a cmd prompt and navigate to the root folder of your project and type:

Ng g component YOUR-COMPONENT-NAME

First of all, you will now have the following files created for you with code to get started:
– App/your-component-name/your-component-name.css
– App/your-component-name/your-component-name.html
– App/your-component-name/your-component-name.ts
– App/your-component-name/your-component-name.spec.ts

angularcli6

Secondly, angular-cli will also add injections to your app.module.ts for referencing the newly created component.

angularcli7

To create other things like interfaces, classes and so on:

Ng g service SERVICE-NAME
Ng g class CLASS-NAME
Ng g pipe PIPE-NAME

Thanks for reading.

2 thoughts on “Angular CLI Quick start

Comments are closed.