Quick start for enabling Angular v6 Ivy compiler

CAUTION: This is so extremely experimental note.

“Ivy” is a new view renderer for Angular v6. Since v6.0.0-beta.1, Ivy is published as a experimental API.

## Create a project

Let’s make a new project with ng new --minimal

$ ng new ngv6-ivy --minimal

## Update Angular version

Update all Angular packages to v6

$ ng version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
    
Angular CLI: 1.7.0-beta.1
Node: 8.9.3
OS: darwin x64
Angular: 6.0.0-beta.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.7.0-beta.1
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.10.0-beta.1
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

## Enable Ivy

1. add enableIvy to src/tsconfig.app.json
2. remove BrowserModule from AppModule (workaround for beta.1)
3. simplify AppComponent (workaround for beta.1)
4. add ngc script into package.json
5. set target: es2016 of tsconfig.json (optional)

https://github.com/lacolaco/ngv6-ivy/commit/e8be181d08d361fbd51e313e62b98053701c507e

## Run ngc

$ yarn ngc -p src/tsconfig.app.json

## Look at the outputs

The outputs are in tsc-out directory

### Discover Ivy: ngComponentDef

Open tsc-out/app/src/app/app.component.js .

https://github.com/lacolaco/ngv6-ivy/blob/master/out-tsc/app/src/app/app.component.js#L1-L32

import { Component } from '@angular/core';
import * as i0 from '@angular/core';
export class AppComponent {
  constructor() {
    this.greeting = 'World';
  }
}
AppComponent.decorators = [
  {
    type: Component,
    args: [
      {
        selector: 'app-root',
        template: 'Hello {{greeting}}!'
      }
    ]
  }
];
/** @nocollapse */
AppComponent.ctorParameters = () => [];
AppComponent.ngComponentDef = i0.ɵdefineComponent({
  tag: 'app-root',
  factory: function AppComponent_Factory() {
    return new AppComponent();
  },
  template: function AppComponent_Template(ctx, cm) {
    if (cm) {
      i0.ɵT(0);
    }
    i0.ɵt(0, i0.ɵb1('Hello ', ctx.greeting, '!'));
  }
});
//# sourceMappingURL=app.component.js.map

The essence is AppComponent.ngComponentDef , which is a component definition using Ivy APIs.

The template function is generated from the component’s HTML template.

We will be able to write this definition in our component classes when Ivy will be stable. Then, the current HTML template will be optional. we can choose decorator-less components, which is written in pure JavaScript.