Exploring the Angular Command Line Interface (CLI)
Installing the CLI
sudo npm install -g @angular/cli
ng --version
Using the CLI
ng --help
ng build --help
Creating New Angular Projects
The ng new command
ng new app-name
New project generation options
ng new --help
ng new app-name --routing
ng new app-name --style=scss --routing --dry-run
ng new app-name --style=scss --routing --prefix=vsrao
Serving Angular Applications for Development
The ng serve command
ng serve --help
ng serve
ng serve --open
Customizing the development server
ng serve --port=8000 --open
ng serve --host=whatever.dev.company.com --open
Generating Angular Application Code
Creating new code with blueprints
With the Angular CLI you can generate the different entities used to build your application. You will be able to easily generate Components, Directives, Services, Pipes, Models and Interfaces, Route Guards and Modules. When generating a blueprint, your command will follow the following template:
ng generate [schematic] [name] [options...]
ng generate --help
Available schematics: application, class, component, directive, enum, guard, interface, module, pipe, service, universal and appShell.
Generating components and modules
ng generate component contact-list --dry-run
ng g c contact-list --dry-run
ng g c contact-list --dry-run --flat
ng g c contact-list
ng generate module shared
ng generate component shared/avatar --module=shared
Generating directives
ng generate directive shared/directives/non-numeric --module=shared
Generating services
ng generate service services/api
ng generate service services/api --module=app
Generating pipes
ng generate pipe pipes/phone
Generating models
ng generate class models/contact
Generating interfaces and enums
ng generate interface models/contact
ng generate enum models/contact-type
Generating route guards
ng generate guard auth
Building Angular Applications
A build pipeline for an Angular app
There are many steps involved in building an Angular application. Since Angular applications are written in TypeScript and ES6 and beyond, the build pipeline is quite involved. We need to Transpile TypeScript and ES6+ code, bundle our application into one file, or split across many, minify files by removing newlines and white space, mangle our application bundles to make files even smaller, and also generating source maps. Aside from that, we also need to deal with CSS and other assets, such as compiling from Sass to CSS, possibly inlining CSS, having scoped styles, and copying or inlining images. As you can see the process is very involved, but the Angular CLI takes care of all this for us using Webpack under the hood, all with a simple command, ng build. The ng build command also comes with several options.
Configuring different build options
By default, the ng build command runs a development build due to which the JavaScript bundles are not optimized meaning they are neither minified nor uglified for performance. Also the bundle names do not contain a hash for cache busting.
A production build can be run using ng build --prod. For generating source maps in a production build we need to use the ng build --prod --sourcemap command. Lastly, if you wish to analyze the generated bundle files, using a tool such as webpack bundle analyzer use the ng build --prod --stats-json command. Running this command will generate a stats.json file, which you can then upload on webpack.github.io/analyse/ . On this site, you can analyze the different bundles that the build pack run generated for you. You can analyze chunks, the assets, and see the size of each of them.
Setting up build scripts
In the package.json file, we can setup the below npm scripts:
"build:dev":"ng build --stats-json"
"build:prod": "ng build --prod --stats-json"
Setting up npm scripts will make automation much easier.
Running Tests
Built-in test runners and scaffolding
When you create an Angular application using the CLI, a testing pipeline is already set up for you. To run your unit tests, a karma configuration file, karma.conf.js is generated. Karma is used as a test runner using jasmine as a testing framework, and is set up, by default, to run your tests in Chrome. Additional setup can be seen in test.ts. Essentially, this provides additional setup to initialize the Angular testing environment. You can write your tests in TypeScript and the CLI will take care of transpiling that for you.
The ng test command
In order to run your unit tests, you use the ng test command. This will take all of your spec files, transpile them in memory, and run your unit test in Chrome.
Test run options
Running the ng test command runs the test in watch mode. However, if you prefer not to do that, you can use a single run flag. By running the ng test --single-run command the test will only run once and then exit. This will be needed in a Continuous Integration environment.
You can also generate code coverage reports when running your tests. To do so, you need to use the code coverage flag. Running ng test --single-run --code-coverage command will not only run your tests but will also generate code coverage reports using Istanbul. Once it is complete, it will create a new coverage folder, with an index.html page for your report.
Ejecting from the Angular CLI
The tooling provided by the Angular CLI is quite extensive. It can generate applications, application code, and also set up build and testing pipe lines for you. However, it is not uncommon for a development team to ask specific needs over the build process, in order to have finer control. It is for these purposes that the Angular team created an eject feature. You can use this feature if you feel that you want to manually take care of running and building your application. To do so, you can use the ng eject command.
Conclusion
The Angular CLI is truly a great tool that will allow you to be productive building Angular applications. I recommend subscribing to notifications on this GitHub repository – https://github.com/angular/angular-cli/, as it will allow you to keep up to date with new features and be notified of new releases. The Angular team have some great things planned for the CLI. I also recommend subscribing to the official Angular Blog – https://blog.angular.io/ for keeping up to date.