Duplicate identifier errors - Webpack 2 configuration with Angular 2 and Typescript 2

Question

I am trying to configure my angular 2 with webpack 2 and typescript 2, and I'm running into Duplicate Identifier errors. I've searched for multiple solutions and none have helped so far.

errors:

    typings\globals\core-js\index.d.ts 
    `Duplicate identifier 'PropertyKey'
    typings\globals\core-js\index.d.ts 
   `Duplicate identifier 'Promise'
    typings\globals\es6-promise\index.d.ts 
    `Duplicate identifier 'Promise'
     typings\globals\es6-shim\index.d.ts 
    `Duplicate identifier 'PropertyKey'

I've tried adding the ambient dependency to my typings.json file with no success, and also tried to remove the globalDependencies completely and just leaving the ambientDependencies:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
    "es6-collections": "registry:dt/es6-collections#0.5.1+20160316155526",
    "es6-promise": "registry:dt/es6-promise#0.0.0+20160614011821",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  },
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160215162030"
  }
}

I've tried excluding the whole typings directory in the tsconfig.json file, but that lead to other errors such as these:

node_modules\@angular\platform-browser\src\facade\collection.d.ts:8:8
Cannot find name 'Map'.

My current tsconfig.json is below:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude":[
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ],
  "awesomeTypescriptLoaderOptions":{
    "useWebpackText":true
  }
}

I also tried adding the following to the exclude array of the tsconfig.json:

"browser"
"browser.d.ts"

And lastly, my webpack.config.js is below:

var webpack = require('webpack');
var HtmlWebPackPlugin = require('html-webpack-plugin');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  context: path.resolve('app'),
  entry: {
    'app':'./main.ts'
  },
  output:{
    path: path.resolve('dist'),
    publicPath:'/',
    filename: 'bundle.js'
  },

  resolve:{
    extensions:['', '.js', '.ts']
  },

  devtool:'module-inline-source-map',

  watch:true,

  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  },
  module:{
    loaders: [
      {
        test:/\.ts$/,
        exclude:/node_modules/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: "html"
      },
      {
        test: /\.css$/,
        exclude: path.resolve('app'),
        loader: ExtractTextPlugin.extract({fallbackLoader: 'style-loader', loader: 'css-loader'})
      },
      {
        test: /\.css$/,
        include: path.resolve('app'),
        loader: 'raw'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file?name=fonts/[name].[hash].[ext]?'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader:'file'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader:'url?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader:'url?limit=10000&mimetype=image/svg+xml'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),

    new HtmlWebPackPlugin({
      template: path.resolve('app/index.html')
    }),

    new webpack.ProvidePlugin({
      $: "jquery",
      jquery:"jquery",
      jQuery:"jquery",
      "windows.jQuery":"jquery",
      "window.Tether":'tether'
    })
  ]
}

Angular 2 version:2.0.0-rc.6
Typescript version: 2.0.2
Webpack version: 2.1.0-beta.20

If anyone has any insight on this, I'd appreciate your help.

Thanks!

Just an update to show the changes after Dave V provided the answer:

The follwing folders were deleted from the typings directory:

globals/es6-promise
globals/es6-shim
browser

index.d.ts in the typings root had the following references removed:

/// <reference path="globals/es6-promise/index.d.ts" />
/// <reference path="globals/es6-shim/index.d.ts" />

Also, I added "typings/browser.d.ts" to the tsconfig.json exclude array, since it was referencing the es6-shim inside browser/ambient:

"exclude":[
    "node_modules",
    "typings/main",
    "typings/main.d.ts",
    "typings/browser.d.ts"
  ]

Dave V Dave V · Accepted Answer · 2016-09-20T17:55:20

You can't use es6-promise and core-js since they both cover the Promise concept and have their own definitions for it. You need to pick just one (if you are using Angular, they recommend core-js).

Duplicate identifier errors - Webpack 2 configuration with Angular 2 and Typescript 2

1 Answers