Features of Angular 7
Features of Angular 7

Features of Angular 7

Features

Let’s firstly talk about new features.

Angular Compatibility Compiler (ngcc)

This compiler will convert node_modules compiled with ngc, into node_modules which appear to have been compiled with ngtsc. This conversion will allow such “legacy” packages to be used by the Ivy rendering engine.

DoBootstrap

The new lifecycle hook interface ngDoBootstrap.

Example:

class AppModule implements DoBootstrap {
  ngDoBootstrap(appRef: ApplicationRef) {
    appRef.bootstrap(AppComponent);
  }
}

Compiler

Updated XMB placeholders(<ph>) to include the original value on top of an example. Now placeholders can by definition have one example(<ex>) tag and a text node. The text node is used by TC as the “original” value from the placeholder, while the example should represent a dummy value. Let’s take a look examples below:

Old Behavior:

A message like <foo>Band: {{yourName}}</foo> would generate this xmb message:

<msg id=123>Name: <ph name=”INTERPOLATION”><ex>{{yourName}}</ex></ph></msg>

New Behavior:

A message like <foo>Name: {{yourName}}</foo> would generate this xmb message:

<msg id=123>Name: <ph name=”INTERPOLATION”><ex>{{yourName}}</ex>{{yourName}}</ph></msg>

The <ph> PCDATA (text node) is used by TC for some validations.

Bug Fixes

Bazel

Now compile_strategy() is used to decide whether to build Angular code using ngc (legacy) or ngtsc (local). In order for g3 BUILD rules to switch properly and allow testing of Ivy in g3, compile_strategy() became importable.

Ivy

Template functions for dynamically created views are no longer nested inside each other. Instead of nesting the functions and using closures to get parent contexts, the parent contexts are re-defined explicitly through an instruction. This means we no longer create multiple function instances for loops that are nested inside other loops.