rc6-config.md

If you're using SystemJS in the browser, you'll want to update your System config to point at the bundles, if you're not already.

System.config({
  //use typescript for simple compilation (no typechecking)
  //transpiler: 'typescript',
  //typescript compiler options
  //typescriptOptions: {
    //emitDecoratorMetadata: true
  //},
  paths: {
    'npm:': 'node_modules'
  },
  map: {
    'app': './src',
    
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    
    
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    
    'rxjs': 'npm:rxjs'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

If you're using SystemJS-builder to bundle your application, you can opt-into using the ES module code by pointing each package at the index.js, and ensuring you have a transpiler set up to handle the ES modules:

System.config({
  transpiler: 'typescript', //add transpiler
  map: {
    '@angular': 'node_modules/@angular',
    'rxjs': 'node_modules/rxjs',
    'typescript': 'node_modules/typescript/lib/typescript.js' //add typescript map
  },
  packages: {
    '@angular/core': {
      main: 'index.js' //use the ESM entry point for bundling tools
    },
    '@angular/common': {
      main: 'index.js' //use the ESM entry point for bundling tools
    },
    '@angular/compiler': {
      main: 'index.js' //use the ESM entry point for bundling tools
    },
    '@angular/forms': {
      main: 'index.js'
    },
    '@angular/http': {
      main: 'index.js'
    },
    '@angular/platform-browser': {
      main: 'index.js' //use the ESM entry point for bundling tools
    },
    '@angular/platform-browser-dynamic': {
      main: 'index.js' //use the ESM entry point for bundling tools
    },
    '@angular/router': {
      main: 'index.js' //use the ESM entry point for bundling tools
    },
  }
})

You may also use the above configuration in the browser during development, but we do not recommend shipping production applications this way.

If you're using Webpack 1, no changes should be required, as Webpack can read the package.json and pick up the appropriate file.

If you're using Webpack 2, you can opt into using the ES module build by setting up your resolve option in webpack.config.js as follows:

module.exports = {
  resolve: {
    mainFields: ["module", "main", "browser"]
  }
}

If you're using Rollup, the newest versions of the rollup-plugin-node-resolve plugin allow you to opt into using the same "module" key in package.json:

var nodeResolve = require('rollup-plugin-node-resolve');

rollup.rollup({
  entry: './lib/main-static.js',
	plugins: [
    nodeResolve({
      module: true //this allows the ESM modules to be treeshakeable.
    })
	],
})