无法在Angular构造函数或OnInit中放置断点

Question

I have an Angular application, and I am trying to set a breakpoint in F12 tools in Chrome or IE. I have simple test case:

export class LoginComponent implements OnInit {
    message: string;

    constructor(private router: Router) { 
        console.log("Login Constructor");
    }

    ngOnInit() {
        console.log("Login OnInit");
    }
}

I see log output in the console, but setting a breakpoint doesn't work. I think it stopped working a few days ago (not sure if it was an upgrade of some library, or Windows, or both browsers). Don't even know where to start looking. The project is built with webpack, and I am getting to this component via routing:

const appRoutes: Routes = [
{
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
},
{
    path: '/login',
    component: LoginComponent
}
...
]

Note, that button click handler breaks as expected.

Answer 1

Sometimes it's missing to breakpoint because a debugger doesn't know the location of the source code or the code is executing faster than debugger can imagine a breakpoint. In this case the code is not debuggable.

However you can set breakpoint directly to the transplitted javascript code if you can understand the javascript. Webpack sometimes writes a wrong path to the sources in the map file, so you have a lot troubles to fix them. But this issue outgoing from the original question. What you have to do is to try a different browser or version of Webpack where the bugs are fixed. If you know it a bug you should submit it to the corresponding bugtracking system.