Wednesday, November 16, 2016

The Ultimate Angular CLI Reference Guide

On September 15, 2016, Angular 2 Final was released.

Where Angular 1.x was limited to a framework, Angular 2 has grown into an ambitious platform that allows you to develop fast and scalable applications across all platforms such as web, mobile web, native mobile and even native desktop.

With this transition to a platform, tooling has become more important than ever. However, setting up and configuring tooling is not always easy. To make sure Angular developers can focus on building applications with as little friction as possible, the Angular team is putting a lot of effort in providing developers with a high quality development toolset.

Part of that toolset are close integrations with a wide array of IDE's and editors. Another part of that toolset is Angular CLI.

In this article we have a look at what Angular CLI is, what it can do for you, and how it performs some of its magic behind the scenes. Even if you already use Angular CLI, this article can serve as a reference to better understand its inner workings.

Technically you are not required to use Angular CLI to develop an Angular 2 application, but its many features can highly improve the quality of your code and save you a lot of time along the way.

So let's get started!

What Is Angular CLI?

Angular CLI is a Command Line Interface (CLI) to automate your development workflow. It allows you to:

  • create a new Angular application
  • run a development server with LiveReload support to preview your application during development
  • add features to your existing Angular application
  • run your application's unit tests
  • run your application's end-to-end (E2E) tests
  • build your application for deployment to production
  • deploy your application to a server

Before we have a look at each of the above in detail, let's first see how you can install Angular CLI.

Prerequisites

Before you can use Angular CLI, you must have Node.js 4.0.0 and npm 3.0.0 or higher installed on your system.

You can download the latest version of Node.js for your Operating System and consult the latest installation instructions on the official Node.js website.

If you already have Node.js and npm installed, you can verify their version by running:

$ node -v # => displays your Node.js version 
$ npm -v # => displays your npm version

Once you have Node.js installed, you can use the npm command to install TypeScript:

$ npm install -g typescript@2.0.2

Although TypeScript is technically not an absolute requirement, it is highly recommended by the Angular team, so I recommend you install it to make working with Angular 2 as comfortable as possible.

Now that you have Node.js and TypeScript installed, you can install Angular CLI.

Installing Angular CLI

To install Angular CLI, run:

$ npm install -g angular-cli

which will install the ng command globally on your system.

To verify whether your installation completed successfully, you can run:

$ ng version

which displays the version you have installed:

angular-cli: 1.0.0-beta.17
node: 6.1.0
os: darwin x64

Depending on your system setup, you may see the following warning in Angular CLI's output:

Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ift.tt/22TlJJ7 for more info.

This warning tells you two things:

  1. Angular CLI is based on Ember CLI, the CLI of the Ember framework.
  2. Watchman is not installed on your system

Watchman

Watchman is a scalable file watching service built by the Facebook Engineering team that offers better performance than similar services.

Angular CLI will fall back to NodeWatcher if you don't have Watchman installed.

However, you may benefit from improved performance if you install Watchman, so it's definitely worth checking out the installation instructions to see if Watchman supports your operating system.

If you are running Mac OS X, you can install Watchman using Homebrew:

$ brew install watchman

Now that you have Angular CLI installed, let's use it to create a new application.

Creating a New Angular Application

There are two ways to create a new application using Angular CLI:

  • ng init: create a new application in the current directory
  • ng new: create a new directory and run ng init inside the new directory

So ng new is similar to ng init except that it also creates a directory for you.

Assuming you haven't created a directory yet, let's use ng new to create a new project:

$ ng new my-app

Behind the scenes, the following happens:

  • a new directory my-app is created
  • all source files and directories for your new Angular application are created based on the name you specified (my-app) and best-practices from the official Angular Style Guide
  • npm dependencies are installed
  • TypeScript is configured for you
  • the Karma unit test runner is configured for you
  • the Protractor end-to-end test framework is configured for you
  • environment files with default settings are created

You will learn more about each of these aspects in the following sections.

At this point you have a working Angular application and your new directory my-app looks like this:

my-app
├── README.md
├── angular-cli.json
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── index.ts
│   │   └── shared
│   │       └── index.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.json
│   └── typings.d.ts
└── tslint.json

Available Options

  • --dry-run: boolean, default false, perform dry-run so no changes are written to filesystem
  • --verbose: boolean, default false
  • --link-cli: boolean, default false, automatically link the angular-cli package (more info)
  • --skip-npm: boolean, default false, skip npm install
  • --skip-bower: boolean, default true, skip bower install
  • --skip-git: boolean, default false, don't initialize Git repository
  • --directory: string, name of directory to create, by default this is the same as the application name
  • --source-dir: string, default 'src', name of source directory
  • --style: string, default 'css', the style language to use ('css', 'less' or 'scss')
  • --prefix: string, default 'app', the prefix to use when generating new components
  • --mobile: boolean, default false, generate a Progressive Web App application (see section on upcoming features)
  • --routing: boolean, default false, add module with routing information and import it in main app module
  • --inline-style: boolean, default false, use inline styles when generating the new application
  • --inline-template: boolean, default false, use inline templates when generating the new application

Let's see how you can start your application so you can see it in action.

Running Your Application

To preview your new application in your browser, navigate to its directory:

$ cd my-app

and run:

$ ng serve

to start the built-in development server on port 4200:

** NG Live Development Server is running on http://localhost:4200. **
3935ms building modules
Hash: fd7ad6cf3503757e22e0
Version: webpack 2.1.0-beta.25
Time: 6526ms
            Asset       Size  Chunks             Chunk Names
   main.bundle.js    2.78 MB    0, 2  [emitted]  main
 styles.bundle.js    10.2 kB    1, 2  [emitted]  styles
        inline.js    5.53 kB       2  [emitted]  inline
         main.map    2.86 MB    0, 2  [emitted]  main
       styles.map    14.1 kB    1, 2  [emitted]  styles
       inline.map    5.59 kB       2  [emitted]  inline
       index.html  472 bytes          [emitted]
assets/.npmignore    0 bytes          [emitted]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.81 kB       0
webpack: bundle is now VALID.

You can now navigate your favorite browser to http://localhost:4200/ to see your application in action:

Application works

Behind the scenes, the following happens:

  1. Angular CLI loads its configuration from angular-cli.json
  2. Angular CLI runs Webpack to build and bundle all JavaScript and CSS code
  3. Angular CLI starts webpack dev server to preview the result on localhost:4200

Notice that the ng serve command does not exit and return to your terminal prompt after step 3.

Instead, because it includes LiveReload support, the process actively watches your src directory for file changes. When a file change is detected, step 2 is repeated and a notification is sent to your browser so it can refresh automatically.

To stop the process and return to your prompt, press ctrl-c.

Adding Features to Your Angular Application

You can use the ng generate command to add features to your existing application:

Continue reading %The Ultimate Angular CLI Reference Guide%


by Jurgen Van de Moere via SitePoint
Posted by at
Labels: , , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)