CODEWITHSUNDEEP
angulartypescriptdebuggingwebpackvisual-studio-2017
user9557542
user9557542

Reputation:

Visual Studio debug not working on typescript (angular) - Visual Studio 2017 keeps skipping breakpoints

// ============================== see updates below ============================== //

I was trying to debug a typescript application on Visual Studio 2017 (NOT Visual Studio Code), but when i insert a breakpoint on a .ts file, visual studio tells me that: "the breakpoint will not currently be hit no executable code is associated with this line"

I think I've tried all of the internet suggested solutions but nothing helped me to solve that and nothing seems to work.

Actually, this problem persists just with a single project.

I mean, i've got an other project where i can debug typescript on visual studio 2017 with breakpoints and i'm able to use them on ts files, so i don't think it's a settings problem.

Now, my typescript debug settings are managed by tsconfig.json and i think this issue may be somehow caused by something wrong in it, or maybe in my webpack.config.js file. However, that's just a hypothesis. However: tsconfig.json content is as follows:

{
  "compilerOptions": {
    "target": "es5",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "types": [ "node", "jasmine", "core-js" ],
    "noEmitOnError": true
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules",
    "wwwroot/lib",
    "bin",
    "obj"
  ]
}

Webpack config file content is as follows:

const path = require('path');
const webpack = require('webpack');

module.exports = {
    context: __dirname,
    resolve: { extensions: ['.ts', '.js'] }, // .ts is first so that .ts files are prefered over js file, this ensures
    // that angular 2 components are passed through the angular2-template-loader and have their templates and styles inlined
    entry: {
        'polyfills': './App/polyfills.ts',
        'main': './App/main.ts'
    },
    output: {
        path: path.join(__dirname, './wwwroot/dist'),
        filename: '[name].js',
        publicPath: '/dist/'
    },
    module: {
        rules: [

            { test: /\.ts$/, include: /App/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
            { test: /\.html$/, use: 'html-loader?minimize=false' },
            { test: /\.css$/, use: ['to-string-loader', 'css-loader'] }
        ]
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        }),
        new webpack.optimize.UglifyJsPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
};

And, as a last note, i'm using Microsoft.AspNetCore.SpaServices.Webpack; to enable webpack hot module replacement, with this on my startup.cs:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            // HMR //
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                {
                    HotModuleReplacement = true
                });
            }
            // HMR //

//(...) do more stuff under here

Have you got any solution or troubleshooting for this?

[Let me know if you need more informations]

// =============================================================================== //

UPDATE #1

Looks like that the angular project integrated in microsoft's asp net core web application project in visual studio 2017 and dot net v.2+ is born with working breakpoints and debug option.

Unfortunately, there's just an other problem with that. It's NOT an angular 5 native app, it's an angular 4 app! Moreover, any package is up-to-date. Got to update each one manually.

Once I've updated them, it seems to work. In that app, breakpoints works!
But I can't find out why...

Upvotes: 0

Views: 4197

Answers (2)

Alex Buchatski
Alex Buchatski

Reputation: 306

Setting webpack context to ClientApp dir (or App in TS' example) did the job for me:

  context: path.join(__dirname, "ClientApp"),
  entry: {
    //'main': './ClientApp/main.ts'
    'main': './main.ts'
  }

Upvotes: 0

Deadpool
Deadpool

Reputation: 1121

I had the same problem but yes, as you said in Update #1, the new Visual Studio proper Angular project is provided with working debug.
In my app I found easier updating the packages to latest versions and copying my old project in the new one with working breakpoints.

But..if you read with attenction the webpack.config.js file in the new VS integrated angular app, you will certainly notice the following string:

        new webpack.SourceMapDevToolPlugin({
            filename: '[file].map', // Remove this line if you prefer inline source maps
            moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
        })

Actually, SourceMapDevToolPlugin provides - if configurated correctly - a real time mapping, which makes possible using breakpoints.
Your choice if using in line source maps or not.

You should also set the property: devtool: 'inline-source-map'
And enable UglifyPlugin's sourcemaps.

The only cons that I found out are:

  • breakpoints are not available since the first moment that the app starts, you have to wait a few seconds
  • using breakpoints is a bit slow
  • using chrome console disable breakpoints

Upvotes: 1

Related Questions