lecture_video	6YDi6nSA_YQ
disable_run_code	true

Angular CLI

Table of Contents

Features
Installing the Angular CLI
Start an Application with ng new
Serve an Application with ng serve
Generate Code with ng generate
- Available Scaffolds
Create a Build with ng build
- Production Builds
- Adding a Third-Party Module
Testing Angular
Summary

Angular now comes with a command-line interface (CLI) to make it easier and faster to build Angular applications.

Features

The Angular CLI helps with:

Bootstrapping a project

It creates the initial project structure with a root NgModule and a root component and bootstraps it using the platformBootstrapDynamic method.

The project is also configured to use the webpack loader which handles things like module loading, bundling and minification of dependent code.

Note	In the course we’ve used SystemJS for this since webpack doesn’t work with Plunker yet. We’ll continue to use SystemJS for the code samples in Plunker and WebPack for any applications created with the Angular CLI.

Serving and live reloading

The CLI starts a local web-server so we can view our application in the browser via localhost:4000.

The CLI also watches for any changes to our files and automatically reloads the webpage if there are any.

Code generation

Using the CLI we can create components, directives, services, pipes, etc… all from the command line with all the necessary files, folders and boilerplate code included.

All the generated code adheres to the official Angular style guide.

Note	In Angular 1 the Angular team never supported an official style guide. This meant that most projects ended up looked pretty different to each other. A developer moving teams would have to figure out from scratch how this team likes to write Angular 1 code.

Testing

The generated code also comes with bootstrapped Jasmine test spec files, we can use the CLI to compile and run all the tests with a single command.

Whenever the CLI detects changes to any file it re-runs all the tests automatically in the background.

Packaging and releasing

The CLI doesn’t just stop with development, using it we can also package our application ready for release to a server.

Installing the Angular CLI

To install the CLI we use Node and npm.

npm install -g @angular/cli

If the above ran successfully it will have made available to you a new application called ng, to test this installed correctly run this command:

ng -v

It should output the version of the application that was installed, like so:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.1
node: 8.1.3
os: darwin x64

Start an Application with `ng new`

Let’s create a new project called codecraft.

To bootstrap our new project with ng we run this command:

ng new codecraft

Tip	This command might take sometime to run, be patient.

This outputs something like the below:

The command generates a number of new files and folders for us:

codecraft

// Production or development builds of our application go here.
├── dist

// Main application code goes here.
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts

// Settings for the different environments, dev, qa, prod.
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts

// Main HTML and TypeScript files
│   ├── index.html
│   ├── main.ts

│   ├── favicon.ico
│   ├── polyfills.ts
│   ├── styles.css

// Prepares test environment and runs all unit tests.
│   ├── test.ts

// TypeScript configuration file
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json

// TypeScript type definition file
│   └── typings.d.ts

// The E2E tests for our application go here.
├── e2e

├── angular-cli.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── README.md
└── tslint.json

Note	The directory structure follows the recommended app structure and style guide.

As well as creating the files and folders for us; we can see from package.json that it installed the correct versions of all the required npm dependencies for us also.

link:/content/{filedir}/code/package.json[role=include]

So far in this course we have bundled all our code into one file on Plunker for convenience.

Let’s see how the Angular CLI breaks up the code into multiple files and where those files are located.

src/app/app.component.ts: The new project is bootstrapped with one component, our root component which it called AppComponent and has a selector of app-root.

src/app/app.component.ts

link:/content/{filedir}/code/src/app/app.component.ts[role=include]

src/index.html: app-root component has been added to our index.html file already.

There are no script tags present yet, that’s fine the angular build process adds all the required script and link tags for us.

src/index.html

link:/content/{filedir}/code/src/index.html[role=include]

src/app/app.module.ts: Our top-level module configuration is stored in this file.

link:/content/{filedir}/code/src/app/app.module.ts[role=include]

src/main.ts: The actual act of importing our main module and bootstrapping our Angular web application is left to the main.ts file.

link:/content/{filedir}/code/src/main.ts[role=include]

Serve an Application with `ng serve`

With the CLI we can also easily serve our application using a local web-server.

We just run:

ng serve

This builds our application, bundles all our code using webpack and makes it all available through localhost:4200.

ng serve also watches for any changes to files in our project and auto-reloads the browser for us.

The command runs the application through a web-server that support HTML5 push-state routing.

Note	The above will make sense once we cover Routing later on in this book.

Generate Code with `ng generate`

The ability to generate stub code is one of the most useful features of the CLI.

The most exciting part of this is that it automatically generates code that adheres to the official style guide.

Important

Projects built using the Angular CLI should look like each other. Developers who are used to the way Angular CLI generates files are going to find it easier to work on multiple different projects, as long as they all use the Angular CLI.

With the generate command we can create new components, directives, pipes, services, classes, interfaces and enums, amongst other things.

Each of the above type of thing it can create is called a scaffold.

We can run this command using ng generate <scaffold> <name>

If we wanted to generate a component called HeaderComponent we would write:

ng generate component Header

This creates a number of files in a folder called header in src/app, like so:

app
├── header
│   ├── header.component.css // The CSS for this component
│   ├── header.component.html // The template for this component
│   ├── header.component.spec.ts // The unit test for this component
│   └── header.component.ts // The component TypeScript file

Taking a look at header.component.ts:

link:/content/{filedir}/code/src/app/header/header.component.ts[role=include]

Tip	Don’t name your component `HeaderComponent`. Angular CLI automatically appends `Component` to the name, so you component class would end up being `HeaderComponentComponent`.

The command above can be shortened to:

ng g c Header

Tip

If we run the command in an app folder, the generate command will create files relative to the current folder you are in. So if we are in src/app/header and we run ng g c LoginButton it will generate the files in src/app/header/login-button/

We can also be explicit about where we want the generated files to go by running ng g component ./src/app/foo/bar this will create a component called BarComponent in the folder ./src/app/foo/bar.

Available Scaffolds

Component

ng g component My // Creates MyComponent

By default all generated files go in into src\app\my-component, a folder called my-component is created for us.

Directive

ng g directive My // Creates MyDirective