Webpack 2 won't work when using ts-loader

Question

I have been setting up a basic angular 2 (typescript) application, which uses Webpack 2 for bundling etc.

My issue is that when I use ts-loader to process typescript (.ts) files I get a lot of errors. I suspect, but am not totally sure, that the errors are to do with ts-loader not excluding the node_modules directory even though I specify for it to exclude it in the webpack config.

I just want to be able to setup my webpack config (and my app) so that typescript can be transpiled and the app can be correctly bundled with webpack. Please help.

Webpack.config.js

var webpack = require('webpack');

module.exports = {
    entry: './src/main.ts',
    output: {
    filename: './dist/bundle.js',
},
resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['.ts', '.tsx', '.js'] // note if using webpack 1 you'd also need a '' in the array as well
},
module: {
    loaders: [{
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
    }]
},
plugins: [
    new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
    __dirname
),
]
};

package.json

{
  "name": "tiptip-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack -d --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.4.6",
    "@angular/compiler": "2.4.6",
    "@angular/core": "2.4.6",
    "@angular/forms": "2.4.6",
    "@angular/http": "2.4.6",
    "@angular/platform-browser": "2.4.6",
    "@angular/platform-browser-dynamic": "2.4.6",
    "@angular/platform-server": "2.4.6",
    "@angular/router": "3.4.6",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "jasmine-core": "^2.5.2",
    "reflect-metadata": "^0.1.9",
    "rxjs": "5.0.2",
    "zone.js": "0.7.6"
  },
  "devDependencies": {
    "source-map-loader": "^0.2.0",
    "ts-loader": "^2.0.3",
    "typescript": "^2.2.0",
    "typings": "^2.1.0",
    "webpack": "^2.2.0"
  }
}

Error messages after running 'npm run build'

Answer 1

This is not a webpack problem but a TypeScript problem. Webpack correctly ignores the node_modules but TypeScript complains because it doesn't know the types for Map or Set . These are ES6 features and if you set the target in your compilerOptions to es5 it won't include these in the compilation and therefore doesn't know their types. From the compiler options documentation:

Note: If --lib is not specified a default library is injected. The default library injected is:
► For --target ES5: DOM,ES5,ScriptHost
► For --target ES6: DOM,ES6,DOM.Iterable,ScriptHost

You can set the lib option to use es6 (or any higher version eg es2017 ):

"lib": ["es6", "dom"]