Using CDN files with Angular2 and Webpack

Question

So I was wondering if there was a way to include CDN files alongside a webpack bundle. I've been looking around and having trouble trying to set up a small Angular2 repo that doesn't throw errors with the Typescript transpiler (using a CDN and without Systemjs). At the bottom of my index.html, I have various dependencies of Angular2 included from cdn.js like so:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/Rx.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/http.min.js"></script>
<script src="js/app.js"></script><!--bundle from webpack-->

Using webpack normally, I understand that it would look into the node_modules that I have installed and then bundle them into app.js as I specified below:

var webpack = require('webpack');

module.exports = {
  entry: "./src/typescript/app",
  devtool: 'source-map',
  output: {
    path: __dirname + "/app/js", publicPath: 'app/js', filename: "app.js"
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [{
      test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
    }]
  }
};

My tsconfig.json for reference as well:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "sourceMap": false
  },
  "exclude": [
      "node_modules"
  ]
}

However, for this code, I only want to transpile then concatenate only my Typescript files into one app.js file. I want to ignore node_modules and let the js files from the CDNs above be used instead. However, I'm still confused as to how to let my bundle know that angular2 has been included from the cdn because it gives me an error like so: Uncaught Error: Cannot find module "angular2/platform/browser".

Any help would be appreciated!

Answer 1

CDN files generally pollute window with a variable that should be available. You can redirect webpack require statements to pick stuff off of window e.g:

// webpack.config.js
module.exports = {
  externals: {
    'angular2/platform/browser': 'angular.platform.browser'
  }
  ...
};

Of course I expect you to change angular.platform.browser to whatever global variable you want to use off the CDN version of angular

More

Here are the relevant docs : https://webpack.github.io/docs/library-and-externals.html