Articles with #english

In this post, I will explain how to compile Angular libraries with Ivy, which is now possible in Angular v11.1, and its details. The intended audience is those who are developing Angular third-party libraries, or simply interested in Angular’s internal mechanism. You don’t need to know anything in this article to develop Angular applications. The content of this article is based on the Design Doc written by the Angular team.

Assuming a situation we have… An Angular component library project, Lib1Module An Angular Elements library project, Lib1ElementsModule An Angular Elements library project, Lib2ElementsModule which uses Lib1ElementsModule It can be achieved with loading scripts of both Lib1 and Lib2 separately. But composing multiple Angular Elements definition brings some benefits. Unified Angular bootstrapping (better performance) Single <script> tag in HTML (free from loading order problem) Creating Lib1ElementsModule import { createCustomElement } from ‘@angular/elements’; export function defineCustomElements(injector: Injector) { customElements.

Although Angular allows us to use NoopNgZone to make an app zoneless, still some Angular modules are depending on Zone implicitly. ngOnInit of Routed Component won’t be called! I hit a problem when using Angular Router without Zone. Routing looks working but ngOnInit method of the routed component has not been executed. It is because Angular Router depends on Zone in route activation. Technically, Router internally calls ChangeDetectorRef#markForCheck to re-render after route change.

OnPush change detection strategy can test “reactiveness” of an Angular application. Using OnPush is not neccessary to remove Zone.js, but reactiveness is still important in the zone-less world. Removing Zone.js brings both control and responsibility about application rendering to a developer. It is not recommendable for everyone. So before doing that, understand how much Angular and Zone.js have been helping us enough. Things Zone.js does Simply, what Zone.js (Zone) does is just firing events to Angular in order to run change detection.

This post is English version of AsyncPipeの初期値null問題と非同期データバインディング. Angular’s AsyncPipe is a useful feature for template binding of asynchronous data, but it has a big problem since the beginning. That is the “Initial Null Problem”. This article describes

Web Workers have attracted the attention as one of the most important things of web development. Comlink is a JavaScript library created by Google Chrome team to make WebWorkers enjoyable. It provides an easy way to communicate with classes defined in Worker-side. This post explains how to integrate Comlink with your Angular application that created by Angular CLI. By using Comlink, You will be able to move away heavy processing off-the-main-thread easily and make JavaScript bundles smaller by code separation.