我有一个使用gulp构建的角度应用程序。与大多数Angular应用程序一样,代码是用TypeScript编写的,然后编译成Javascript。
生成的Javascript文件位于TypeScript文件之外。源地图文件也位于同一文件夹中。
当我在Chrome中打开控制台并导航到其中一个Javascript文件时,Chrome告诉我它能够检测源地图。
当我试图从VS代码中调试应用程序时,它会告诉我:
未验证断点,由于未找到生成的代码而忽略断点(源代码映射问题?)
现在,我做了一些挖掘,源地图包含以下标题:
{"version":3,"sources":["app/lib/_common/equipment/components/equipment-selection/equipmentSelection.component.ts"]
源映射文件不包含
sourceRoot
.
如果我编辑源映射并删除路径,只保留文件名,VS代码可以加载源映射并正确调试:
{"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"
]
}
发射json:
{
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"sourceMaps": true,
"webRoot": "${workspaceRoot}\\app"
}
]
}