Angular AOT maturity

Question

I just want to know how mature is the AOT process in order to use it or try different aproach. I'm asking because I'm having lot of trouble trying to apply the example https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

to my app. I'm getting hundreds of errors. It looks like it needs typed classes for all objects. I'm using libraries like d3 and moments, so it's not easy to fix the "not typed" issues. I also have problems with the relative paths.

So, it doesn't generate js files, and can't run the rollup.

Is there any documentation to read in order to configure the compiler to solve these issues?

The app runs without problems in "DEV" mode.

In your tsconfig.json set "noImplicitAny" on false. – Kamil Myśliwiec Oct 11 '16 at 08:53 — Kamil Myśliwiec, Oct 11 '16 at 08:53

score 1 · Answer 1 · answered Mar 11 '17 at 07:37

To resolve your compilation issue, ensure that you've installed @types/d3

npm install @types/d3

To resolve the AOT relative paths issue (assuming you're referring to relative template URLs), you should inline your template files as a pre-build step, prior to using rollup.

For example, to inline your HTML component templates using Gulp and a tool called inlineNg2Template:

gulp.task('compile:es6', function () {
  return gulp.src(['./src/**/*.ts'])
    .pipe(inlineNg2Template({ base: '/src', useRelativePaths:true }))
    .pipe(tsc({
      "target": "es5",
      "module": "es6",
      "moduleResolution": "node",
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "lib": ["es6", "dom"]
    }))
    .pipe(gulp.dest('./dist/src'));
});

Note: the module system must be es6 for rollup to work.

Then your rollup Gulp task can create the UMD, AMD, and CJS bundles:

gulp.task('rollup:module', function() {
  return rollup.rollup({
    entry: pkg.main,
    onwarn: function (warning) {
      // Skip certain warnings

      // should intercept ... but doesn't in some rollup versions
      if (warning.code === 'THIS_IS_UNDEFINED') { return; }
      // intercepts in some rollup versions
      if ( warning.message.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }

      if ( warning.message.indexOf("treating it as an external dependency") > -1 ) { return; }

      if (warning.message.indexOf("No name was provided for external module") > -1) { return; }

      // console.warn everything else
      console.warn(warning.message);
    }

  }).then( function ( bundle ) {
    bundle.write({
      dest: `dist/${pkg.name}.bundle.umd.js`,
      format: 'umd',
      exports: 'named',
      moduleName: pkg.name,
      globals: {
      }
    });
    bundle.write({
      dest: `dist/${pkg.name}.bundle.cjs.js`,
      format: 'cjs',
      exports: 'named',
      moduleName: pkg.name,
      globals: {
      }
    });
    bundle.write({
      dest: `dist/${pkg.name}.bundle.amd.js`,
      format: 'amd',
      exports: 'named',
      moduleName: pkg.name,
      globals: {
      }
    });    
  });
});

Demo Starter App with AOT

score 0 · Answer 2 · answered Dec 16 '16 at 21:50

Compiling with AOT makes a big difference both in bundle size as well as loading time. I've used it with several projects now and it works very well. You say that you use other libraries, and I've solved that by compiling these to jspm sfx bundles that I load besides the angular aot bundle (using global exports - see below).

I have created a working example app with AOT bundle (using ngc and rollup) that you can find here https://github.com/fintechneo/angular2-templates/

The example uses material2 and also shows an SVG chart where the attributes are controlled by Angular2.

Unfortunately no external libs in this example (everything is compiled into one production bundle) - but here's a jspm command I used to create a library bundle in another project.

jspm bundle-sfx somelib somelib.min.js --skip-source-map --format global --minify --global-name SomeLib

You simply load the bundle with a script tag before the aot bundle, and declare a var with name SomeLib in the typescript file using the library.

Angular AOT maturity

2 Answers2