Question

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

我试图在Visual Studio 2017上调试一个打字稿应用程序（非Visual Studio代码），但是当我在.ts文件中插入一个断点时，visual studio告诉我： ＆＃34; 当前没有点击断点，没有可执行代码与此行相关联＆＃34;

我想我已尝试过所有互联网建议的解决方案，但没有任何帮助我解决这个问题，似乎没有任何工作。

实际上，这个问题只存在于一个项目中。

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

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

{
  "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配置文件内容如下：

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

最后一点，我正在使用 Microsoft.AspNetCore.SpaServices.Webpack; 来启用webpack热模块替换，在我的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

您是否有任何解决方案或疑难解答？

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

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

更新＃1

看起来像Visual Studio 2017和dot net v.2 +中微软的asp网络核心Web应用程序项目中集成的角度项目诞生了工作断点和调试选项。

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

一旦我更新了它们，它似乎有效。在那个应用程序中，断点有效！
但我无法找出原因......

Answer 1

我有同样的问题但是，正如你在更新＃1中所说的那样，新的Visual Studio适当的Angular项目提供了有效的调试。
在我的应用程序中，我发现更容易将软件包更新到最新版本，并使用工作断点复制旧项目。

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

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

实际上， SourceMapDevToolPlugin 提供 - 如果正确配置 - 实时映射，这使得可以使用断点。
您是否选择使用在线源地图。

您还应该设置属性：devtool: 'inline-source-map'
并启用UglifyPlugin的源图。

我发现的唯一缺点是：

自应用程序启动的第一个时刻起，断点不可用，您必须等待几秒钟
使用断点有点慢
使用chrome console禁用断点

Answer 2

将Webpack上下文设置为ClientApp目录（或TS中的App）为我完成了工作：

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

Visual Studio调试无法处理typescript（angular） - Visual Studio 2017不断跳过断点

2 个答案: