Installing The Development Environment

First, we need NodeJS 6.10+. We recommend to use nvm to install NodeJS instead of using your OS-based version.

Install nvm on your system using the instructions and provided script at:

https://github.com/creationix/nvm#install-script

Using nvm we will look up the latest lts version of NodeJS and install it

nvm ls-remote --lts
nvm install v6.10
nvm use v6.10

NodeJS is provided with npm, its package manager, we will use it to install the Angular CLI (ng)

npm install -g @angular/cli@latest

Note

-g means the CLI will be available globally in our nvm instance.

Initializing A New Project

The CLI allows to initialize a project:

ng new training --style=scss

Note

--style=scss indicates we will use SCSS for stylesheets.

If we inspect our newly created ./training, we see a default Angular project structure:

  • the sources are managed in the ./src folder,
  • the dependencies are declared in package.json,
  • and they are installed in the ./node_modules folder.

We can serve our project locally using the CLI.

cd ./training
ng serve

The result can be seen on http://localhost:4200.

This development server offers the different features we can expect for a convenient frontend developement environment like autoreload and sourcemaps.

The CLI also allows to run the tests:

ng test