Question

我有一个使用gulp构建的角度应用程序。与大多数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"
        }
    ]
}

Answer 1

我有同样的问题。您需要找回rootDir，或提高所需的级别。

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

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

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

希望对您有帮助。

由于嵌入路径，在VS代码中找不到源映射

1 个答案: