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>
Now, open a web browser and navigate to http://localhost:4200. You should see the text “app works!”, which means your application is running. Congratulations, you’ve just created your first Angular application!
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!
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:
- Taking Control with Angular CLI: Brendan Sawyer
- Ng-conf 2017 Talks You Should Watch: Alex Hoffman
- Serverless Development with Angular, Firebase and Cloud Functions: Sam Blissard
- Three Common Questions for TypeScript Beginners: Cameron Ivey
- Three Common Cases for Universal Rendering in Progressive Web Apps: Keith Center