With the second iteration of Google’s web framework Angular and a complete rewrite of AngularJS, the Angular community was a 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.
In this post, we’ll take a look at some of the most useful features the Angular CLI provides.
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 scss with 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.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
The post 6 useful features in Angular CLI appeared first on LogRocket Blog.
Top comments (0)