Angular 2 - CLI

angular2

What is Angular CLI?

Angular CLI is a command-line interface for scaffolding your Angular project. It is a prototype of a CLI for Angular 2 applications based on the ember-cli project. It offers the ng command.

How can we install Angular CLI?

npm install -g angular-cli

This command installs the ng command globally on your system.

How can we verify that Angular CLI is installed?

ng version

How can we create a new application using the ng command?

ng new applicationName

This will create a new directory with the following:

├── angular-cli-build.js
├── angular-cli.json
├── config
│   ├── environment.dev.ts
│   ├── environment.js
│   ├── environment.prod.ts
│   ├── karma.conf.js
│   ├── karma-test-shim.js
│   └── protractor.conf.js
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   ├── tsconfig.json
│   └── typings.d.ts
├── package.json
├── public
├── README.md
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── environment.ts
│   │   ├── index.ts
│   │   └── shared
│   │       └── index.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── system-config.ts
│   ├── tsconfig.json
│   └── typings.d.ts
├── tslint.json
├── typings
│   └── ...
└── typings.json

You can now:

cd applicationName
ng serve  // Starts the development server

The above command starts a local development server that you can navigate to in your browser on http://localhost:4200/. The application will automatically reload when a source file has changed.

How can we start the development server?

cd applicationName
ng serve  // Starts the development server

What is the default port used by Angular development server?

4200. After you started the development server, you can visit http://localhost:4200/

How can we use the ng command to generate a new application?

Use the 'ng new' command:

ng new applicationName
cd applicationName
ng serve

And visit http://localhost:4200/

How can we use the 'ng generate' command to generate a new component?

ng generate component my-new-component

How can we use the 'ng generate' command to generate a a new directive?

ng generate directive my-new-directive

How can we use the 'ng generate' command to generate a new pipe?

ng generate pipe my-new-pipe

How can we use the 'ng generate' command to generate a new service?

ng generate service my-new-service

How can we use the 'ng generate' command to generate a new class?

ng generate class my-new-class

How can we use the 'ng generate' command to generate a new interface?

ng generate interface my-new-interface

How can we use the 'ng generate' command to generate a new enum?

ng generate enum my-new-enum

What is the shortcut for the 'ng generate' command?

ng g

How can we build our project?

ng build

The build artifacts will be stored in the dist/ directory.

How can we do a build for a specific target or environment?

# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# and so are these
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

ng build can specify both a build target (—target=production or —target=development) and an environment file to be used with that build (--environment=dev or --environment=prod). By default, the development build target and environment are used.

The mapping used to determine which environment file is used can be found in angular-cli.json:

"environments": {
  "source": "environments/environment.ts",
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

These options also apply to the serve command. If you do not pass a value for environment, it will default to dev for development and prod for production.

How can we add our own environment beside dev and prod?

You can also add your own env files other than dev and prod by doing the following:

  1. create a src/environments/environment.NAME.ts
  2. add { "NAME": 'src/environments/environment.NAME.ts' } to the the apps[0].environments object in angular-cli.json
  3. use them via the --env=NAME flag on the build/serve commands.

What is the purpose of the --base-href option of the 'ng build' command?

When building you can modify base tag (<base href="/">) in your index.html with --base-href your-url option.

# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/
ng build --bh /myUrl/

How can we run unit tests using the ng command?

ng test

Tests will execute after a build is executed via Karma, and it will automatically watch your files for changes. You can run tests a single time via --watch=false.

How can we run end-to-end test?

ng e2e

Before running the tests make sure you are serving the app via ng serve. End-to-end tests are run via Protractor.

How can we use Angular to proxy to another server?

Using the proxying support in webpack's dev server we can highjack certain urls and send them to a backend server. We do this by passing a file to --proxy-config. Say we have a server running on http://localhost:3000/api and we want all calls th http://localhost:4200/api to go to that server. We create a file next to projects package.json called proxy.conf.json with the content:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

We can read more about what options are available here webpack-dev-server proxy settings. And then we edit the package.json file's start script to be:

"start": "ng serve --proxy-config proxy.conf.json",

now run it with npm start.

How can we deploy our application via GitHub Pages?

You can deploy your apps quickly via:

ng github-pages:deploy --message "Optional commit message"

This will do the following:

  1. creates GitHub repo for the current project if one doesn't exist
  2. rebuilds the app in production mode at the current HEAD
  3. creates a local gh-pages branch if one doesn't exist
  4. moves your app to the gh-pages branch and creates a commit
  5. edit the base tag in index.html to support github pages
  6. pushes the gh-pages branch to github
  7. returns back to the original HEAD

Creating the repo requires a token from github, and the remaining functionality relies on ssh authentication for all git operations that communicate with github.com. To simplify the authentication, be sure to setup your ssh keys. If you are deploying a user or organization page, you can instead use the following command:

ng github-pages:deploy --user-page --message "Optional commit message"

This command pushes the app to the master branch on the github repo instead of pushing to gh-pages, since user and organization pages require this.

How can we lint and format our code?

ng lint

This will use the lint npm script that in generated projects uses tslint. You can modify the these scripts in package.json to run whatever tool you prefer.

Which CSS Preprocessors are supported by Angular?

Angular-CLI supports all major CSS preprocessors:

  1. sass/scss (http://sass-lang.com/)
  2. less (http://lesscss.org/)
  3. stylus (http://stylus-lang.com/)

To use these prepocessors simply add the file to your component's styleUrls:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

When generating a new project you can also define which extension you want for style files:

ng new sassy-project --style=sass

Or set the default style on an existing project:

ng set defaults.styleExt scss
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License