Forget $compile in Angular 2

TL;DR

• Forget about `$compile`
• Use `innerHTML` and DOM APIs

`$compile` in Angular 2

I wrote an article that explain “how to load a HTML template with using dynamic component creation.”

Since Angular 2, `$compile` was dropped. There are no ways to insert HTML fragments into the component view except using innerHTML. But if we could create a component and load it…? Yes, we can do it! This post will explain about dynamic HTML projection in Angular 2 with dynamic component creation.

How did I ?

Before `@NgModule` introduced, I used `ViewContainerRef` and `RuntimeCompiler` with a dynamic component factory.

Dynamic component factory is a just function that calls `Component()` decorator function to create decorated class object dynamically.

  private createDynamicComponent(selector, template) {
    const metadata = new ComponentMetadata({
      selector,
      template,
    });

    const cmpClass = class _ { };
    return Component(metadata)(cmpClass);
  }

And then, I passed the class to `RuntimeCompiler` and get `ComponentFactory`.

this.compiler.compileComponentAsync(this.createDynamicComponent(selector, template))
      .then(factory => {
        this.vcRef.clear();
        this.vcRef.createComponent(factory, 0, injector);
      });

After `NgModule`

In Angular 2.0.0-rc.6, many APIs including `Compiler#compileComponent` were removed as deprecated API. Now, every component is belonging to its NgModules as declarations, and every compilation starts on the module.

Important thing: NgModules are compilation context.

That means I no longer be able to compile components separately because any compilations needs a module.

Of course, then I had an idea; dynamic component compilation with dynamic module creation.

If you are interested in the idea and my challenge, see this code.

https://github.com/laco0416/angular2-component-outlet/blob/master/src/component-outlet.ts#L70-L99

I tried that and it seems succeeded, but it has a big problem: AoT.

RuntimeCompiler is dead

Ahead of Time compilation is a powerful feature of Angular 2 to gain drastic performance improvement. It allows us to compile templates at the build time and reduce dependency on `@angular/compiler` package. It significantly affects to app bundle size if we use tree-shaking. why? Because then our app doesn’t have `RuntimeCompiler`. As all compilation finished in offline, a compiler is not needed in runtime.

AoT compilation brings many benefits to us:

• Small payload bundle
• Fast bootstrapping
• Template error detection

So, I chose AoT and threw away `$compile`.

Use `innerHTML` and DOM APIs

Instead of `$compile`, I decided to use `innerHTML` and DOM APIs to implement something like `directive` or Custom Elements.

Most of our directives may be reproduced with native DOM. For example, we can create pseudo-routerLink in a dynamic HTML.

It’s very grunt code, but works well. We should go on the right way of Angular and Web standards.

Summary

Angular 2 is stable now. We should throw away tricky ways. Keep our applications AoT-friendly and optimizable. Follow the right Angular way.