Angular 5 - Ahead of Time build configuration for rollup

Earlier the @angular Ahead of Time compilation cookbook showed you the compilation steps using the @angular/compiler-cli (ngc) and rollup. From Angular 5 it seems to be all about the Angular CLI (using ng build --prod). In some cases though it's nice to have the rollup recipe. We also want to benefit from the build optimizer and rxjs esm module which is default in Angular 5.

So I've written down the configuration steps here for building a rollup-based AoT build for Angular 5.

The typescript configuration for the @angular/compiler-cli (ngc). Store in file tsconfig_aot.json.

{
    "compilerOptions": {
        "outDir": "js",
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
            "dom", "es2017"
        ]
    },
    "files": [
        "src/main.ts"
    ],
    "angularCompilerOptions": {
        "annotationsAs": "decorators",
        "genDir": "aot",
        "preserveWhitespace": false,
        "skipMetadataEmit" : true
    }
}

In addition to @angular libraries and rxjs you need to install rollup with plugins and also the @angular build optimizer:

npm install --save-dev @angular-devkit/build-optimizer rollup rollup-plugin-alias rollup-plugin-node-resolve rollup-plugin-uglify

And right below is the rollup configuration (rollup-config.js). Note that we've introduced the build-optimizer and also using esm module for rxjs instead of commonjs. Both these steps produce smaller builds.

import resolve from 'rollup-plugin-node-resolve';
import alias from 'rollup-plugin-alias';
import uglify from 'rollup-plugin-uglify'
const rxPaths = require('rxjs/_esm5/path-mapping');

import { buildOptimizer } from '@angular-devkit/build-optimizer';

function angularBuildOptimizer() {
  return {
    name: 'angular-optimizer',
    transform: (content) => buildOptimizer({ content }).content,
  }
}

export default {
  input: 'js/src/main.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  },
  name: 'MyModule',
  plugins: [
    alias(rxPaths()),    
    resolve(),
    angularBuildOptimizer(),
    uglify()
  ]
};

And finally to do the build:

ngc -p tsconfig_aot.json && rollup -c rollup.config.js