Unable to set breakpoint on Firefox

[cm0s]

Versions

Angular CLI: 1.6.1
Node: 8.9.1
OS: linux x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.1
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

OS : Debian GNU/Linux 9 (stretch)

Repro steps

• Use a linux distrib (I have been able to reproduce the issue on a vanilla install of Debian 9 and also Ubuntu 17.10)
• Install nodejs (I tested with version 6 and also version 8) and npm
• Install last version of angular-cli (tested with 1.6.1). npm install -g @angular/cli@latest
• Create a new app ng new test-a
• Run the app ng serve
• Access the app with Firefox (57.0.2) (http://localhost:4200)
• Try to set a breakpoint in the app.component.ts or any other .ts file

All steps are run from a fresh install. No prior versions installed.
I also try with older version of Firefox, the problem is identical.

Observed behavior

In Firefox dev tool, when clicking in the margin of a line of code to set a breakpoint, the breakpoint automatically disappear. Setting breakpoints on .js files works.

Breakpoints work perfectly when using Chrome.

I tried accessing the app from other computers (one with a Debian distrib and another with a Windows 10) using ng serve --host [my public ip] command. Both client use the last Firefox version and the problem is the same. It's impossible to set a breakpoint.

When I run the ng serve --host [public ip] on a Windows 10 OS and try to access the app from Firefox I'm able to set breakpoints on the ts files. I try accessing the app from a Firefox installed on the Windows 10 local machine and also from a remote Debian computer. Both work fine.

A screen record showing how the breakpoint directly disappear just after I left click in the left margin.

I also tried remote debugging from Intellij Idea. Everything works fine when remote debugging Chrome. When remote debugging Firefox the breakpoints are never triggered.
I also tried typing a debugger; line in the code. The line doesn't stop the debugger on Firefox (it works on Chrome).

Desired behavior

Be able to set a breakpoint on a Linux browser when the ng serve command is ran on Linux OS.

[agasbzj]

Same problem here, Firefox57.0.4 on OSX 10.13.2, unable to debug angular5 project, breakpoint disappears immediately after adding it.

[Nomadzy]

Any news on this one ?
2019 update : the breakpoint is shown but FF dont stop on it ..

Angular/CLI 6
webpack
Firefox 64.0
Ubuntu 18.04

[Roy-Orbison]

This may be an issue with source mappings as well, but you should first ensure you eliminate the possibility of debugger preference corruption.

[esassaman]

I made a note to myself after this trick below fixed it for me, it's been a very long time since I've seen this problem and I can't confirm it at the moment, but give this a try, I'd love to know if it works:

about:config, toggle devtools.source-map.client-service.enabled. Open ff console with ctrl+shift+j and watch for sourcemaps error when trying to set a breakpoint. Maybe toggle sourcemaps option in settings too?

[mgechev]

Looks like a problem with old version of the CLI. Let us close the issue for now. If it's still relevant, please open a new ticket with steps to reproduce and a minimal demo. Thanks!

[angular-automatic-lock-bot]

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.}