Cannot debug Angular 2's *.ts file on ASP.NET Core Template Pack

Question

Why I cannot debug Angular 2's *.ts file on chrome dev tools ?

Source window as shown below.But unable to find out the webpack:// folder.Can you tell me why ? I need to find out the location of *.ts files.How can I do that ? This is running on debug mode with VS 2015 community edition.

I'm using 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 }
}

Sampath · Accepted Answer · 2017-01-01 12:18:33Z

1

OP's Feedback :

This seems to be a Chrome browser's issue (Version 55.0.2883.87 m ) .It's working fine on the Canary (Version 57.0.2969.0 canary (64-bit)).

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

Have you tried to write your configuration of webpack.dev.js like this?:

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

And my tsconfig.json: (maybe you don't need all ...I'm using some feature like async await)

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

edited Jan 1, 2017 at 12:18

Sampath

66.2k70 gold badges327 silver badges461 bronze badges

answered Jan 1, 2017 at 11:23

federico scamuzzi

3,7781 gold badge19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Sampath Over a year ago

I cannot see the webpack.dev.js file on my project.It has webpack.config.js and webpack.config.vendor.js.Can you tell me why ?

federico scamuzzi Over a year ago

it's not a problem .. it's just how you config these files for your enviroments and how you feel comfortable .. i usually have 2 file (ove for dev and one for prod ) and one to switch between these 2 files

Sampath Over a year ago

are u telling me to add webpack.dev.js file to my project ?

federico scamuzzi Over a year ago

no... you have to o what you feel it's ok for your enviroment... i suggest to you how to write your webpack.js file (whatever you want to call it .. dev... config etc etc.. i only show to you how i did in my application

federico scamuzzi Over a year ago

try to put devtool: 'source-map' in your webpack file

|

Collectives™ on Stack Overflow

Cannot debug Angular 2's *.ts file on ASP.NET Core Template Pack

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related