// ============================== see updates below ============================== //
While attempting to debug a TypeScript application in Visual Studio 2017 (NOT Visual Studio Code), I encountered an issue where inserting a breakpoint on a .ts file resulted in the message: "the breakpoint will not currently be hit no executable code is associated with this line"
I have tried various solutions recommended online, but none of them have resolved the issue. This problem seems to be specific to a single project.
It's worth noting that I have another project where debugging TypeScript in Visual Studio 2017 works perfectly fine with breakpoints functioning as expected, indicating that it may not be a settings issue.
Currently, my TypeScript debug settings are controlled by tsconfig.json, and I suspect that there might be an error within that file or perhaps in my webpack.config.js file. However, this is just a speculation at this point. The content of tsconfig.json 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"
]
}
The content of the webpack config file 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()
]
};
Lastly, I am using Microsoft.AspNetCore.SpaServices.Webpack; for enabling Webpack hot module replacement with the following setup in 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 //
//(...) additional configuration below
If you have any insights or troubleshooting tips for this issue, please let me know!
[Feel free to request more information]
// =============================================================================== //
UPDATE #1
It appears that the Angular project integrated into Microsoft's ASP.NET Core web application project in Visual Studio 2017 with .NET v.2+ comes with working breakpoints and debugging options out of the box.
However, there's a new challenge – the project is running on Angular 4 instead of Angular 5, requiring manual updates for each package. After updating them, the breakpoints seem to work without clear explanation...