Angular Study Notes (Angular 9 & Ivy)

I heard that Angular 9 doesn’t have any great feature releases, just change a configuration to the default. The team really doesn’t give it a try …

The modified configuration is the rendering engine, named ivy, which seems to be called because of the 4th generation.

What’s different about it?

Mainly, the code after component editing is different, and it is more friendly to tree shaking. The code looks better. The size is smaller.

1.Look

After editing, I have written the code into a static function. The build template is directly using a call type … elementstart will directly call the dom api to create the element (as it is)

Note that ɵfac will be discussed later.

2. no more entry component.

In the past, it was troublesome to dynamically output components. Entry components were required, and modules could not be lazyloaded.

Much easier now

open() {
    import('./abc/abc.module').then((m) => {
      ɵcreateInjector(m.AbcModule, this.injector);
      this.dialog.open(AbcComponent, { width: '1000px' });
    });

    // import('./abc/abc.component').then((m) => {
    //   const factory = this.cfr.resolveComponentFactory(m.AbcComponent);
    //   this.target.createComponent(factory, 0, this.injector);
    // });

    // import('./abc/abc.component').then((m) => ɵrenderComponent(m.AbcComponent,
    //   { injector: this.injector, host: this.el.nativeElement }
    // ));
  }

Just lazy load and link the injector to this module, you can use any component.

Module does not require entry component or export

@NgModule({
  declarations: [AbcComponent, XyzComponent],
  imports: [
    CommonModule
  ],
  // exports: [AbcComponent, XyzComponent],
  // entryComponents: [AbcComponent]
})
export class AbcModule { }

Note: If you do not use the import module but directly ppend component, you will find that it can run, but if this component has dependencies on other components, it will not work, unless you do not use module, but write the dependency by the component yourself .

At present, there is no official way to write a module. I believe it will be out in the future, it may look like 2.0 rc. At that time, ngmodule has not come out yet …

Another important point is the injector. After we import it, we need to use this module build an injector, because there may be providers in this module before we can append components.

3. optional ng module

After ivy, the ngmodule became an optional, of course, the ngmodule encapsulates a lot of good materials for us, injector, detech change, life cycle, etc.

Then you do n’t use it, you have to make it all by yourself. There are references in the article. I do n’t have this requirement myself before I can add a demo.

4. HOC (height order component)

I still can’t feel what big things it can do. Its function is to say that now we can intercept ɵfac through decorator (this ɵ(Greek Theta) is because this method is private at present).

After interception we can rewrite ɵfac

export function HOC() {
  return (cmpType) => {
    const originalFactory = cmpType.ɵfac;
    cmpType.ɵfac = (...args: any) => {
      const cmp = originalFactory(...args);
      console.log('component instance', cmp);
      return cmp;
    };
  };
}

@HOC()
@Component({
  selector: 'app-test-dialog',
  templateUrl: './test-dialog.component.html',
  styleUrls: ['./test-dialog.component.scss']
})
export class TestDialogComponent implements OnInit {

Focus on the point, here we can get the component instance, and then you can make a package, such as modifying some interfaces, etc., can be regarded as decoration mode NgOnChange is implemented in this way, it is no longer a built-in life cycle hook Already.

We can also strengthen the life cycle hook in a similar way.

5.I18n

ng of i18n is very weak, and most of the functions from v5 to v9 have not been implemented.

It has been separated after v9. If you want to use it, you need to install package @ angular / localize

Previously, if "i18nLocale": "en-US" was configured in angular.json, it would directly report an error, if the package was not installed.

#angular-9 #ivy