Angular Visual Studio调试无法使用typescript（角度）-Visual Studio 2017一直跳过断点

我试图在Visual Studio 2017上调试typescript应用程序（不是Visual Studio代码），但当我在.ts文件上插入断点时，Visual Studio告诉我： “当前不会命中断点。没有与此行关联的可执行代码。”

我想我已经尝试了所有互联网建议的解决方案，但没有任何帮助我解决这个问题，而且似乎没有任何效果

实际上，这个问题只在单个项目中存在

我的意思是，我还有一个项目，我可以在visual studio 2017上调试带有断点的typescript，并且我可以在ts文件上使用它们，所以我认为这不是设置问题

现在，我的typescript调试设置是由tsconfig.json管理的，我认为这个问题可能是由于它中的某些错误，或者可能是我的webpack.config.js文件中的错误引起的。然而，这只是一个假设。 然而： tsconfig.json内容如下：

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

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

网页包配置文件内容如下：

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

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

最后一点，我使用的是Microsoft.AspNetCore.SpaServices.Webpack要启用网页包热模块更换，请在my startup.cs上使用此选项：

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()
    ]
};

您对此有什么解决方案或疑难解答吗

[如果您需要更多信息，请告诉我]

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

---

更新#1

看起来，集成在visual studio 2017和dot net v.2+中的microsoft asp net核心web应用程序项目中的angular项目天生就具有工作断点和调试选项

不幸的是，这还有另一个问题。它不是angular 5原生应用程序，而是angular 4应用程序！此外，任何包都是最新的。必须手动更新每一个

一旦我更新了它们，它似乎就起作用了。在那个应用程序中，断点可以工作！

---

但是我不知道为什么…

我也有同样的问题，但是是的，正如您在更新#1中所说，新的VisualStudio项目提供了工作调试。
在我的应用程序中，我发现将包更新到最新版本和在新版本中复制我的旧项目（带有工作断点）更容易

但是..如果您仔细阅读新VS integrated angular应用程序中的webpack.config.js文件，您肯定会注意到以下字符串：

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

实际上，SourceMapDevToolPlugin提供了一个实时映射（如果配置正确的话），这使得使用断点成为可能。
您可以选择是否使用内嵌源映射

您还应该设置属性：

devtool:“内联源代码映射”

并启用UglifyPlugin的源地图

我发现的唯一缺点是：

• 从应用程序启动的第一刻起，断点就不可用，您必须等待几秒钟
• 使用断点有点慢
• 使用chrome控制台禁用断点

---

将网页包上下文设置为ClientApp dir（或TS示例中的应用程序）为我完成了以下工作：

        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
        })

---

无法在Typescript上设置断点，因为生成的脚本是在浏览器上执行的，而不是在VS代码实例中执行的。您必须在浏览器的sourcemaps中设置断点。@chrispy谢谢您……但是，在visual studio 2017上的其他angular应用程序中，我可以在.ts文件上设置断点，它们工作正常。这怎么可能呢？我的意思是，为什么我可以把断点放在那个应用程序的typescript文件上，而不能放在另一个？我是说，一定有办法让它们发挥作用，我think@chrispy我开始认为（但这只是一个假设），断点可以在另一个项目上工作，这要归功于Web包的AngularCompilerPlugin插件（来自

（'@ngtools/Webpack'）。AngularCompilerPlugin

）。在你看来，这个假设有意义吗？PS：我用的是Visual Studio 2017，不是Visual Studio code我用的是Angular 5，项目中没有

webpack.config.js

文件。@Bigeyes我的答案已经过时了（而且问题似乎也过时了，OP也关闭了他/她的帐户，所以…），因为从Angular 4（如果我没记错的话），webpack.config是隐藏的。您可以使用

ng eject

命令将其弹出，但请相信我，编辑webpack.js是一个雷区，就我个人而言，我不想碰它。顺便说一下，如果你正在寻找一种调试angular应用程序的方法，我建议你使用chrome的devtools@Bigeyes简言之，要使用ChromeDevtrools进行调试，只需打开Chrome的控制台并转到“源代码”选项卡。然后，在左树状视图中查找“webpack”元素并将其展开。然后展开dot文件夹（“.”），从那里您可以调试整个应用程序，或者至少调试已加载的模块（如果您使用延迟加载）。但最终它依赖于Chrome开发工具，所以在我看来，使用Chrome开发工具似乎是最好的选择。实际上，我尝试了端口4200，但它不起作用。Nut它在

launchsetting.json

IR/Edge中的端口仍不工作。我下载了Visual Studio代码的chrome调试器（）。然后我在VisualStudio中使用chrome调试器进行调试（不是VisualStudio代码）。非常有趣的是，如果我没有针对VisualStudio代码的chrome调试器，那么在VisualStudio中使用chrome调试器（不是VisualStudio代码）失败了。