AoT's no no list

Just make my project build in AOT mode. Here is the list I discovered during the process.

  1. No destructured variable or constant.

    Referencing an exported destructured variable or constant is not supported by the template compiler

    Not support: const {var1, ver2} = generate();

  2. Function calls are not supported.

    Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function

    Not supported export const var1 = () => {} Support export function fun1 { }

  3. Could not resolve type Window.

    Not supported Window type directly from lib.dom.d.ts

    injuct Window service
    1
    2
    3
    4
    5
    export const windowSrv = new OpaqueToken('WindowSrv');
    constructor (
    @Inject(windowSrv) private _Window: any
    ) {}

    Here is the proper way to do it Angular 2: How do I get a reference to the window object?

  4. No support for Sass or Less

    Compile them first. ngc does not support anything other than css. So the best bet right now is

    a. compile scss first and run ngc. angular-webpack2-starter

    b. use loader chain for resources when compiling AOT angular2-webpack-starter

    c. use @ngtools/webpack, which is still under development.

  5. Typescript version.

    Check ngc (compiler-cli) support typescript version on github

  6. Don't use enum for router path. It just doesn't work.

Here is the list from angular2-webpack-starter

The following are some things that will make AoT compile fail.

  1. Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time.

  2. Don’t use default exports.

  3. Don’t use form.controls.controlName, use form.get(‘controlName’)

  4. Don’t use control.errors?.someError, use control.hasError(‘someError’)

  5. Don’t use functions in your providers, routes or declarations, export a function and then reference that function name

  6. Inputs, Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public