Chrome Not Responding to Angular5 Debugging

I'm facing an issue where I used to be able to set breakpoints in my Angular code using developer tools, and it would pause correctly. However, recently the network files are not being mapped to my local files properly. For a detailed explanation, please watch my video here (3 minutes long).

Edit:

Adding more information: When an error is logged in the console log and I click on the line number for Chrome developer tools to navigate to the exact location of the error, it takes me to the network file instead of my local file. This miscommunication prevents me from debugging efficiently. How can I instruct Chrome to establish the correct mapping between these files? It seems like this feature may have been removed or disabled.

angulargoogle-chrometypescriptsource-mapsgoogle-developer-tools

Answer №1

After encountering a problem in my Angular 9 project, I found a solution that did the trick. It turns out that the issue was caused by a setting in the angular.json file called "optimization" set to true. This setting was creating optimized files without debugger support. To resolve this, I simply changed it to false using "optimization": false.

Answer №2

Recently, I encountered a problem similar to this one. It turned out that active chrome overrides on files were causing issues with source mapping, making it difficult for me to debug my application effectively. Removing all of the overrides helped restore proper debugging functionality.

Answer №3

Compatible with:

    // Utilize IntelliSense to learn more about the possible attributes.
    // Focus to display descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://127.0.0.1:4200/",
            "webRoot": "${workspaceFolder}/"
       
        }
    ]

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

Code coverage analysis in a node.js TypeScript project consistently shows no coverage metrics

I'm currently working on a backend TypeScript project where I'm aiming to obtain coverage reports for unit test cases. However, Jest is returning empty coverage reports both in the terminal and in the HTML report, with no information provided. Ev ...

javascriptnode.jstypescriptjestjscode-coverage

Manage the recently implemented features with TypeScript in IntelliJ

When using IntelliJ with TypeScript and referencing a new function in an .html file, IntelliJ has the option to automatically add this function to the corresponding .component.ts file. For example: <div *ngIf="ifConditionIsTrue()"> Intell ...

typescriptwebstorm

The module 'LoginModule' encountered an error when importing the unexpected value 'LoginRoutingModule'

Greetings! I am currently working on a learning project with Angular 2, where I am developing a test application. While attempting to eagerly load the LoginModule module, I encountered an error message that states: Unexpected value 'LoginRoutingModul ...

angular

Exploring the nativeElement property of a customized Angular HTML element

In my Angular Jasmine Unit Test, I am testing a third-party slider component in my application using the following code snippet: Here is the HTML: <ui-switch id="EditSwitch" name="EditSwitch" (change)="togglePageState()"></ui-switch> And her ...

javascriptangularunit-testingtypescriptjasmine

Leveraging Generic Types in React with TypeScript for Dynamically Assigning HTML Props based on Element Tags

I am frequently in need of a component that is essentially just a styled HTML tag. A good example is when I want to create beautifully styled div elements: // Definitions const styledDiv = (className: string) => { const StyledDiv = React.FC<HTMLA ...

htmlreactjstypescriptgenerics

Access the elements within arrays without using the square brackets

I am trying to access data from a list, but I am having trouble using square brackets []. The getTalonPaie function calls the get method from the HttpClient service and returns an observable with multiple values. However, when I try to store these values i ...

javascriptangulartypescript

Guide to encapsulating an asynchronous function in a promise

I am in need of wrapping an asynchronous function within a promise to ensure synchronous execution. The reason behind this is that I must obtain a result from the asynchronous function before proceeding with the program's execution. Below is the rele ...

javascripttypescriptpromisepixi.js

Changes are not being detected in new Angular 2 files

Currently, I am enhancing an Angular 2 project by incorporating new modules. However, the changes I made in these files are not being recognized within the project. I have attempted to research how change detection functions in Angular 2, but have not bee ...

javascriptangular

Customize the columns of your Angular Material 2 table by defining them using TemplateRef and ngTemplateOutlet

Looking to create a flexible material table with the ability to utilize TemplateRef along with ngTemplateOutlet for generating columns. Check out this demo where I have employed the cards component within my custom material-table component. Inside the card ...

htmlangularangular-material2angular-material-table

Creating a OneToMany relationship in NestJS entity model

In my current project with NestJS, I am working on defining entity fields. While I have successfully defined a ManyToOne relation, I am facing difficulties in setting up the syntax for a OneToMany relation to match the structure of my other relationships. ...

node.jstypescriptone-to-manynestjstypeorm

Error: npm encountered a loop error while attempting to download

Looking to implement Google login, I attempted the following command: npm install --save angularx-social-login. Unfortunately, it returned an error: D:\proj>npm install --save angularx-social-login npm ERR! code ELOOP npm ERR! syscall open npm ERR ...

angular

Trouble locating DOM element in Angular's ngAfterViewInit()

Currently, I am attempting to target a specific menu item element within my navigation that has an active class applied to it. This is in order to implement some customized animations. export class NavComponent implements AfterViewInit { @ViewChild(&a ...

javascriptangularangular-routing

Struggling with TypeScript Errors while Extending Theme Colors in Material UI React using TypeScript

Just started with typescript and feeling a bit lost, can someone offer some guidance? I'm working on a React project using material-ui with typescript. To add a new color the correct way, it needs to be added to a theme: const theme = createMuiTheme({ ...

reactjstypescriptcolorsmaterial-uithemes

Display Bootstrap Modal Box automatically when Angular 8 App Loads

I am facing an issue with launching a modal dialog on page load in my Angular 8/Visual Studio project. While it works perfectly fine with the click of a button, I am unable to make it load automatically on page load. I have tried using *ngIf but it doesn&a ...

angularbootstrap-4modal-dialog

Angular 2 Date Input failing to bind to date input value

Having an issue with setting up a form as the Date input in my HTML is not binding to the object's date value, even though I am using [(ngModel)] Here is the HTML code snippet: <input type='date' #myDate [(ngModel)]='demoUser.date& ...

htmlangulartypescriptangular2-forms

Retrieve fresh information every 30 seconds utilizing the useQuery hook in React

I am utilizing '@tanstack/react-query' to retrieve data in my React + Typescript application. Below is a snippet of my code, where I aim to fetch metric data every 30 seconds import { useQuery } from '@tanstack/react-query'; import ...

reactjstypescriptreact-querytanstackreact-query

Encountering issues with Angular 4 dynamic routerlinks on server/localhost, while they work perfectly when the routerlink is

My goal is to create a dynamic navigation menu using a navigation menu service and component. To start, I built a prototype of the navigation menu with hardcoded HTML code like this: <nav> <md-list> <md-list-item rout ...

angularangular-router

After updating the file path, the Next.Js module couldn't be located: Module not found – Unable to

After relocating the EmptyTable.tsx file from its original directory at views/forms-tables/tables/react-table/EmptyTable to a new location at components/Tables/EmptyTable, I encountered a persistent issue. Despite updating the import path in my code to mat ...

reactjstypescriptnext.js

Constantly visible scrolling feature on material side navigation

Is there a way to keep the scroll bar in the sidenav always visible, even when the content is within the Y axis limits? This would prevent the scroll bar from fading in and out every time I open or close one of the mat-menu-items that function as accordio ...

angularangular-materialsidenav

Choose a single asset from the list of values stored in the Map

I'm looking to implement something similar to the following: let myMap = new Map<string, any>(); myMap.set("aaa", {a: 1, b: 2, c:3}); myMap.set("bbb", {a: 1, b: 2, c:6}); myMap.set("ccc", {a: 1, b: 2, c:9}); let cs = myMap.values().map(x => ...

javascripttypescriptdictionary