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