Toggle Menu

Insights / Tech Tips / Taking Control with Angular CLI

June 05, 2017

Taking Control with Angular CLI

4 mins read

Going into ng-conf 2017, I thought I knew everything I needed to about Angular’s official command line tool, Angular CLI. Though the first stable version just recently released (coinciding with the release of Angular 4.0.0), alpha and beta versions of the CLI have been out for quite some time. I picked it up quickly as I was learning Angular towards the end of last year, thanks in part to Cory Rylan and the Angular Boot Camp team (I took their three-day Angular 2.x course, which I highly recommend for anyone looking to become an Angular pro!). Based on Ember CLI, Angular’s CLI tool takes the pain out of the complex setup needed to get an application up-and-running, generating all the files and configuration necessary to get started.

Hit the Ground Running

To try it out, just open your preferred command window and run the following commands:

npm install -g @angular/cli
ng new <project name>
cd <project name>
npm install
ng serve

Now, open a web browser and navigate to https://localhost:4200. You should see the text “app works!”, which means your application is running. Congratulations, you’ve just created your first Angular application!

Stress-Free Configuration

Take a look through the project directory created by the CLI, and you will notice a file named .angular-cli.json. This is the main configuration point for Angular CLI, and where you can gain control of your application. Two places you will update in just about every one of your projects is apps.styles and apps.scripts. Instead of having to add tags in your index.html for external CSS and JavaScript packages, you can place the links in the corresponding JSON keys and voila! Angular CLI knows to include these packages when building the application and will render in the browser accordingly.

For more details on the supported config keys, check out the official documentation on Angular CLI’s GitHub Wiki.

Less Setup, More Development

Angular CLI gives you the ability to auto-generate pretty much anything you could ever need in your project, including modules, components, services, pipes, and directives. This can be achieved by navigating into the preferred directory and running ng generate <type> <name>. After the script finishes, you should see your new file in the directory, along with a few extras (depending on what you generated).

Generating a component, for example, will give you four new files: A TypeScript class (tailored to match Angular’s specifications and best practices), a corresponding HTML template, a CSS stylesheet for your template, and a Karma unit testing file. The CLI will even wire up your new component in the app.module for you, saving you countless hours trying to figure out what that cryptic “component not found” error means!

Full Control

Now, this what the extent of my knowledge before ng-conf. After a few talks at ng-conf from the Google Angular team and browsing through the new-and-improved Wiki pages, it became apparent how truly useful the CLI can be. As of this post, there are 12 base commands listed on GitHub, each of which has several optional flags and variables that can be attached to achieve different results.

ng build compiles the application into an output directory (named dist by default) when run. You can specify whether you want your code to be built for production by appending the –prod flag, which compiles based on the environment file specified in your .angular-cli.json file. You can also force your app to rebuild every time a file is changed using –watch or specify a custom output path using –output-path (or –op for short).

ng eject, one of the newest additions to the Angular CLI family, disconnects your application from the CLI and gives you a customizable Webpack configuration. This is huge for developers, because, unlike before, you can now go inside the hood and tinker with setup and plugins however you see fit. If there are external plugins you want to bring into your app, you can now do this with ease using your newly-created Webpack config! ­­

The Whole Package

Before learning Angular, I personally preferred UI-based tools over command line interfaces, but the power and convenience of Angular’s CLI tool has made me a believer. Angular CLI is a must-have tool for developers, making application development fast and simple while enforcing best practices. Whether it’s your first time playing with Angular or you’re building enterprise-level applications, the CLI will put you in control from start to finish.

But Wait There’s More

Stay tuned for these blogs and more from ng-conf 2017 by the ExcellaJS team:

You Might Also Like

Resources

How Federal Agencies Can Deliver Better Digital Experiences Using UX and Human-Centered Design

Excella UX/UI Xpert, Thelma Van, join host John Gilroy of Federal Tech Podcast to discuss...

Resources

Data Scientist: What Are They and Why Are They Important?

Excella Practice Director, Artificial Intelligence and Analytics, Aaron Pujanandez join host John Gilroy of Federal Tech Podcast to discuss...