Angular-cli: Source map problems since [email protected]

Created on 9 Jun 2017  路  10Comments  路  Source: angular/angular-cli

Bug Report or Feature Request (mark with an x)

- [ X ] bug report
- [ ] feature request

Versions.


@angular/cli: 1.1.1
node: 6.10.2
os: win32 x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.1
@angular/compiler-cli: 4.1.3
@angular/language-service: 4.1.3

Visual Studio Code: 1.13.0
Debugger for Chrome: 3.1.2

Repro steps.

I have been successfully using Visual Studio Code with the extension Debugger for Chrome to debug my Angular project whilst using ng serve. Ever since I have bumped angular-cli to v1.1.1, I have noticed that the debugging stopped working. It used to work a week ago when the project was on v.1.1.0, suddenly not.

Breakpoints are ignored because generated code not found (source map problems?)

Can somebody help me pinpoint the reason for that? Included the debugger's trace log.

The log given by the failure.

vscode-chrome-debug.txt

Mention any other details that might be useful.


package.json
"dependencies": { "@angular/animations": "^4.0.0", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "@ngx-meta/core": "^0.4.0-rc.2", "@ngx-translate/core": "^6.0.1", "@ngx-translate/http-loader": "^0.0.3", "@types/decimal.js": "^0.0.30", "@types/nprogress": "^0.0.29", "@types/sprintf-js": "0.0.27", "algoliasearch": "^3.22.3", "algoliasearch-helper": "^2.20.1", "angular2-materialize": "^15.0.4", "core-js": "^2.4.1", "decimal.js": "^7.1.0", "ion-rangeslider": "^2.1.4", "jquery": "^2.2.4", "materialize-css": "^0.98.2", "ngx-cookie-service": "^1.0.7", "ngx-infinite-scroll": "^0.5.1", "nprogress": "^0.2.0", "rxjs": "^5.1.0", "sprintf-js": "^1.1.1", "zone.js": "^0.8.4" }, "devDependencies": { "@angular/cli": "~1.1.1", "@angular/compiler-cli": "^4.0.0", "@angular/language-service": "^4.0.0", "@types/jasmine": "2.5.45", "@types/node": "~6.0.60", "codelyzer": "~3.0.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-coverage-istanbul-reporter": "^1.2.1", "protractor": "~5.1.2", "ts-node": "~3.0.4", "tslint": "~5.3.2", "typescript": "~2.3.3" }

launch.json
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:4200", "webRoot": "${workspaceRoot}" } ] }

tsconfig.json
{ "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "baseUrl": "src", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2016", "dom" ] } }

2 (required) broken

Most helpful comment

Not a bug:
Here's what works with me for 1.1.1:

launch.json

      "sourceMapPathOverrides": {
        "webpack:///C:*": "C:/*"
      }

All 10 comments

Same problem here. I'm back to angular cli version 1.0.3 and chrome debugger is working now. I'm waiting for answers here before use the new version again.

Same here. Using 1.0.6 works ok

Not a bug:
Here's what works with me for 1.1.1:

launch.json

      "sourceMapPathOverrides": {
        "webpack:///C:*": "C:/*"
      }

@mm-q @sebasfiorent Can you confirm whether the solution provided by @LuckyMallari is working for you?

@Brocco It does.

Thank you so much LuckyMallari. Now my debug is working with the Angular Cli 1.1.1

Note for non windows platforms you'll want to remove the drive letter:

            "sourceMapPathOverrides": {
                "webpack:///*": "/*"
            }

It looks like there were some sourcemap source path issues when used with chrome. This PR should solve that and remove the need to manually override the paths. It also allows the source files to be found from within Chrome directly.

The problem remains when debugging through Docker using ng serve --host 0.0.0.0.

@angular/cli: 1.1.2
node: 6.10.3
os: linux x64
@angular/animations: 4.2.3
@angular/common: 4.2.3
@angular/compiler: 4.2.3
@angular/core: 4.2.3
@angular/forms: 4.2.3
@angular/http: 4.2.3
@angular/platform-browser: 4.2.3
@angular/platform-browser-dynamic: 4.2.3
@angular/router: 4.2.3
@angular/cli: 1.1.2
@angular/compiler-cli: 4.2.3
@angular/language-service: 4.2.3

launch.json configuratin file:

{
  "type": "chrome",
  "request": "launch",
  "name": "Client with Chrome",
  "url": "http://localhost:4200",
  "webRoot": "${workspaceRoot}"
}

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings