Angular CLI

Angular CLI (command line interface) is a new tool that was developed to make it easier to create and deploy Angular applications. Much of the setup and configuration work you need to do can be done through the Angular CLI. Deploying applications is much simpler using the CLI tool.

Note: At the time this book was written, Angular CLI was still in beta status, but it represents an exciting time saving tool for the Angular environment. Be sure to visit the website to keep track of the application.

Getting Angular CLI

To use Angular CLI, you need to have the latest versions of node and NPM. You can check the versions at the command line with the following lines:

• npm –-version
• node -v

NPM must be version 3 or higher, and Node must be version 4 or higher. If you don’t have these versions, you can update NPM using NPM itself. The command is:

Code Listing 11

If you need to make an update, the easiest and safest approach is to visit the Node.js website and download the latest version. Once you have these versions, to install Angular CLI, simply run the following command from a command prompt.

Code Listing 12

This will install angular-cli, and you can use the ng command to run it.

Code Listing 13

This will provide a list of all the commands and their parameters. For this chapter, we are focusing on the new and build commands.

Note: If you want to update Angular CLI to the latest version, you will need to uninstall the current version and get the latest version, as shown by the following commands.

npm uninstall -g angular-cli

npm cache clean

npm install -g angular-cli@latest

Creating a new project

Once you’ve installed Angular CLI, you can create a new project using the new command. Its syntax is:

Code Listing 14

This will create a folder with the project name and place the needed files into the folder. The package.json file will be generated automatically for you, with the latest version of the Angular modules. The installation process will be performed as part of the creation, so the node_modules folder will be populated for you.

Note: The ng new command performs two tasks: it first creates a folder and then creates the project files. The ng init command is similar, except it creates the project files in an existing folder.

Once this step is complete, you have a working application, including the needed configuration files. The application itself will reside with the src folder, with the familiar app folder within in.

Project root

The project root folder will hold several configuration files. The package.json file (we will cover this in the next chapter), a configuration file for Angular CLI (angular-cli.json), and one for the lint checker (tslint.json). You’ll also find a GitHub readme file (README.md).

src

In the src folder, you’ll find the index.html file and a CSS file, as well as some other files for testing, a favicon file, and more. The configuration file for TypeScript (tsconfig.json) will be here as well.

There is a folder within the src called environments. This folder contains a pair of TypeScript components that export a production flag, so you can do debug and production builds.

src\app

Within the src\app folder, you’ll find the base module and component. You will likely being adjusting app.module.ts and app.component.ts to be your application starting points. The base ones are simply an Angular version of Hello World.

ng serve

You can run the ng serve command to start a web server on local host, port 4200. If you run ng serve and open a browser to http://localhost:4200, you will see the basic application display the message “app works!”

Figure 5: Angular CLI Hello World

Tip: The scripts and styles are bundled and can be found in the dist folder.

ng build

The ng build command is used to create a set of distribution files in the output folder (usually dist). You can do a dev build (the default) by simply running the following command.

Code Listing 15

The dist folder will contain the bundles and any required assets for running the application. To do a production build (which will result in substantially smaller bundle files), you can use the following command.

Code Listing 16

Environments folder

The environments folder contains Angular modules that can be loaded, depending on the type of build.

Code Listing 17: Environment.prod.ts

You can import this file into your component with the following code.

Code Listing 18

This will give you access to the properties in the environment files, which will allow you to adjust your code if need be, based on whether it is a development or production build.

Summary

Angular CLI is still a beta production, but it represents a new and very helpful application to use in your Angular development. We touched upon some of the basics, but the CLI is powerful and worth exploring more. It includes support for unit tests, and it can generate starting components of any Angular type.

You should periodically visit the official Angular CLI website to see the growth and enhancements the tools will provide. It is not necessary to use the Angular CLI, but as you get familiar with Angular 2, you will come to appreciate the CLI to make your overall Angular development work easier.