Angular 7 is coming

Photo by Frank Mckenna

Today Angular Team released Angular 7 beta release. Many of us will be curious about the kind of features and bug fixes that we can see in this beta release.

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.

Example:

Code example by kara

Before:

Code example by kara

After:

Code example by kara

TView.components no longer track directive indices (just host element indices). We can cut the components array in half because the context for components is now being stored in the component’s LViewData instance and can be accessed from there.

Now we have a new instruction, reference() (r()). Previously, we were using closures to get access to local refs in parent views. Now that nested template functions are flat; they do not have access to the local refs through a closure, so we need another way to walk the view tree. reference takes a nesting level, and the local ref’s index then walks the view tree to find the correct view from which to load the local ref.

Before:

Code example by kara

After:

Code example by kara

Core

Now Angular has better error handling for @Output if property is not initialized.

References

angular/angular

Other Angular Articles

Dipi: Your Angular Development Assistant

Increasing rendering performance in Angular with Lazy Render *ngFor