TypeScript stack trace not displayed in Angular stack trace when in development mode

Currently, I am working on a project using a 'fuse angular template' in order to speed up development and avoid the need to write numerous components.

  • To get started, clone the repository from https://github.com/deanhiller/ts-prototype
  • Please note that the main branch is regularly updated, but there is also a branch "angularTheme" which may throw exceptions.
  • cd client
  • npm install
  • npm run dev (this will open the browser)
  • Open the developer tools console

Once the GUI is displayed, click on sign in and observe as it throws and logs an exception. The stack trace is in JavaScript, not TypeScript. I have created a new Angular project (same version, 18) where this functionality works correctly. Despite my efforts to compare and port the code, the stack trace breaks along the way.

  • What steps should I take to debug this issue?
  • How exactly do JavaScript sourcemaps and TypeScript sourcemaps function? Are there intermediary files that I should be able to access for inspection?

I have also attempted to compare and merge with a base React project, but so far, I have had no success.

angulartypescript

Answer №1

Wow, I am amazed! It seems that everything runs smoothly when using Observables, but when I try to use Promises with async/await, it ends up breaking and only displaying the JavaScript stack trace :(

UPDATE: The original Angular setup works fine with stack traces and async/await, as I just confirmed with version 18.1.0. However, for some reason, the template I purchased disrupts this functionality, and I am unable to pinpoint the exact issue causing the stack traces to fail.

This situation is incredibly frustrating because async/await allows for the creation of code that appears synchronous, making it more readable and maintainable. It's a difficult decision to make - sacrificing TypeScript stack traces for readability or sacrificing readability for reliable stack traces.

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

How should one effectively manage the use of dynamic `.apply()` in TypeScript?

Exploring a particular code snippet, it defines an object with three methods, each requiring a different number of arguments. The code then dynamically calls one of these methods based on a variable's value using the apply() method along with an args ...

typescripttypescript-typings

The button values fail to adhere to the specified input length in the Point of Sale application built with Angular

Having an issue with my Point of Sale app. When I enter values using the keyboard, it respects the maxLength limit, but when I enter values using the buttons, it does not respect the limit. Any ideas on how to solve this? <div mat-dialog-content> < ...

angular

What is the best way to run tests on this asynchronous function using Jasmine?

My role in the service is listo: function () { var promiseResolved = $q.defer(); setTimeout(function () { promiseResolved.resolve(true); }, 2000); return promiseResolved.promise; } During my testing ...

javascriptangularasynchronousjasmine

Approach continuously activates database

The LanguageService class is injected into my components in order to retrieve translations for the component. When a key is not found in the Map, it fetches translations from the server and stores them in a Map. If the key is already in the Map, it retrie ...

angulardictionaryrxjsangular-services

Using a HOC property within a child component in Typescript is not allowed

Challenge A component I've wrapped with a common HOC used in previous projects is causing issues. I cannot access the HOC's prop currentBreakpoint within the wrapped component because it needs to be defined in the component's type: Propert ...

reactjstypescript

Using TypeScript to structure and organize data in order to reduce the amount of overly complex code blocks

Within my TypeScript module, I have multiple array structures each intended to store distinct data sets. var monthlySheetP = [ ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', &apo ...

typescript

Modifying an onClick handler function within a react element located in a node module, which points to a function in a prop declared in the main Component file

I have successfully implemented the coreui CDataTable to display a table. return ( <CDataTable items={data} fields={fields} ... /> ) Everything is working smoothly, but I wanted to add an extra button in the header of the C ...

javascriptnode.jsreactjstypescriptnpm

The type 'Observable<Student[]>' is lacking important properties such as id, first_name, last_name, English, and more within the type 'Student'

I have developed two components (table and form) and I am working on transferring data from the form component to the table component when editing. The code that I have written is currently throwing an error. However, when I check the console using console ...

angularservicecrud

Unable to access or modify NGXS state within an Angular 8 NativeScript application

After gaining experience with Angular, I decided to experiment with the NGXS data store while following a NativeScript tutorial. Despite trying several NGXS tutorials, I couldn't get the state to update without any errors from Android Studio or NS. N ...

angularnativescriptngxs

Typescript excels at gracefully handling cases where an element is not found

While working with Typescript-Protractor Jasmine, I encountered an issue where the test case (the 'it' block) is not failing when an element is not found. Instead, it shows an UnhandledPromiseRejectionWarning but still marks the script as passed. ...

typescriptjasmineprotractor

Obtaining access to a FormGroup instance when connected to a <form> through a directive

Question about HTML Form Directive <form [formGroup]="form"> <input type="text" formControlName="name" class="form-control" /> <div *errorFeedback name="name" class="error-feedback"></div> </form> Exploring Form Directiv ...

angularangular-directive

Exploring two main pages, each with tabs displaying two negative behaviors

I developed an app with an ion-footer at the bottom of each root page : <ion-footer> <ipa-footer-buttons></ipa-footer-buttons> </ion-footer> The <ipa-footer-button> component is structured as follows: html: <ion-toolb ...

angulartypescriptionic3

What is the best way to specify a function parameter as the `QUnit` type using TypeScript in conjunction with QUnit?

In my project, which is partially written in TypeScript and licensed under MIT, I am utilizing QUnit. I have some TypeScript functions that require QUnit as a parameter, and I would like to define their types based on its interface from the typings. For e ...

javascripttypescriptqunit

Tips for showing nested array values in Angular 8

I'm new to using angular and I'm attempting to display values from an array within another array in a table format. Here is my JSON array that I'd like to display in rows: { "data": { "Influencer": [ { ...

arraysangulartypescriptobjectangular8

Obtaining the count of a specific column in Angular 6 by grouping objects based on the same value in an array

In TypeScript, I have an array of objects and I am using a foreach loop. The array contains 2 columns with a progress value of 100, while the rest have values less than 100. My goal is to calculate the count of columns with a progress value of 100, which ...

htmlangulartypescript

Is there a way to programmatically activate the iOS unavailable screen?

Is there a way to programmatically simulate the iPhone unavailable screen after entering the wrong password multiple times, with a specific time delay? I am searching for an API that can remotely lock my iPhone screen so that it cannot be unlocked by me. ...

iostypescriptreact-nativemobilerect

When using Angular, a service can be declared in the viewProviders of the parent component and then accessed in the viewProviders of the child

Imagine a scenario where there is a parent component called AppComponent, a directive named MyDirective, and a service named SimpleService. In this case, MyDirective is utilized in the template of AppComponent and injects SimpleService using the Host deco ...

angulartypescriptweb-frontend

Transferring Information Between Components

After logging into my login component, I want to pass data to my navbar component but unfortunately, my navbar content does not update. The navbar component is located in the app-module while the login component is in a separate module. I attempted to us ...

angulartypescriptangular8

Hearken to the modifications in the header of ag-grid

I referenced this example to create a custom header for my https://stackblitz.com/edit/clabnet-ag-grid-rich. Here is how I made modifications to it: I added a button that opens a modal popup to edit the header of a column. Everything works correctly, but ...

javascriptangularag-grid

Ways to bypass HostListener in Angular 2

In the process of developing a page with animations triggered on scroll, I encountered the challenge of ensuring that the animations only occur when the corresponding element is visible on the viewport. Utilizing Angular2 for this task led me to investigat ...

javascripthtmlangulartypescriptangular2-template