Angular CLI Refresher

Angular cli Jul 01, 2019

Angular CLI

Angular provides a utility to allow users to create and manage projects from the command line. It automates tasks like creating projects, adding new controllers, etc. It’s generally a good idea to use Angular CLI as it will help create and maintain common patterns across our application.

To install Angular CLI, just run the following command:

$ npm install -g @angular/cli

Once it’s installed you’ll be able to run it from the command line using the ng command. When you do, you’ll see a lot of output, but if you scroll back, you should be able to see the following:

 ng --version

If everything installed correctly, you should see the current version output to your terminal. Congratulations!

If you’re running OSX or Linux, you might receive this line in the output:

 Could not start watchman; falling back to NodeWatcher for file system events.

This means that we don’t have a tool called watchman installed. This tool helps Angular CLI when it needs to monitor files in your filesystem for changes. If you’re running OSX, it’s recommended to install it using Homebrew with the following command:

 brew install watchman

If you’re on OSX and got an error when running brew, it means that you probably don’t have Homebrew installed. Please refer to the page http://brew.sh/ to learn how to install it and try again.

If you’re on Linux, you may refer to the page https://ember-cli.com/user-guide/#watchman for more information about how to install watchman.

If you’re on Windows instead, you don’t need to install anything and Angular CLI will use the native Node.js watcher.

If you’re curious about all of the things that Angular CLI can do, try out this command:

ng --help

CLI command-language syntax

Command syntax is shown as follows:

ng commandNameOrAlias requiredArg [optionalArg] [options]
  • Most commands, and some options, have aliases. Aliases are shown in the syntax statement for each command.

Option names are prefixed with a double dash (--). Option aliases are prefixed with a single dash (-). Arguments are not prefixed. For example:content_copyng build my-app -c production

  • Typically, the name of a generated artifact can be given as an argument to the command or specified with the --name option.
  • Argument and option names can be given in either camelCase or dash-case. --myOptionName is equivalent to --my-option-name.

ng new [project-name]

to generate a new project. Make sure to replace [project-name] with a actual project name of your choice.

The CLI will now go ahead and create a new directory named just like the project.

Inside of that folder, it will create all the files for a basic but already executable angular application.

It will also install all required external dependencies. This can actually take some time.

ng new example --dry-run

Sometimes you want to try out, what a command does, before it actually does something.

Specifically if you are new to the CLI, the dry-run option will be very useful.

This option will stop the CLI from making any changes to the file system. Instead it will print everything it would have done to the console. That way you can check if the command actually does what you thought it does, before it causes any harm.

For example, the option could be used like this:

ng new example --skip-install

There might be situations, where you don’t want to install the external dependencies right after the creation of a new project.

One Example could be, that you don’t have a internet connection. Or you don’t want to wait forever, because you are on a slow machine right then.

That is, when the skip-install option comes in handy.

If you create a new application with this flag, it won’t install external dependencies automatically.

ng new example --style scss

Using pre-processed Css like Sass has become quite popular.

But the CLI creates normal css-files for every component by default. If you don’t want to change them manually every time, you can use the —style scss option to tell the CLI that you want to use Sass.

But not only Sass-files (.scss) are supported. You can find a list of all supported style-extensions at the official angular-cli-wiki.

ng generate component [name]

command to generate all the files you need to create a new component.

The CLI will generate a new folder for you, as well. Isn’t that great?

By the way, if you don’t want that extra folder, you can use the —flat option:

ng generate component [name] --flat

Of course this does not only work for components. You can create a whole bunch of different angular-blueprints by replacing component by one of the following.

class directive enum guard interface module pipe service

ng serve

to start our application in development mode.

It will also watch the directory of our application for changes.

So if it detects a change, it will recompile the application (partly) and automatically update the application in the browser.

Personally, I have the app running in watch mode, almost all of the time during development.

It is important to know, that this feature is for development purposes only. Do not use this small web-server in an production environment!

Neeraj Dana

Experienced Software Engineer with a demonstrated history of working in the information technology and services industry. Skilled in Angular, React, React-Native, Vue js, Machine Learning