debugging - TS breakpoints are not working after upgrading to Angular 6 in VS 2017

问题描述

I am currently using Angular 6, .NET core 2.1, VS 2017. Before upgrading to Angular 6, I was using Angular 4. Breakpoints in TS files were working fine. I have upgraded to Angular 6, after that none of the TS breakpoints are working.

Getting the below hint on the breakpoint.

The breakpoint will not currently be hit. No symbols have been loaded for this document.

Here is my packages.json file:

"scripts": {},
"devDependencies": {
"@angular/animations": "6.1.0",
"@angular/cli": "^6.1.1",
"@angular/common": "6.1.0",
"@angular/compiler": "6.1.0",
"@angular/compiler-cli": "6.1.0",
"@angular/core": "6.1.0",
"@angular/forms": "6.1.0",
"@angular/http": "6.1.0",
"@angular/platform-browser": "6.1.0",
"@angular/platform-browser-dynamic": "6.1.0",
"@angular/platform-server": "6.1.0",
"@angular/router": "6.1.0",
"@ngtools/webpack": "^6.1.1",
"@types/chai": "4.1.4",
"@types/jasmine": "2.8.8",
"@types/webpack-env": "1.13.6",
"angular2-router-loader": "0.3.5",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^3.0.0",
"awesome-typescript-loader": "5.2.0",
"bootstrap": "4.1.3",
"chai": "4.1.2",
"css": "2.2.3",
"css-loader": "1.0.0",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.12",
"expose-loader": "0.7.5",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.11",
"html-loader": "0.5.5",
"isomorphic-fetch": "2.2.1",
"jasmine-core": "3.1.0",
"jquery": "3.3.1",
"json-loader": "0.5.7",
"karma": "2.0.5",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.2",
"karma-webpack": "3.0.0",
"popper.js": "^1.12.9",
"preboot": "6.0.0-beta.4",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.12",
"rxjs": "6.2.2",
"style-loader": "0.21.0",
"to-string-loader": "1.1.5",
"typescript": "2.9.2",
"url-loader": "1.0.1",
"webpack": "^4.16.3",
"webpack-cli": "^3.1.0",
"webpack-hot-middleware": "2.22.3",
"webpack-merge": "4.1.3",
"zone.js": "0.8.26"
  },
  "dependencies": {
"ng-bootstrap": "^1.6.3",
"ngx-loading": "^1.0.14",
"ngx-pagination": "^3.1.1",
"npm": "^6.2.0",
"w3-css": "^4.1.0"
  }

Here is my webpack config file

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
    stats: { modules: false },
    context: __dirname,
    resolve: { extensions: ['.js', '.ts'] },
    output: {
        filename: '[name].js',
        publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
    },
    module: {
        rules: [
            { test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' },
            { test: /\.html$/, use: 'html-loader?minimize=false' },
            { test: /\.css$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
        ]
    },
    mode:'development',
    plugins: [new CheckerPlugin(),
    new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core/,
        path.resolve(__dirname, './ClientApp')
    )]
    //,
    //performance: {
    //    maxEntrypointSize: 512000,
    //    maxAssetSize: 512000
    //}
};

// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
    entry: { 'main-client': './ClientApp/boot.browser.ts' },
    output: { path: path.join(__dirname, clientBundleOutputDir) },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        })
    ].concat(isDevBuild ? [
        // Plugins that apply in development builds only
        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
        })
    ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
                exclude: ['./**/*.server.ts']
            })
        ])
});

// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
    resolve: { mainFields: ['main'] },
    entry: { 'main-server': './ClientApp/boot.server.ts' },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./ClientApp/dist/vendor-manifest.json'),
            sourceType: 'commonjs2',
            name: './vendor'
        })
    ].concat(isDevBuild ? [] : [
        // Plugins that apply in production builds only
        new AotPlugin({
            tsConfigPath: './tsconfig.json',
            entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
            exclude: ['./**/*.browser.ts']
        })
    ]),
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, './ClientApp/dist')
    },
    target: 'node',
    devtool: 'inline-source-map'
});

return [clientBundleConfig, serverBundleConfig];
};

Help me in fixing this issue.

标签： debuggingvisual-studio-2017angular6

debugging - TS breakpoints are not working after upgrading to Angular 6 in VS 2017

问题描述

解决方案

推荐阅读