Исходные карты не найдены в VS Code из-за встроенного пути - PullRequest
Новая
       24

Исходные карты не найдены в VS Code из-за встроенного пути

0 голосов
/ 22 мая 2018

У меня есть угловое приложение, построенное с использованием 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 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"
        }
    ]
}

1 Ответ

0 голосов
/ 28 августа 2018

У меня была такая же проблема.Вам необходимо вернуть rootDir или увеличить количество необходимых вам уровней. 

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

Это необходимо сделать с учетом индекса вашего проекта.В моем случае я сделал с учетом моего индекса, это было так: 

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

Я надеюсь, что это помогает.

...