AKN AKN - 2 months ago 228
TypeScript Question

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

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!

Answer

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).

Comments