The Angular CLI is a command line tool that is built not only to help you bootstrap your project, but also to handle the build files, linting configuration, testing setup, and other boilerplate that can consume your precious development time. The CLI can help you with the following tasks:
- Generation of a base project
- Generation of components, services, directives and more
- Generation of unit testing and e2e testing stub files
- Creation of a build script
- Serving your project with live reloading of changes
- Compilation of Less, Sass, Compass and Stylus files
- Generation of routes using lazy loading
- Creation of production builds
- Getting your project on GitHub
- Plenty more. See the details on the CLI’s GitHub page.
Currently the CLI is in beta, but it is certainly ready for use and pretty well documented. The installation is simple with npm:
npm install -g angular-cli
If you are on Windows, you will likely need to run your command line as Administrator for this to succeed. You may also need to run a separate global install of the typings npm package.
Once you have installed the CLI, all you have to do to generate a project is navigate to the directory you want to create your project in via the command line and enter:
ng new PROJECT_NAME
Then change into the directory the CLI just created and serve the project
Angular CLI will compile your TypeScript, start up a web server, and possibly even open a browser tab to show your application. (Otherwise it will tell you the URL to launch) Super easy!
This generates a whole host of files for you, including the .ts file for your component, the HTML for the page and the components templates, and the CSS files for those as well. On top of everything needed to actually compile and run your project, it also has created the hooks for you to start creating tests for your application using Karma or Protractor.
If you want to use Less or Sass rather than straight up CSS, all you have to do is change the file extension of the CSS files the CLI generates for you to be .less or .sass and the
ng serve command will cause those to be compiled into CSS.
The next step is to start creating some components to go in your application. Of course Angular CLI has you covered there too. Instead of having to spend time memorizing the format for a component file and debugging your typos, you can just use the CLI:
ng g component new-cmp
Or, this, if you’re not into that whole brevity thing:
ng generate component new-cmp
That again will generate all the boilerplate TypeScript, HTML, and CSS necessary to get your Angular2 component bootstrapped. It is up to you, however, to import your component in the right places where it will be used. The CLI isn’t that magic yet.
The CLI also can help you take advantage of the lazy loading by routes in Angular2. By default, when you generate a route in the CLI, it creates a route that will only load its required components when that route is activated. This saves you the upfront cost of loading components up front that a user may never visit. Of course, you may also want to load everything up front so route changes are quicker. You can of course toggle the default lazy loading off:
ng generate route my-route --lazy false
When you’re done with your coding and it’s time to build, not only can the Angular CLI handle your build process, but can even do some deploying.
ng build will compile everything and move it into a dist directory.
ng github-pages:deploy will create a repo for your project on GitHub and then deploy the build using GitHub pages. Granted you will have to make sure you have the tokens and ssh credentials set up for such a deployment, but the fact that Angular CLI can do all this out of the box is pretty amazing.
If you’re looking at Angular2 and wondering whether to put the effort into switching to the new framework, the Angular CLI will hopefully help you make up your mind by saving effort and keeping you from getting tripped up on typos or stuck scripting methods to serve up and compile your code. The Angular CLI is a powerful tool to help you get up and running on your way to Angular2.