6 useful features in Angular CLI

With the second iteration of Google’s web framework Angular and a complete rewrite of AngularJS, the Angular community was given a significant upgrade in development productivity with the Angular command line interface (CLI).

The CLI makes it easy for developers, new and seasoned, to create Angular applications that work with just a single command. The CLI also manages project configuration, file generation, and build processes to make the development workflow much more streamlined and consistent across Angular applications.

Installing the CLI

The first step to using any of the features provided to us by the CLI is to install the CLI. You can do this easily with the following command:

npm install -g @angular/cli

If necessary, you can always refer back to the installation steps on the official website for the CLI.

From here you can create a new Angular project with the following CLI command:

ng new my-angular-app

Once that has finished, you can then cd into your new project and run your application:

cd my-angular-app

ng serve

Compared to the days of AngularJS, the Angular CLI has reduced a significant amount of work we need to do setting up our projects, which allows us to focus more of our time on creating new features for our applications.

Generation and aliases

After generating your application, one of the first things you’ll want to do is begin generating new schematics for your application such as components, services, and modules.

You can do this by leveraging the CLI’s generate command:

ng generate component my-component

Many commands in the CLI also include aliases to reduce the amount of typing needed to run these commands. Using the example above, we can shorten it by using the alias g for the generate command and the alias c for the component schematic:

ng g c my-component

You can see a full list of the available schematics you can create using the generate command in the wiki for the CLI.

Routing

If you generate a new project with the CLI, you’ll be up and running in no time but the default settings are very basic. A side effect of these default settings is that there’s no structure in place for an application with routing for separate views which is a common requirement for modern web applications.

You can always add routing to your project manually by adding a simple flag when creating your application, the CLI can do all of this for you.

When creating a new project, simply add the -- routing flag and the CLI will generate a routing module for your project in src/app/app-routing.module.ts:

ng new my-project --routing

Later on, when you’re developing modules for your application, you can also generate separate routing modules, which is useful when you want to avoid cluttering the root app routing module. Once again, you use the same -- routing flag when generating modules.

ng generate module my-module --routing

Styling preprocessors

When generating your Angular projects, you may choose to use a CSS preprocessor for your style files so you can write your CSS styles using Sass, Less, or Stylus.

Thankfully, the CLI makes this very easy to do by adding the -- style flag to the ng new command.

ng new my-project --style=scss

If you’d like to use a different preprocessor, simply replace scsswith less or styl.

Dry runs

While using any of the commands provided by the CLI, you might find yourself wishing you could do a test run of the command to see what the CLI will generate and update for you without actually having to create the files and delete them if anything unexpected happens.

Once again, the CLI comes to the rescue with a flag that allows you to inspect a command’s output without actually having the command execute and modify your project. This flag is the — dry-run flag.

ng g c my-test-component --dry-run

If you’re a fan of aliases you can also use the alias for this flag, -d.

ng g c my-test-component -d

Skip tests

By now you may have noticed that many of these generate commands automatically generate test files in your application with the file extension .spec.ts. This is a nice default setting and shows how Angular pushes you in the direction of best practices, but sometimes you want to override the defaults and reduce the additional bloat to your application.

When generating schematics using the generate command, you can do this using the -- spec flag:

ng g c my-testless-component --spec=false

You can also do this when creating your application with the new command:

ng new my-testless-application --skip-tests

ng new my-testless-application -S

Documentation

While you’re working on your Angular applications, there are inevitably going to be situations when you’ll need to reference the Angular documentation for additional information.

You may already have the documentation bookmarked in your browser but you can always save a few clicks using the doc command provided by the CLI.

Simply add your search term using the doc command and the CLI will automatically open a new browser window with your search term specified in the documentation.

ng doc viewchild

Conclusion

Now that you know additional commands and options provided to developers by the Angular CLI, I hope you’ll find ways to incorporate them into your development workflow when working on your projects. If you find yourself doing file creation or project configuration manually, it’s worth checking to see if there’s a feature within the CLI to make the process even easier.

If you ever have questions about the CLI and need additional information, always be sure to check the official CLI Command Reference or the CLI’s wiki page on GitHub.