Scribd
Upload
2 views

angularcli

The document discusses the complexities of managing Angular 2 projects, highlighting the need for various tools and configurations before coding. It introduces Angular CLI as a solution that simplifies project management by providing easy setup, scaffolding, and standardized application structure. Additionally, it outlines the process of generating components, building applications for different environments, and running tests.

Uploaded by

videoswitch7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

angularcli

The document discusses the complexities of managing Angular 2 projects, highlighting the need for various tools and configurations before coding. It introduces Angular CLI as a solution that simplifies project management by providing easy setup, scaffolding, and standardized application structure. Additionally, it outlines the process of generating components, building applications for different environments, and running tests.

Uploaded by

videoswitch7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

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

You might also like