2016-09-20 56 views
2

我想用webpack 2和typescript 2配置我的角2,並且遇到重複的標識符錯誤。我已經搜索了多種解決方案,迄今爲止沒有任何幫助。重複的標識符錯誤 - Angular 2和Typescript 2的Webpack 2配置

錯誤:

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' 

我試着加入環境依賴於我的typings.json文件沒有成功,並且還試圖徹底清除globalDependencies和剛剛離開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" 
    } 
} 

我試過在tsconfig.json文件中排除整個類型目錄,但是導致其他錯誤如下:

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

我現在tsconfig.json低於:

{ 
    "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 
    } 
} 

我也嘗試添加下列到tsconfig.json的排除陣列:

"browser" 
"browser.d.ts" 

最後,我webpack.config.js低於:

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' 
    }) 
    ] 
} 
  • 角2版本:2.0.0-rc.6
  • 打字稿版本:2.0.2
  • 的WebPack版本:2.1.0-beta.20

如果任何人有任何這見解,我會感激你的幫助。

謝謝!


只是一個更新以顯示更改後Dave V提供了答案:在分型根

globals/es6-promise 
globals/es6-shim 
browser 

index.d.ts:

的follwing的文件夾是從分型目錄中刪除刪除了以下參考文件:

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

此外,我添加了"typings/browser.d.ts"到tsconfig.json排除陣列,因爲它是引用es6-shimbrowser/ambient

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

回答

1

不能使用es6-promisecore-js因爲它們都涵蓋Promise概念,並有自己的定義吧。你只需要選擇一個(如果你使用的是Angular,他們推薦core-js)。

+0

好的,但我會去哪裏排除其中的一個,因爲tsconfig。json似乎並不尊重以下內容,仍然存在以下問題:''排除「:[ 」typings/globals/es6-promise「, 」typings/globals/es6-shim「, 」typings/browser/ambient/es6-shim「 」node_modules「, 」typings/main「, 」typings/main.d.ts「 ]' – AKN

+1

您需要將其從'typings.json'文件中刪除,以便它不會安裝並將它從index.d.ts(如果這就是所謂的main.d.ts)中刪除,則將其從main.d.ts文件中刪除。 –

+1

謝謝!修復了我所看到的錯誤,我將編輯我的帖子以根據您的解決方案顯示我所做的工作,所以如果有人遇到同一問題,他們可以看到更改。 – AKN