IVY potential in

ngular 9.

The enabler. 💣

AGENDA:

Angular 9 features

IVY Renderer

Live Coding Examples 🔥

Elements

Angular | .NET

Konstantin Malikov

Angular Workshop

Angular Minsk

Participant

Community 👍

📣 1.5M+ devs (angular.io hits)

📣 4M+ npm downloads per month

📣 gitter channel (gitter.im/angular/angular)

📣 stackoverflow (˜160K answered questions)

📣 760 meetup groups in 379 cities in 66 countries

statistics from frontendwatch.com

Community

Collaborators and GDE

Community

+ a lot of great examples

Community

Angular Team (w/o collaborators)

Angular 9 release date




  "angularCompilerOptions": {
    "enableIvy": true
  }

Angular Ivy by default

Pipelining

from Renderer2

to Ivy

Backward compatable

Default "serve" behavior


  ng serve --aot

NgModule updates

entryComponents no more needed

NgModule updates

optional modules?

Bundle size

i18n

npm i @angular/localize

ng serve --configuration=fr

ng build --configuration=production,es,

// or with all locales
ng build --prod --localize

"scripts": {
  ...
  "dev:ssr": "ng run angular-universal-v9:serve-ssr",
  "serve:ssr": "node dist/angular-universal-v9/server/main.js",
  "build:ssr": "ng build --prod && ng run angular-universal-v9:server:production",
  "prerender": "ng run angular-universal-v9:prerender"
}

Universal

Live angular universal development

Angular static prerender

npm run dev:ssr

ng run <app_name>:prerender

Dependency Injection

@Injectable({
  // we declare that this
  // service should be created
  // by the root application injector.
  providedIn: 'root'
})
export class HeroService {
  getHeroes() { return HEROES; }
}

Dependency Injection

@Injectable({
  // we declare that this
  // service should be created
  // by the root application injector.
  providedIn: 'platform'
})
export class HeroService {
  getHeroes() { return HEROES; }
}

Dependency Injection

@Injectable({
  // we declare that this
  // service should be created
  // by the root application injector.
  providedIn: 'any'
})
export class HeroService {
  getHeroes() { return HEROES; }
}

JS Instructions

TS & HTML CODE