无法在ASP.NET核心模板包中调试Angular 2的* .ts文件

Question

为什么我无法在chrome开发工具上调试Angular 2的* .ts文件？

源窗口如下图所示。但无法找出webpack://文件夹。你能告诉我为什么吗？我需要找出* .ts文件的位置，我该怎么做？这在VS 2015社区版的调试模式下运行。

我使用ASP.NET Core Template Pack

tsconfig.json

{ 
    "compilerOptions": { 
    "moduleResolution": "node", 
    "target": "es5", 
    "sourceMap": true, 
    "experimentalDecorators": true, 
    "emitDecoratorMetadata": true, 
    "skipDefaultLibCheck": true, 
    "lib": [ "es6", "dom" ], 
    "types": [ "node" ] 
    }, 
    "exclude": [ "bin", "node_modules" ], 
    "atom": { "rewriteTsconfig": false } 
} 

Answer 1

OP的反馈：

这似乎是一个Chrome浏览器的问题（版本55.0.2883.87米） 。它在Canary上运行正常（版本57.0.2969.0 canary （64位））。

// ------------------------------------------ ------------------------------------

你有没有试过编写你的webpack的配置。这样dev.js ?:

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var webpack = require("webpack"); 
var HtmlWebpackPlugin = require("html-webpack-plugin"); 
var CleanWebpackPlugin = require('clean-webpack-plugin'); 
var path = require('path'); 

module.exports = { 
    entry: { 
     "polyfills": "./polyfills.ts", 
     "vendor": "./vendor.ts", 
     "app": "./app/main.ts", 

    }, 
    resolve: { 
     extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'] 
    }, 
    output: { 
     path: "./app_build", 
     filename: "js/[name]-[hash:8].bundle.js" 
    }, 
    devtool: 'source-map', // <-- THIS MAKE IT WORK TO DEBUG IN TOOLS 
    module: { 
     loaders: [ 
      { 
       loader: "babel-loader", 

       // Skip any files outside of your project's `src` directory 
       //include: [ 
       // "app_build", 
       //], 
       exclude: [ 
        path.resolve(__dirname, "node_modules") 
       ], 
       // Only run `.js` and `.jsx` files through Babel 
       test: /\.js/, 

       // Options to configure babel with 
       query: { 
        plugins: ['transform-runtime', 'babel-plugin-transform-async-to-generator'], 
        presets: ['es2015', 'stage-0'], 
       } 
      }, 
      { 
       test: /\.ts$/, 
       loader: "ts" 
      }, 
      { 
       test: /\.html$/, 
       loader: "html" 
      }, 
      //{ 
      // test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/, 
      // loader: "file?name=assets/[name]-[hash:6].[ext]", 
      //}, 
      { 
       test: /\.(png|jpg|gif|ico)$/, 
       //include: path.resolve(__dirname, "assets/img"), 
       loader: 'file?name=/assets/img/[name]-[hash:6].[ext]' 
      }, 
      { 
       test: /\.(woff|woff2|eot|ttf|svg)$/, 
       // exclude: /node_modules/, 
       loader: 'file?name=/assets/fonts/[name].[ext]' 
      }, 
      // Load css files which are required in vendor.ts 
      { 
       test: /\.css$/, 
       loader: "style-loader!css-loader" 
      }, 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract('css!sass') 
      }, 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin("css/[name]-[hash:8].bundle.css", { allChunks: true }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: ["app", "vendor", "polyfills"] 
     }), 
     new CleanWebpackPlugin(
      [ 
       "./app_build/js/", 
       "./app_build/css/", 
       "./app_build/assets/", 
       "./app_build/index.html" 
      ] 
     ), 
     // inject in index.html 
     new HtmlWebpackPlugin({ 
      template: "./index.html", 
      inject: "body" 
     }), 
     new webpack.ProvidePlugin({ 
      jQuery: 'jquery', 
      $: 'jquery', 
      jquery: 'jquery' 
     }) 
    ], 
    devServer: { 
     //contentBase: path.resolve(__dirname, "app_build/"), 
     historyApiFallback: true, 
     stats: "minimal" 
    } 
}; 

而且我tsconfig.json：（也许像异步等待你并不需要所有...我使用一些功能）

{ 
    "compilerOptions": { 
    "outDir": "app_build/", 
    "target": "es6", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "lib": [ 
     "es5", 
     "dom" 
    ], 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
    }, 
    "compileOnSave": true, 
    "exclude": [ 
    "node_modules", 
    "app_build/js", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
}