Загрузка компонентов в Ivy без привязки к модулям, благодаря принципу "Locality"

const {QuizCardComponent} = await import('./quiz-card/quiz-card.component');
const quizCardFactory = this.cfr.resolveComponentFactory(QuizCardComponent);
const {instance} = this.quizContainer.createComponent(quizCardFactory, null, this.injector);

исходники
статья

Почему еще не выпустили Angular 9?

После новогодних каникул оставалось всего ~12 тасок, которые блокировали релиз. Сейчас же осталось всего 2. Более подробно про них будет ниже.

1. host binding к pipe [breaking change] теперь нельзя юзать таким образом

host: {
    '[class.active]': '(active$ | async) == true'
  }

С ivy этого не удастся, поэтому осталось написать лишь в guid по миграции, что не стоит так больше.

2. Проблема увеличения бандла после включения Ivy.

Не понятно закроют ли этот таск перед релизом или оставят до лучших времен, так как новых ответов от команды Angular все еще нет. Немного подробнее про проблему и как ее можно решить.

Все из за различия в renderer. Во VE компонент генерируется в 2 файла:
transpiled file и .ngfactory.js который включает template factory.

Допустим у нас есть условно SharedComponent лежащий в SharedModule, а SharedModule включен в AppModule, еще и в LazyModule.

Что произойдет:
в VE:
SharedComponent class уйдет в main.js , а .ngfactory.js в common.js
в Ivy: SharedComponent уйдет в main.js

Если уберем ссылку SharedModule из AppModule, все станет на свои места, SharedComponent уйдет в common.js и размер main.js естественно станет меньше.

Собственно, если обнаружите что main.js увеличился то проверьте ваш LazyModules на Shared из AppModule. Демо.

Так же эту проблему можно решить с помощью различных техник использования lazy components в Ivy.

host: {
    '[class.active]': '(active$ | async) == true'
  }

Ну чтож) баги пофикшены, доки обновлены, релиз Angular 9 состоялся 🥳

commit

И традиционный пост от Stephen Fluin:

Version 9 of Angular Now Available — Project Ivy has arrived!

Так же сегодня пройдут 2 онлайн митапа:

1. Nrwl Connect with Hero Devs: Discussing Scully

2. AngularMeetup от ThisDot c темами:
- RxJS Testing (Ben Lesh)
- Angular in the Jamstack (Tara Z. Manicsic)

Все что нужно знать про DI в Angular в удобном представлении.

Angular Dependency Injection Infographic

Загрузить полную версию

Сегодня состоится очередной NgRuAir.

В этом выпуске мы хотим поговорить про новые фичи, breaking changes, производительность, размер бандла, жизнь без zone.js, так же затронем Ivy и ngcc.

https://www.youtube.com/watch?v=_XY1xyEyr6I

Nrwl недавно внедрили в Nx кэширование результатов выполнения команд. Это должно повысить скорость ваших билдов при разработке, а именно:
- для тестов
- при переключении веток 🔥
- Micro-Frontend App, все достается из кэша
- CI

Подробнее

Так же это все ушло в Nx Cloud.
Это поможет вашей команде делится результатами билдов в момент разработки.

Записывайтесь на тест: https://nx.app/

Запускаем Angular IVY в jspm sandbox

import { Component, ɵrenderComponent } from '@angular/core';

@Component({
  selector: '[id=container]',
  template: `{{title}}`
})
export class AppComponent {
  title = 'ng-ivy-demo';
}

ɵrenderComponent(AppComponent);

1. tsconfig.app.json target: "es2018"
2. ngc -p  tsconfig.app.json
3. Подправить импорт:

import * as importcore from "https://dev.jspm.io/@angular/core@9";
const core = importcore.default;
const { Component, ɵrenderComponent } = core;

К сожалению, prod сборку через jspm-cli еще невозможно.

Чем вам может быть интересен jspm и jspm-cli?
На данный момент, это прежде всего инструменты на подобии codelab, ng-run, stackblitz
jspm умеет создавать import-maps и преобразовывать любые пакеты в es-модули.
Так же применим для вытаскивания пакетов npm в deno.

Подготовил rollup конфиг, который собирает hello world в 6кб.

В начинке:
- build-optimizer
- uglify, c параметрами  'ngDevMode': false, 'ngI18nClosureMode': false.
- terser plugin.

👆так же как и стандартный angular cli.

Terser плагин практически работал в холостую и никаких прибавок к конечному бандлу не давал.

В итоге чтобы собрать hello-world уходит по ~15с
Что собственно дает в сумме 6кб.

Взглянув в итоговый бандл, я увидел что в инструкциях шаблона действительно присутствует только то что было объявлено.
Но, так же в каждом компоненте объявлены все функции хуков, + в начале бандла содержаться инструкции по загрузке модулей, компонентов.
Поэтому 6кб считаю далеко не пределом.

Простое руководство как успешно коммитить в Angular:

https://habr.com/ru/post/491788

Angular NL отменён
ng-conf переведен в онлайн
ngVikings переведен в онлайн
angularday на очереди

Актуальные события https://angular.fun/events/

Вышел NestJS 7
- GraphQL + TypeScript
- Flexible Custom Decorators
- New Pipes
- Implicit type conversion

https://trilon.io/blog/announcing-nestjs-7-whats-new

Как то увидел пост в твиттере, что размер конечного бандла Angular приложения слишком большой, ну и как всегда не смог пройти мимо.

Angular приложение в 293 bytes (gzip)

Во столько смог ужать hello-world Angular Ivy. И считаю что именно так должен работать @angular-devkit/build-optimizer
и подбрирать необходимый runtime.

Что я имею ввиду под Angular app:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `Hello world!`
})
export class HelloComponent {}

И то что это приложение было пропущено через стандартный компилятор ngcc.

Для написания собственного runtime необходимо переопределить инструкции для рендеринга.

И немного понять, как работает incremental-dom.

——
Сейчас мой runtime очень простой, и не поддерживает ничего кроме пару простых инструкции. В дальнейшем хочу поддержать в нем все стандартные инструкции Angular renderer, и пропустить все это через closure compiler.

Пару слов про эксперименты Angular team c closure compiler
- 58.28kb brotli (Angular 7.2.13 Hello World app)
- те кто вкладывался в этот проект к сожалению больше не работают в Angular команд, и в целом ушли из Google

Сегодня в 20.00мск состоится очередной NgRuAir.

В этом выпуске мы хотим поговорить про Angular Codelab (https://codelab.fun) – инструмент для интерактивного обучения Angular.

https://www.youtube.com/watch?v=h9lGLpvKeFI

Вышел Angular 9.1

- Быстрая сборка с ngcc
- TypeScript 3.8
- Флаг в генерации

ng generate component my-component --displayBlock

- grep в тестах по умолчанию

ng e2e --grep searchTerm

- Улучшения в language service и в плагине Vscode соответственно:
Improved HTML & Expression Syntax Highlighting
- Улучшения localization, можно прям в коде менять направления 'rtl' или 'ltr'
- TSLint 6.1 by default

[Core CHANGELOG] 9.1.0
[Components CHANGELOG] 9.2.0 metal-man
[CLI CHANGELOG] 9.1.0

ng update @angular/cli @angular/core

🅰️ Делаем Angular снова меньше!

Интересная попытка скрестить lit-element и angular elements PolymerLabs/angular-element

Которая к тому же поможет избавиться от огромных бандлов в стандартной обертке AngularElements.

На данный момент следуя стандартному руководству в angular.io конечный бандл Angular Element будет занимать 65kb.

Для сравнения, бандл lit-element весит 6.98kb (All the Ways to Make a Web Component - конечно же Angular не попал в эту сравнительную таблицу).
Как я уже писал можно предельно ужать рантайм и в 256b

Но если у вас нет желания писать свои обертки для Angular Elements, то можно воспользоваться ngx-elements который будет давать в итоге 6кб.

Время для просмотра онлайн Angular митапов.

🗓  31.03 Angular Heidelberg
- Angular and RxJS – Tackling Component State Reactively

🗓 02.04 Angular Belarus
- Protractor: Automated testing of Angular apps Dual lab
- What are Angular Reactive Forms?

🗓 07.04 Angular Toronto
- The State of Angular Deployment, SSR, and Prerendering
- Scaling Development across Multiple Projects with Nx
- Little App of Horrors - workshop
- Components Best Practices

🗓 08.04 Angular Warsaw
- Sustainable Angular-Architectures with Strategic Design and Nx
- Build your own portal with Angular Embedded views

🗓 10.04 Angular Sydney
- Angular 9 with Minko Gechev, Angular components, QnA and more

🗓 12.04 Angular Thailand #1
- Nx Extensible Dev Tools for Monorepos

🗓 14.04 Angular-Leipzig
- Angular - Best practices
- Angular basics in real world projects.

🗓 22.04 Angular Warsaw
- Extending angular for the reactive web
- Angular End To End (e2e) Testing With Cypress.io

🗓 25.04 Angular Online (India)
- Best practices, Routing & more.

А теперь немного выдержки того что было на ng-conf из нового

▪️ HOC

export function extend(aComponent: AComponent) {
   class DynamicComonent implements OnInit { /* .. */};
   DynamicComonent.ɵcpm = ɵɵdefineComponent ({/* wraps AComponent */});
  return DynamicComonent;
}

▪️ Standalone Components, Dependencies are provided directly in directiveDefs fields

export class AComponent {/* ... */}
AComponent.ɵcpm = /* private API */
AComponent.ɵcpm.directiveDefs = [OtherComponent.ɵcmp];

▪️ Angular 9 Universal

ng run app:prerender

▪️ RxJS: ⚠️  toPromise() deprecated, use lastValueFrom(source$)
▪️ RxJS: New flag resetOnSuccess

pipe(retry({
   count: 3,
   resetOnSuccess: true
})

▪️ NgRx: variable in observable

<ng-container *ngrxLet="obs$ as n">

▪️ NgRX: New Reactive Router (experimental)

<ngrx-router>
  <ngrx-route path="/blog/posts/:id" [component]="blogPostComponent"></ngrx-route>
</ngrx-router>

Angular Ivy и время сборки проекта по умолчанию.
https://medium.com/@piotrl/angular-with-ivy-build-performance-review-5d27bd322bc5