🦊 Angular Fox 🚀 — русскогорящие новости сообщества

🔥 Встречайте! 🚀 Launchpad для RxJS 🎊 🧩 Исследуйте категории 🔎 Ищите операторы 📚 Изучайте их https://reactive.how/rxjs/

🚀 Для обеспечения быстрого поиска провайдеров, Angular под капотом использует Bloom Filters. 👌 Есть замечательная статья, которая подробно объясняет эту структуру данных: https://llimllib.github.io/bloomfilter-tutorial/

Если вы думаете, как уменьшить затраты на разработку и поддержание реактивных форм в Angular, то обязательно попробуйте NgxFormly. 🎁 NgxFormly — простой инструмент для создания и динамического отображения реактивных форм. 👉 https://github.com/ngx-formly/ngx-formly __ Дополнительно рекомендую ознакомиться с несколькими статьями по этой теме: Организация приложения с использованием NgxFormly https://hackernoon.com/organize-your-forms-application-using-ngx-fomrly-796150461045 Обработка ошибок с Angular и NgxFormly https://itnext.io/error-handling-with-angular-6-and-ngx-formly-8272a3aa7871

✨Магическое отображение ошибок Angular Forms Netanel Basal рассказывает о том, как можно использовать директивы для более простого отображения ошибок в Angular. 👉 https://netbasal.com/make-your-angular-forms-error-messages-magically-appear-1e32350b7fa5

🚀 Prettier — инструмент для форматирования кода. Имеет минималистичный конфиг, есть интеграция со всеми IDE и поддерживает множество языков: JavaScript · TypeScript · Flow · JSX · JSON CSS · SCSS · Less HTML · Vue · Angular GraphQL · Markdown · YAML 🎁 https://prettier.io/ __ 🌟 Для простой установки в Angular, есть готовый schematics:

npm i -g @schuchard/prettier
ng g @schuchard/prettier:add

👌 https://github.com/schuchard/prettier-schematic

fx — потрясающий CLI инструмент для удобного просмотра и редактирования JSON в терминале. 📐 Formatting and highlighting 🎁 Standalone binary 🎉 Interactive mode 🎨 Themes support

npm install -g fx

https://github.com/antonmedv/fx

💣 Все что вам нужно знать про ExpressionChangedAfterItHasBeenCheckedError https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

🚀 Для всех кто жаждет Ivy! Сегодня стало возможно попробовать Ivy. 🎁 Воспользуйтесь готовым приложением с Ivy: https://github.com/thekiba/angular-experimental-ivy __ Или проделайте всю работу самостоятельно: — Обновить @angular/cli до 7.3.0-beta.0 — Создать новое приложение — Вручную обновить @angular до 8.0.0-beta.0 — Удалить параметр es5BrowserSupport из angular.json

npm i -g @angular/cli@7.3.0-beta.0
ng new angular-ivy --experimentalIvy

😎 Spectator — полезный иструмент для тестирования Angular приложения: — Делает тестирование проще — Уменьшает количество бойлерплейта

npm install @netbasal/spectator --save-dev

GitHub: https://github.com/NetanelBasal/spectator __ И как бонусом подборка статей по тестированию. На что стоит обратить внимание, и какие тесты лучше не писать. Тесты, которые должен писать разработчик https://medium.com/p/a04cab35f45b Антипаттерны тестирования ПО https://habr.com/ru/post/358178/

🔥 Простой пример, как можно с помощью @angular/elements рендерить компоненты динамически! Демо доступно на stackblitz: https://stackblitz.com/edit/angular-elements-with-sanitized-html

☕️ Немного о вторничной наркомании. 🌈 HTTP Client Karin необычно использует шаблонные литералы. (Не рекомендуется использовать, пользуйтесь стандартными механизмами) https://github.com/vaheqelyan/karin

⏰ Напоминаю попробовать ngx-quicklink для ускорения навигации страниц с Lazy Modules. 💡Оно предзагружает модули по видимым на экране пользователю ссылкам, когда браузер не занят работой. https://www.npmjs.com/package/ngx-quicklink

🎁 Angular Console, который добавляет UI для Angular CLI, теперь имеет свой плагин в VS code. https://angularconsole.com/

💥 В Angular 7.2.x улучшена производительность пересборки development! 🌈 Теперь все почти так же, как и раньше! Можно обновляться! Не забудьте обновить @angular-devkit тоже. https://github.com/angular/angular-cli/releases/tag/v7.2.1

🔥 Experimental Node.js HTTP framework using RxJS, built with TypeScript and optimized for serverless deployments. https://github.com/mflorence99/serverx-ts

Перед тем как заниматься микро-оптимизациями, проверьте, что все перечисленное уже сделано для вашего Angular приложения: 🔧 Use the Angular CLI 🗜 Compress your assets brotli/gzip ✂️ Use code-splitting with loadChildren 💨 Preload routes ⚡️ Use the Angular Service worker https://github.com/mgechev/angular-performance-checklist

TweetDeck приложение для отслеживания GitHub репозиториев ❤️ 🗃 Open source 👮🏻‍♂️ Written in TypeScript https://github.com/devhubapp/devhub

🎉 Теперь GitHub предоставляет неограниченное количество приватных репозиториев для всех пользователей https://github.com/pricing

🔥 Аналогично команде rxjs-operator-counter, @jamaks написал крутую утилиту ng-app-counter для Angular:

npx ng-app-counter -p tsconfig.json

🎁 GitHub Repository by @ngFanatic

Для всех кто уже обновился до Angular 7.x+ Пока что остаются проблемы с производительностью и пересборки приложения в режиме production и development. Если у вас сильно замедлилась пересборка (а это в 2-5 раз), то воспользуйтесь перечисленными способами. В первую очередь убедитесь, что TypeScript обновлен до версии 3.1.6:

npm ls typescript

Для обновления:

npm install --save typescript@3.1.6

И очень важно, чтобы версия Node.JS была 10 или новее:

node -v

Для обновления Node.JS есть удобный менеджер n:

npm i -g n
n latest

Так же в новой версии @ngtools/webpack имеется деградация производительности, поэтому временно его необходимо откатить до версии 7.0.7:

npm install --save-dev @ngtools/webpack@7.0.7

Так же если у вас установлена последняя версия Angular Cli и у вас медленные production билды, то временно поможет обновиться до последней версии terser:

npm install --save-dev terser@latest

Узнать подробности и следить за развитием событий можно в Issue на GitHub: https://github.com/angular/angular-cli/issues/13102