Skip to content

Instantly share code, notes, and snippets.

@robwormald
Last active October 22, 2020 22:49
Show Gist options
  • Save robwormald/29f3dcda1a06b955d83fccb2a94586eb to your computer and use it in GitHub Desktop.
Save robwormald/29f3dcda1a06b955d83fccb2a94586eb to your computer and use it in GitHub Desktop.

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.
    })
	],
})
@nastakhov
Copy link

Please advice why do I have to use 'transpiler' option, if all code bundled is ES5 javascript ?

@chendachao
Copy link

Do you have a demo?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment