Simplifying
Angular project management
with
Angular CLI
Andrea Chiarelli
Software Designer and Developer
Technical Author and Contributor
https://www.linkedin.com/in/andreachiarelli
In the beginning...
...nowadays...
Angular 2 isn't one script include like Angular 1.x
Angular 2 is a set of npm packages...
...and a lot of processing:
● Transpiling (translating TypeScript or ES6 into ES5)
● Building (minimization, optimization, source mapping)
● Packaging (creating module bundles for dynamic
loading)
● Running (live reloading, environment definition)
● Testing (unit testing, e2e testing)
A lot of tools...
A lot of processing require a lot of tools:
● Package managers (npm)
● Transpilers (TypeScript, Babel)
● Module bundlers (Webpack, SystemJS)
● Task runners (Gulp, Grunt)
● Scaffolding tools (Yeoman)
● Test runners and frameworks (Karma, Jasmine)
...and a lot of configuration
Setting up our development environment:
● package.json
● tsconfig.json
● typings.json
● systemjs.config.js or webpack.config.js
● tslint.json
● protractor.config.js
● karma.conf.js
All this
before starting to
write
one single line of code
Welcome Angular CLI
A Command Line Interface for managing Angular 2 projects
Welcome Angular CLI
A Command Line Interface for managing Angular 2 projects
● Easy setup of a new Angular application
● It allows to scaffolding code
● It standardises an application structure following the
community convention
● It builds applications for development and production
environments
● It runs a development server and give us live reload
● It runs unit tests and e2e tests
Very Quick Start
Hello Angular!
The project's structure
The project's structure
Live reloading
Generating code
ng generate
Component ng generate component myComponent
Directive ng generate directive myDirective
Pipe ng generate pipe myPipe
Service ng generate service myService
Class ng generate class myClass
Interface ng generate interface myInterface
Enum ng generate enum myEnum
Module ng generate module myModule
Generating components
Generating components
my-component.component.ts
Generating components
my-component.component.html
Generating components
my-component.component.spec.ts
Do I have control?
Third Party Libraries
Angular 2 Modules
Third Party Libraries
Standard npm packages
Third Party Libraries
Global Library Installation
angular-cli.json
Building
Building
Targets
Target Processing
development bundling, sourcemaps
production bundling, minification, uglification, tree-shaking
The result of a build is stored in /dist folder
Building
Targets
Development Production
ng build
ng build --target=development ng build --target=production
ng build --dev ng build --prod
Building
Environments
angular-cli.json
Building
Environments
environment.staging.ts
Building
Environments
Running tests
Running tests
Unit tests
Running tests
End-to-end tests
References
● https://cli.angular.io/
● https://github.com/angular/angular-cli
