Source maps are generated for Angular elements during the compilation process, which are then utilized when the elements

In our current project, we are utilizing Angular elements to generate widgets that are then displayed in a separate host web application. This host app dynamically renders the web components from the Angular elements application and showcases them within a layout.

The compiled and minified output of the Angular elements app is stored on a different server compared to the host app, as part of our microservices architecture.

Our main challenge lies in maintaining functional source maps for the compiled Angular elements project so that we can effectively debug with references back to the original TypeScript source files. Currently, we are only able to debug by 'pretty printing' the minified file, which is limiting our debugging capabilities. While we can include the source maps, the issue is that the source tree remains invisible, making it impossible to set breakpoints.

We aim to be able to view the source files tree in the developer tools and establish breakpoints in the TypeScript code for more efficient debugging.

If anyone has any suggestions on how to approach this issue, your input would be highly appreciated.

angulartypescriptangular-elements

Answer №1

After some experimenting, I discovered that by referencing the following link: https://webpack.js.org/configuration/devtool/

Upon installing the package and configuring it to use 'eval' during the build process, I successfully viewed my TypeScript source files in the developer tools.

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

What is the best way to showcase a standalone JSON object within the template?

I have a detailed component that is designed to show the 5-day forecast for a specific city. I have successfully retrieved the data using the http.get(Url) method. However, I am unsure of how to bind this JSON data to my view. I am familiar with displayi ...

jsonhttpangulartypescriptrxjs

How to format numbers in Angular without a leading zero using the decimal pipe?

Is it possible to format decimal numbers in Angular without displaying a leading zero? I want to display statistics such as baseball batting averages in the format of .xxx instead of 0.xxx. The exception is when the average is equal to or greater than 1.0 ...

angularangular-pipe

Unable to utilize class identifiers in TypeScript because of 'incompatible call signatures' restriction

Following the execution of relevant yarn add commands, the following lines were added to the packages.json: "@types/classnames": "^2.2.7", "classnames": "^2.2.6", Subsequently, I incorporated these lines into my typescript files: import * as classnames ...

typescript

The FirebaseX Ionic native plugin received 2 arguments instead of the expected 3-4

Trying to implement Firebase Phone Auth with the FirebaseX plugin, I encountered an issue. Here is the code snippet I used: async getVerificationCode(): void { const res:any = await this.firebaseX.verifyPhoneNumber('+16505553434', 60); ...

angulartypescriptfirebaseionic-frameworkcordova-plugins

I am looking to implement a feature where a new subProject is assigned a unique identifier and automatically added to the list of subProject

Hey there! I recently developed a functionality in my Project where selecting a subProject causes it to move to the top of the list. What I'm aiming for now is to automate the process of assigning an id to the new subProject when added, so that the su ...

htmlangulartypescript

Building a loading spinner in Angular 11: Step-by-step guide

Looking to develop a loading feature using Angular 11. Whenever data is being loaded, I'd like my loading-component to show, otherwise other components should function normally. Can someone provide guidance on how to achieve this? ...

angularloadingangular11

TypeScript Compile Error: The property is not available in the 'IStateParamsService' type

My client project heavily utilizes TypeScript. Currently, I am encountering a technical issue. Within my HTML code, I have an anchor tag as shown below: <a class="btn btn-default mrm" ui-sref="course-detail({courseId: '{{c.Id}}'})">Detail ...

javascriptangularjstypescriptangular-ui-routerdefinitelytyped

Utilizing CSS for creating dynamic columns within a Bootstrap row

Is there a way to dynamically change the background color of each section in a bootstrap row based on percentages passed through? For example, if I pass in percentages of 30, 40, 20, and 10, the divs should appear in green, red, yellow, and purple respecti ...

cssangulartwitter-bootstrap-3less

Is it possible to add additional text to an input field without modifying its existing value?

I have a numerical input field labeled "days" that I want to add the text " days" to without altering the actual numerical value displayed. <input type="number" class="days" (keyup)="valueChanged($event)"/> Users should only be able to edit the num ...

htmlcsstypescriptinput

My function won't get called when utilizing Angular

My Angular code is attempting to hide columns of a table using the function shouldHideColumn(). Despite my efforts, I am unable to bind my tags to the <th> and <td> elements. An error keeps popping up saying Can't bind to 'printerColu ...

javascriptangulartypescript

Issue with material table not showing data

Problem I've been working on integrating a material design table into my project, but I'm running into an issue where the data isn't showing up. I followed the example provided here but all I see is a single vertical line on the page: https ...

javascriptangular

How can I customize a Vue component slot in Storybook 8.0.6 using Vue 3.4 and Typescript to display various subcomponents within a story?

Incorporating a variety of sub-components into my Vue 3 component based on context is proving to be a challenge. Utilizing slots seems to be the solution in Vue 3, but I'm struggling to make it work within Storybook 8, which I'm using to showcase ...

typescriptvuejs3storybookvuejs-slots

Extract a selection from a dropdown menu in ReactJS

I have multiple cards displayed on my screen, each showing either "Popular", "Latest", or "Old". These values are retrieved from the backend. I have successfully implemented a filter option to sort these cards based on popularity, age, etc. However, I am u ...

javascriptreactjstypescriptdrop-down-menufiltering

Create a SHA512 hashing algorithm using Angular framework

Is there a way to hash a string using SHA512 in Angular 2+? I have searched for libraries or functions to do so but haven't found any. Can you suggest a solution for this? ...

angulartypescriptsha512

Can the push() method be utilized to insert an element into an observable array?

I've initialized an array of type string called products using the Observable interface as shown below: products: Observable<string[]>; Now, I need to add elements to the products array without using the subscribe method. Unfortunately, the nor ...

arraysangulartypescriptobservable

Replacing the '+' character with a space in HttpParams within Angular 6

When passing a JSON object using HttpParams, the + character is automatically converted to a space before being sent to the backend. Despite trying multiple solutions, I have been unable to resolve this issue for a JSONObject string. this.updateUser({"nam ...

jsonangulartypescriptencoding

Angular attribute directive accesses a sibling attribute reference

Attempting to create an attribute directive named pagingContext that will work alongside the angular material sort directive matSort. The concept is to have an element structured like: <table matSort [pagingContext]="pagingContext"> With a directi ...

angularangular2-directives

Typescript is failing to return nested types when attempting to return a nested object

My goal is for my function to return a nested type of Content, but it's not working even though the type that should be returned is known. Let's take a look at an example: type Content = { some: { extra: string; prop: number; ...

typescript

The issue arises in ts-jest nestjs where there is an attempt to access properties of an undefined

Creating an application using NestJS and utilizing ts-jest for e2e testing. For the code repository, visit: https://github.com/redplane/jest-issue A controller is set up with the following structure: @Controller({ path: 'api/shape', scope: S ...

typescriptjestjsnestjse2e-testingts-jest

Obtaining Data from an Array with Reactive Forms in Angular 4

Just starting out with Angular 4 and trying to figure out how to populate input fields with information based on the selection made in a dropdown. <select formControlName="selectCar" class="form-field"> <option value="">Choose a car&l ...

javascriptangular