Mit @types in WebStorm

Question

Ich bin nach dem webpack intro für Angular 2. Ich bin mit WebStorm aber wenn ich npm start laufen, ein Alias ​​für webpack-dev-server, bekomme ich mehr als 60 Typoskript transpile Fehler der folgenden Form

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

Ich erinnere mich an ähnliche Probleme bei der Verwendung von Typings, und gelöst, dass durch Hinzufügen von ///<reference path="../typings/index.d.ts"/> an die Spitze einer ts Datei an der Wurzel meiner Anwendung.

Allerdings verwendet dieses Webpack-Beispiel die neue @types, aber ich kann nicht scheinen, es mit WebStorm nett zu spielen. Ich habe versucht, zu aktualisieren tsconfig.json mit dem typeRoots Attribute als here vorgeschlagen, aber ohne Erfolg. Sie können die Quelle für diese webpack Demo here finden.

Irgendwelche Ideen, wie diese Arbeit in WebStorm zu bekommen?

Answer 1

@ james-b

Ihre TS Regeländerung in webpack.common.js-Lader: [ 'awesome-Typoskript-loader', 'angular2-template-loader'] wie unten dargestellt:

Ihr webpack.common.js Code:

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' 
     } 
    ] 
}, 

Aktualisiert webpack.common.js Code:

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' 
     } 
    ] 
},