Сегодня прошел WSD в Екатеринбурге, где Андрей Старовойт из webstorm рассказал про поддержку фреймворков, на примере Angular, где вы можете узнать почему так долго индексируется ваш Angular проект.

https://youtu.be/DsfnFrwKksA?t=5278

ну если и этого мало, то можете поковырять плагин Angular под webstorm:
https://github.com/JetBrains/intellij-plugins/blob/master/AngularJS/src/org/angular2

#ngFanatic еженедельник от 27.10.2019

Релизы:

angular: 8.2.12, 9.0.0-next.14
angular-cli: 8.3.14, v9.0.0-next.15
angular material2: 8.2.3


Статьи:

Testing Asynchronous Code in Angular Using FakeAsync (Netanel Basal)
Статья про то как использовать FakeAsync, и сделать тесты более предсказуемыми. Ну и конечно это все под соусом из Spectator.

Overriding Angular Schematics (Santosh Yadav)
Статейка про переопределение стандартных schematics в angular.json. Default onPush и все такое.

Adding Font Awesome to an Angular CLI project using npm (Rocky Segarra)
про [FontAwesomeModule] и <fa-icon [icon]="faTwitter"></fa-icon> и как с помощью этого пакета грузить только те иконки, которые действительно нужны.

TypeScript Types: The Any Type (Todd Motto)
noImplicitAny, noImplicitThis, strictNullChecks, alwaysStrict - true всем!

Vanilla JavaScript and HTML - No frameworks. No libraries. No problem. (John Papa) На счет No problem конечно сомнительно, но стоит задуматься.

Компоненты-агностики в Angular (Александр Инкин)
Динамика на минималках.

Завтра, 30 октября в 20.30 мск проидет очередной ngRuAir. В этом выпуске с нами будет Andrey Starovoyt из JetBrains и расскажет как они поддерживают фреймворки в WebStorm и почему отказались от Angular language service
https://www.youtube.com/watch?v=jLvtwNmbPKU

ngFanatic eженедельник от 06.11.19

Релизы:
angular: 8.2.13, 9.0.0-rc.0 (2019–10–31)
angular-cli: 8.3.14, v9.0.0-rc.0
angular material2: 8.2.3, 9.0.0-rc.0

Статьи:

Runtime environment configuration with Angular (Frederik Prijck) Простая конфигурация приложения в рантайме через APP_INITIALIZER.

Converting a Promise into an Observable (Frederik Prijck) Простые шаги для обработки Promise в Observable. Тут про defer, new Observable, AbortController.

Transloco's New Dev Tools Make i18n in Angular Easy as Pie (Netanel Basal) Появился extractor, такой же как ngx-translate, только в дополнение с поиском. Ну и самое крутое что есть - вебпак плагин который может закидывать ключи в файлы перевода еще на этапе разработки. Scopes в переводах из коробки. Еще и валидация появилась =). Часто возникают вопросы как мержить файлы перевода, так пожалуйста - transloco: join, split. И в добавок: "Оптимизатор", пока вырезает лишь комменты для переводчика. Выглядит все очень годно.

Migrate your Angular library to Jest (Kevin Kreuzer)

tap, map & switchMap explained (Fabian Gosebrink)

How to Avoid Observables in Angular (Michael Hladky) боли и страдания в Angular связаны прежде всего с не пониманием как работает rxjs. Большая статья про это.

Enterprise Angular (Manfred Steyer) Выпущена целая книга про DDD, Nx Monorepos и Micro Frontends.

Support for generic task execution, displaying affecting projects, new commands for schematics discovery, and more in Nx 8.7
(Brandon Roberts)

Помните про uiBakery, я тут промокод достал =)
Предназначалась для воркшопа, но не сложилось.
публикую тут =)

DUMP2019

Angular уже есть практически везде
для мобилок: Ionic, NativeScript
для сервера: Nest, Universal
для терминала: Platform-terminal

Ну и конечно здесь не хватало десктопа (не будем про поделки на Electron). И чтобы это дополнить я создал нативное, кросс-платформенное решение для Angular.
Решение довольно простое, путем замены рендерера и платформы, так же нужно было занести стандартные компоненты из Qt. Основой для решения служит Nodegui, хотя можно было бы рассмотреть и другие подобные проекты: Proton-Native, Vuido, но они в отличии от Nodegui полностью завязаны на React и Vue соответственно.

Проект пока только разрабатывается, буду рад любой помощи, отзывам и критике. Ну или можете просто поставить star на github =)

https://github.com/irustm/angular-nodegui

Совсем скоро начнется Angular Piter #3

Тем, кто не смог к нам присоединиться в живую, могут посмотреть все это в лайве:

https://www.youtube.com/nexignteam/live

Делаем кроссплатформенное нативное десктоп приложение на Angular
https://link.medium.com/DPGR5cfEr2

Пока команда Angular ушла на каникулы и Stephen Fluin традиционно не выпустил новый релиз вместе со статьей про фичи Angular, я попытался собрать все в кучу и ответить на вопрос что нового?

https://link.medium.com/9cLQPHZtx2

Представляю ресурс для Angular разработчиков =) angular.fun

На сайте будет дублироваться подборка статей, с их кратким изложением.

Так же будут публиковаться различные Angular события:

https://angular.fun/events/

В ближайший месяц пройдет более 10 митапов, взгляните на список, вдруг рядом с вами будет проходить какое либо мероприятие. А если вы что то упустили, материалы прошедших событий, сможете найти там же.

Если у вас будут дополнения, ссылки на интересные статьи, или же захотите написать свою подборку, присылайте PR или заводите issue

Загрузка компонентов в 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.

Ну чтож) баги пофикшены, доки обновлены, релиз 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