Unable to set a breakpoint within Angular constructor or OnInit method

I am currently facing an issue with my Angular application where breakpoints set in F12 tools in Chrome or IE are not working. I have a simple test case below:

export class LoginComponent implements OnInit {
    message: string;

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

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

Although I can see the log output in the console, setting a breakpoint does not trigger. I suspect this issue started a few days ago, possibly due to an upgrade of some library, Windows, or both browsers. I am unsure where to begin troubleshooting. The project is built with webpack, and I am accessing this component through routing:

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

It's worth noting that the button click handler breaks as expected.

Answer №1

At times, breakpoints may be missing because a debugger is unable to locate the source code or because the code is running too quickly for the debugger to keep up and anticipate where to stop. When this happens, the code becomes undebuggable.

Nevertheless, if you're able to comprehend JavaScript, you can set breakpoints directly in the transpiled JavaScript code. Occasionally, Webpack may incorrectly write paths to sources in the map file, leading to numerous troubleshooting challenges. However, this issue stems from the original question. In order to resolve it, consider trying a different browser or version of Webpack with the bugs rectified. If you identify a bug, make sure to report it to the appropriate bug tracking system.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The AWS amplify codegen is unable to locate any exported members within the Namespace API

Using AWS resources in my web app, such as a Cognito user pool and an AppSync GraphQL API, requires careful maintenance in a separate project. When modifications are needed, I rely on the amplify command to delete and re-import these resources: $ amplify r ...

Stop the inheritance of static components in a feature module by protecting the router-outlet

I am in the process of dividing my app into multiple feature modules. Currently, I am using only the router-outlet inside a component within a feature module. However, this approach brings along all the static components such as the navbar and footer. How ...

When attempting to dispatch an action with switchMap, it fails, while map successfully triggers the

I recently started utilizing ngrx and ngrx/effects. In the code snippet below, I encountered an issue where using switchMap with concatLatestFrom and dispatching an action fails, while using map seems to work perfectly fine. Any idea why? When trying to ...

Initiate a standalone test within VS Code specifically for an Angular service

I have a task with its task.spec. The task is a standard procedure, not specific to any particular platform, except for the fact that it is accessed via Dependency Injection. I want to run the tests of the task.spec directly from VS Code, without needing ...

Is it possible to deactivate the click event on an Angular mat table row?

Within my Angular mat table, I have implemented code that expands a table row when clicked. However, I now need to prevent certain rows from being clickable based on the "element.disable" property. <ng-container matColumnDef="id"> <th mat-hea ...

Develop your project with Angular 2 using the powerful Angular CLI build tool

Hello there! I am new to Angular 2 and recently developed a small project with the help of angular-cli for packaging. The dist folder was generated successfully. However, when I deployed the app to the server and tried to access the index.html page, it co ...

Why isn't Nodemon monitoring the directory in webpack-typescript-node.js?

Here are the contents of the package.json file for a TypeScript project using webpack and node.js: "scripts": { "build": "webpack", "dev:start": "nodemon --watch src --exec \"node -r dotenv/co ...

Unable to execute a join operation in TypeScript

I have an array of objects listed below var exampleArray = [{ "isAvailable": true, "receipent": [{ "id": "a6aedf0c34", "receipentName": "ABC" }, { "id": "a6aedbc34" ...

Angst with the Angular Command Line Interface

After installing the Angular CLI via the command prompt, I encountered an error related to @angular-devkit/build-angular. However, everything else seems to be working fine. Does anyone have any ideas as to why this might be happening? https://i.stack.im ...

How can Node / Javascript import various modules depending on the intended platform?

Is there a way to specify which modules my app should import based on the target platform in TypeScript? I am interested in importing different implementations of the same interface for a browser and for Node.js. In C++, we have something like: #ifdef wi ...

Angular Kendo UI - How to Rotate X-Axis Labels in a Bar Chart

On smaller screens, I am trying to rotate x-axis labels to prevent overlapping. EXAMPLE <kendo-chart *ngIf="!yearLoader" (seriesClick)="barClick($event)"> <kendo-chart-tooltip format="{0} events"></kendo-chart-tooltip> < ...

Return the subclass from the constructor function

class X{ constructor(input: string) { // do things } f() {console.log("X")} } class Y extends X{ constructor(input: string) { // do things } f() {console.log("Y")} } class Z extends X{ con ...

Using iframes in Angular 2/4's index.html

I'm currently working on an angular application and for session management, I've implemented OpenID Connect Session Management. I am attempting to inject iframes into the application. I need to include an iframe in my index.html as follows: < ...

Creating a Checkbox-enabled Muiv5 TreeView for an array of objects: Step-by-step guide

Currently, I am utilizing the muiv5 treeview component to construct a treeview dropdown. Unfortunately, the component does not have built-in checkbox support for selection/deselection. However, after conducting some research, I managed to find a somewhat s ...

Conditional application of Angular animations is possible

After implementing the fadein effect from Angular-Animations in my ASP.NET based Angular project, I encountered an issue where only the first row is faded-in while the other rows are not displayed when using *ngIf. Here is a snippet of the code: <ng-te ...

Guide to locating the recursive function in Node.js runtime

As a beginner in the world of node and angular development, I have encountered a major issue - "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory". Is there anyone who can help me identify the function ...

Using Ionic 3 to create a list view that includes buttons linked to the items clicked

I need assistance with modifying the button icon in a list layout: <ion-list inset *ngFor="let audio of event.audios; let i = index"> <ion-item> <div class="item-text-center item-text-wrap"> {{audio.fileName}} </div& ...

Having trouble getting webpack and babel to start using npm

Greetings, wonderful people of the internet! I am a newcomer to the enchanting world of programming and I am facing a perplexing issue. Although Webpack is trying to guide me towards the solution, I seem to be struggling with fixing it on my own. const pa ...

Using Angular 2's ngModel directive to bind a value passed in from an

Using [(ngModel)] in my child component with a string passed from the parent via @Input() is causing some issues. Although the string is successfully passed from the parent to the child, any changes made to it within the child component do not reflect bac ...

What is the way to utilize kafkajs' testHelpers module in my test cases?

I need guidance on how to write unit and integration tests for the code in my Typescript project that utilizes the kafkajs NPM package. The kafkajs project recommends using the testHelpers module for testing, which is referenced in its own unit tests. Howe ...