Question

我关注Angular 2的webpack intro。我使用的是WebStorm，但当我运行npm start webpack-dev-server的别名时，我获得了超过60个TypeScript以下形式的错误错误

ERROR in [at-loader] node_modules\@angular\common\src\directives\ng_class.d.ts:48:34
    TS2304: Cannot find name 'Set'.

ERROR in [at-loader] node_modules\@angular\common\src\pipes\async_pipe.d.ts:44:38
    TS2304: Cannot find name 'Promise'.

我记得在使用打字时遇到了类似的问题，并通过在我的应用程序根目录的///<reference path="../typings/index.d.ts"/>文件顶部添加ts来解决这个问题。

然而，这个webpack示例使用了新的@types，但我似乎无法使用WebStorm。我尝试使用建议here的tsconfig.json属性更新typeRoots，但无济于事。您可以找到此网络包演示的来源here。

如何在WebStorm中使用它？

Answer 1

@詹姆斯-B

将 webpack.common.js 中的TS规则更改为加载器：[＆＃39; awesome-typescript-loader＆＃39;，＆＃39; angular2-template-loader＆＃ 39;] 如下所示：

您的webpack.common.js代码：

module: {
    rules: [
        {
            test: /\.ts$/,
            loaders: [{
                loader: 'awesome-typescript-loader',
                options: { configFileName: helpers.root('tsconfig.json') }
            } , 'angular2-template-loader']
        },
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file-loader?name=assets/[name].[hash].[ext]'
        },
        {
            test: /\.css$/,
            exclude: helpers.root('src', 'app'),
            loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
        },
        {
            test: /\.css$/,
            include: helpers.root('src', 'app'),
            loader: 'raw-loader'
        }
    ]
},

更新了webpack.common.js代码：

module: {
    rules: [
        {
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
        },
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file-loader?name=assets/[name].[hash].[ext]'
        },
        {
            test: /\.css$/,
            exclude: helpers.root('src', 'app'),
            loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
        },
        {
            test: /\.css$/,
            include: helpers.root('src', 'app'),
            loader: 'raw-loader'
        }
    ]
},

在WebStorm中使用@types

1 个答案: