Angular CLI – Part I: Installing and creating a new project

Install Angular CLI globally using npm

npm install -g @angular/cli

Explanation: This command will install the angular cli package globally. After succesful install, command ‘ng’ should be available to use.

Test if ng cli is installed:

ng help

It is fairly straight forward on Mac. Windows users might face due to security issues. This is the case where Angular CLI is installed but the path is not installed properly. You’ll have to set the alias to ng manually to resolve this issue:

alias ng="/Users/reinos/.npm/lib/node_modules/angular-cli/bin/ng"

More information: https://github.com/angular/angular-cli/issues/503

Create new project:

ng new ang-cli-proj

Explanation: This creates the project structure for Angular and install node dependencies to start the project. If you open up the project folder you’ll notice following:

  • e2e folder: This folder contains test files which will be used to do end to end testing
  • node_modules: This folder contains node modules listed in package.json. This folder should not edited manually.
  • src folder: This folder contains the main source code for our project. It is recommended to keep all our code and assets inside this folder.
  • karma.conf.js: This file contains configurations for Karma.
  • package.json: This file contains configurations for npm(node package manager).
  • protractor.conf.js: This file contains configurations for Protractor.
  • README.md: This file contains basic instructions to build, run and scaffolding the application.
  • tsconfig.json: This file contains configurations for typescript.
  • tslint.json: This file contains linting rules for typescript.

Apart from these there are three hidden files:

  • .editorconfig: Settings for the editor. I am using Visual Studio Code.
  • .gitignore: This file contains a list of folders which should not be added to version control. Feel free to modify this file if needed.
  • .angular-cli.json: This is the most important file for Angular CLI projects. This file contains the configurations required to build and run the application.

Serving the new project:

Navigate to the new project folder:

cd ang-cli-proj

Run the project:

ng serve

Access the project at http://localhost:4200/

Configure host and port:

ng serve --host 0.0.0.0 --port 4201

Resources:

Click here if you are looking for Part II of this tutorial which describes how to generate various scaffold’s for Angular.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s