由于嵌入路径，在 VS Code 中找不到源映射答案

【问题标题】：Source Maps not found in VS Code because of embedded path由于嵌入路径，在 VS Code 中找不到源映射
【发布时间】：2018-11-01 04:43:49
【问题描述】：

我有一个使用 gulp 构建的 Angular 应用程序。与大多数 Angular 应用程序一样，代码是用 TypeScript 编写的，然后编译为 Javascript。
生成的 Javascript 文件位于 TypeScript 文件旁边。源映射文件也位于同一文件夹中。
当我在 Chrome 中打开控制台并导航到其中一个 Javascript 文件时，Chrome 告诉我它能够检测到源映射。
当我尝试从 VS Code 中调试应用程序时，它会告诉我：

未验证断点，因为找不到生成的代码而忽略断点（源映射问题？）

现在，我做了一些挖掘，源地图包含这个标题：

{"version":3,"sources":["app/lib/_common/equipment/components/equipment-selection/equipmentSelection.component.ts"]

源映射文件不包含sourceRoot。如果我编辑源映射并删除路径并只保留文件名，VS Code 可以加载源映射并且调试正常：

{"version":3,"sources":["equipmentSelection.component.ts"]

我需要在配置中进行哪些更改才能生成正确的源映射？

gulpfile.js的相关部分：

gulp.task('typescript', ['lint'], () => {

    let sourcemaps = require('gulp-sourcemaps'),
        ts = require('gulp-typescript'),
        merge = require('merge2');

    let tsProject = ts.createProject('tsconfig.json');

    let tsResult = tsProject.src()
        .pipe(sourcemaps.init({}))
        .pipe(precompileNgx())
        .pipe(tsProject())
        .on('error', function () {
            gutil.log(gutil.colors.red("*** THERE IS AN ERROR IN YOUR TYPESCRIPT FILES ***"));
            gutil.log(gutil.colors.red("The code will not compile until this is fixed!"));
        });

    return merge([
        tsResult.dts.pipe(gulp.dest('./' + libPath)),
        tsResult.js.pipe(sourcemaps.write(".", {includeContent: true}))
            .pipe(gulp.dest('./'))
    ]);
});

tsconfig.json：

{
    "version": "2.4.2",
    "compilerOptions": {
        "rootDir": "./",
        "sourceRoot": "./app/",
        "module": "commonjs",
        "target": "es5",
        "noEmitHelpers": false,
        "sourceMap": true,
        "moduleResolution": "node",
        "strictNullChecks": true,
        "noImplicitThis": true,
        "noImplicitReturns": true,
        "noImplicitAny": true,
        "noFallthroughCasesInSwitch": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "inlineSourceMap": false,
        //"importHelpers": true,
        "noEmitOnError": true,
        "suppressImplicitAnyIndexErrors": true,
        "noStrictGenericChecks": true,
        "skipLibCheck": true,
        "lib": [
            "es2015",
            "dom"
        ]
    },
    "exclude": [
        "build",
        "node_modules",
        "app/jspm_packages"
    ]
}

launch.json:

{
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}\\app"
        }
    ]
}

【问题讨论】：

标签： angular typescript gulp visual-studio-code source-maps

【解决方案1】：

我遇到了同样的问题。你需要找回你的 rootDir，或者提高你需要的级别。

"compilerOptions": {
    "rootDir": "../../../../../../",

您需要考虑项目的索引来执行此操作。就我而言，我确实考虑了我的索引，它是这样的：

{"version":3,"sources":["index.ts"],... "sourceRoot":"../../../src"}

希望对你有帮助。

【讨论】：