Angular Silesia

Rafał Brzoska

Senior Software Developer @ Future Processing
Angular Trainer
Bottega IT Mind
Speaker

Angular CLI

Angular Console

Before Angular CLI

Ember CLI

ember new
ember init
ember build
ember serve
...

angular-cli 0.13

first published version
ng new
ng build
ng serve
ng generate component/service/pipe
Angular Alpha
unstable

angular-cli 1.x

stable
monorepo with other angular packages
Angular 4.0+

@angular/cli 6.x

Angular 6
based on @schematics
fast
extensions

Changelog

Let's review it :)

Angular CLI

the true story

Downo, downo tymu...

jak Ziemia była jeszcze plaskato....

było tam ćma jak w ż***ci ...

po placu lotało pełno beboków...

a nojwiynkszy sie zwoł Angular

kożdy chcioł go oswoić...

Batman...

Indiana Jones...

Yeoman...

ale żodyn tygo niy umioł...

ŻODYN!...

aż łoroz ktoś zaklupoł i otworzył dźwiyrze...

to był jego Foter...

a nosz stary ujec...

Ujec Google...

kery stanył i padoł...

"Angular, niy leć w ciula!"

I tak powstało...

Angular CLI

Tera mogymy już włonczyć światło :)

Angular CLI

```
project/code generator
```
```
build (webpack)
```
serve (webpack-dev-server)
css-preprocessors (LESS, SASS, Stylus)
AOT
tests (unit, e2e)
lint
schematics

Angular CLI

http://cli.angular.io

(v7: http://angular.io/cli)

Create New Project

npm install -g @angular/cli


ng new project-name


cd project-name


ng serve

ng new

ng serve

component

directive

guard

module

pipe

service

Generating Code

ng generate

class

interface

enum

Angular classes

TS elements

application

library

universal

CLI Applications

Karma

Jasmine

Quality Tools

tests and lint

Protractor

ng test

ng e2e

ts-lint

codelyzer

ng lint

Source Maps

Named chunks

Vendor chunk

Building

ng build

Optimization

Hashing

Exctract css

AOT

Extract licenses

development

production

Schematics

create

transform

update

Schematics

easy

reusable

extensible

asynchronous

Schematics Collections

Set of named schematics.

Can be published and installed by users

Schematics Collections

@schematics/angular
@ngrx/schematics
@angular/material
@nrwl/schematics
@nativescript/schematics
...

ng add

install dependencies

execute initialization schematics script

Workspaces

config in angular.json

multiple projects

applications or libraries

createt by 'ng new'

angular.json

.angular-cli.json

angular.json

v1.7.4

v6+

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "targets": {
        "build": {},
        "serve": {},
        "extract-i18n": {},
        "test": {},
        "lint": {}
      }
    },
    "my-app-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "targets": {
        "e2e": {},
        "lint": {}
      }
    }
  },
  "defaultProject": "my-app"
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  ...
}

$schema and version

angular.json

{
  ...
   "projects": {
    "my-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application"
      }
    },
    "my-app-e2e": { ... },
    "my-lib": { ... }
  },
  "defaultProject": "my-app"
}

projects

angular.json

{
  ...
   "projects": {
    "my-app": {
       ...
        "architect": {
          "build": {
            ...
          },
          "serve": {
            ...
          }
      }

architect targets