Navigating the intricacies of debugging sub-domains in Angular projects using Visual Studio Code (VS

Currently working on a massive project utilizing micro-services. The unique design for clients/tenants requires visiting their specific subdomain to select a particular tenant. For example, https://ClientA.localhost:4200 and https://ClientB.localhost:4200. Additionally, each product has a different port number.

While attempting to debug, encountered unbound breakpoints and received the following errors in the debug console:

Could not read source map for https://clienta.localhost:4200/polyfills.js: Unexpected 503 response from https://clienta.localhost:4200/polyfills.js.map: getaddrinfo ENOTFOUND clienta.localhost
Could not read source map for https://clienta.localhost:4200/runtime.js: Unexpected 503 response from https://clienta.localhost:4200/runtime.js.map: getaddrinfo ENOTFOUND clienta.localhost
Could not read source map for https://clienta.localhost:4200/main.js: Unexpected 503 response from https://clienta.localhost:4200/main.js.map: getaddrinfo ENOTFOUND clienta.localhost
Could not read source map for https://clienta.localhost:4200/styles.js: Unexpected 503 response from https://clienta.localhost:4200/styles.js.map: getaddrinfo ENOTFOUND clienta.localhost
Could not read source map for https://clienta.localhost:4200/scripts.js: Unexpected 503 response from https://clienta.localhost:4200/scripts.js.map: getaddrinfo ENOTFOUND clienta.localhost
Could not read source map for https://clienta.localhost:4200/vendor.js: Unexpected 503 response from https://clienta.localhost:4200/vendor.js.map: getaddrinfo ENOTFOUND clienta.localhost

Launching https://localhost:4200 will attach, however, the service will not function correctly.

Have tried various browser launching settings, attaching to an existing browser, adjusted TypeScript and Angular settings, experimented with multiple suggested source-map configurations, but unfortunately, nothing seems to work. It's frustrating that I can access (such as) 

https://clienta.localhost:4200/polyfills.js.map
and receive a map in response; it just adds insult to injury.

Any suggestions or ideas?

angulartypescriptdebuggingvisual-studio-code

Answer №1

After days of frustration and head-bashing, it finally dawned on me - the solution was right in front of my eyes all along.

I omitted a crucial detail in my initial query; make sure to add your subdomain URLs pointing to home in your hosts file.

For example:

127.0.0.1    clienta.localhost
127.0.0.1    clientb.localhost

The key was including the following snippet in settings.json in VS Code due to my usage of HTTPS.

"debug.javascript.resourceRequestOptions": {
    "https": {
        "rejectUnauthorized": false
    }
}

Don't forget to flush your DNS cache before diving into debugging.

To flush the cache on Macintosh, use the command dscacheutil -flushcache. On Windows through CMD and Powershell, execute ipconfig /flushdns

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

Tips for incorporating a child's cleaning tasks into the parent component

I am working with a parent and a child component in my project. The parent component functions as a page, while the child component needs to perform some cleanup tasks related to the database. My expectation is that when I close the parent page/component, ...

typescriptangular

Discover every possible path combination

Looking to flatten an array of 1D arrays and simple elements, reporting all combinations until reaching a leaf "node." For example: // Given input array with single elements or 1D arrays: let input = [1, 2, [3, 4], [5, 6]]; The unfolding process splits pa ...

javascripttypescriptalgorithm

How to prevent Cut, Copy, and Paste actions in a textbox with Angular 2

I am currently utilizing Angular2 to prevent copying and pasting in a textbox. However, I am seeking guidance on how to create a custom directive that can easily be applied to all text fields. Here is the code snippet that successfully restricts the copy ...

angularionic2

Guide on incorporating jQuery into a jQuery plugin within an Angular 2+ application using Webpack or Angular CLI

I'm running into an issue importing a jQuery plugin into a single Angular component. It works fine in most browsers, but IE 11 is giving me this error: SCRIPT1002: Syntax error main.bundle.js (1376,1) When I investigate the error, it points me to th ...

javascriptjqueryangularwebpackangular-cli

Extract data from a string and assign it to a variable representing an

I have a custom function that parses a string and converts numbers and boolean values to their appropriate JavaScript primitives. This function is specifically designed for working with query parameters: const parseQueryParams = (searchString: string) => ...

typescript

An issue arises when utilizing a string variable in React-bootstrap's OverlayTrigger placement attribute

I encountered an unexpected issue with the OverlayTrigger component in React-Bootstrap version 5.1.1. I'm attempting to develop a custom button component using OverlayTrigger and a standard button. Everything is functioning as intended, except for whe ...

reactjstypescriptreact-bootstrapbootstrap-5

What are the steps to generate an npm package along with definition files?

Is it possible to create an NPM package with definition files containing only interfaces declared in *.ts files? Consider a scenario where we have two interfaces and one class definition: export interface A { id: number; } export interface B { name: s ...

javascriptnode.jstypescriptnpm

What causes a standard React component with a default render prop to not pass PropTypes validation successfully?

I'm currently working on a React component with a render-prop that has a generic type. To improve usability, I want to set a default value for the render-prop. The code is functioning correctly, but during type-checking, I encountered a warning regard ...

javascriptreactjstypescriptjsxreact-proptypes

Utilizing Variables in TypeScript to Enhance String Literal Types

Here are my codes: export const LOAD_USERS = 'LOAD_USERS'; export const CREATE_USER = 'CREATE_USER'; export interface ACTION { type: string, payload: any } I am trying to limit the possible values for ACTION.type to either 'L ...

typescript

Angular application hosted on Apache2 with SSL configured to communicate with a Spring Boot API running on port 8080

After developing a small application using Angular and an API with Spring Boot that includes an embedded Tomcat server, I decided to deploy them on a Raspberry Pi while configuring an SSL certificate with Let's Encrypt. The deployment process involve ...

angularspring-bootapache2cross-domainmixed-content

Can someone guide me on identifying the type of object in React/Typescript?

Can anyone help me remove this unnecessary definition? const [nextLocation, setNextLocation] = useState(null) as any[]; I have been struggling with this in my React Router 6 project. I've looked through the documentation but haven't found a suit ...

reactjstypescript

A guide on setting up dual observables in Angular 2

Currently, I am implementing Observable in angular 2 with rxjs. As part of my demonstration, I have utilized fromEvent in a Plunker. Here is the link to my demo: https://plnkr.co/edit/zkgEcdn21CvIKoOycUOy?p=preview In this demo, I have included two input ...

javascriptangularrxjs

The columns in the table are all displaying varying widths even though they have been defined with fixed table layout

I have a nested table displayed in my HTML, and I am attempting to set each column to be 50% width, but for some reason it's not working. In the past, whenever I've needed to accomplish this, applying table-layout: fixed has usually done the tri ...

cssangular

Converting Typescript Object Types to Array Types with Tuple Structures

Presently, I have the following: interface Obj { foo: string, bar: number, baz: boolean } The desired outcome is to convert this interface into the tuple format below: [string, number, boolean] Is there a way to achieve this conversion? Up ...

typescripttuples

Ways to decrease the node_module size within an Angular application and how to efficiently load Node_Modules directly from the index.html or the root

Looking to decrease the size of node_module (currently 605MB) and load Node_Modules from index.html or application root. Using Angular 5 with node 8.9.4 Various solutions have been attempted but without the desired outcome, npm install --production Git ...

angularnpmnpm-installnode-modules

Configure NODE_OPTIONS to set the maximum old space size for an Angular application to Nx

In my Angular application within an Nx workspace, I am utilizing the @nx/angular:webpack-browser executor for building. "build": { "executor": "@nx/angular:webpack-browser", ... } This is a sizable application that necessita ...

angulardevopsnrwl-nx

Scully.io prerenders the ROOT route as a static file, but it does not prerender any other routes in its process

Our production Angular 14.2.12 application is running smoothly. I decided to generate static pages using Scully, so I followed these steps: Run the command: ng add @scullyio/init This added Scully to my project. Next, I executed "ng build" and "npx sc ...

angularprerenderscullyscullyioangular-scully

When attempting to navigate to a sub-route, I am encountering the error message: "Unable to find a matching route" in Angular 6

The initial code is functional, but not the best practice. const FooProcessingRoutes: Routes = [{ path: '', pathMatch: 'full', redirectTo: '/foo-processing/list', }, { path: 'list', component: FooListCompo ...

angularangular-routing

Tips for dynamically accessing object properties in TypeScript

I've been going through the process of converting existing Node.js projects to TypeScript. As part of this, I am utilizing the http-status package (https://www.npmjs.com/package/http-status) for handling HTTP status codes. While trying to pass varia ...

node.jstypescript

TypeScript Angular Forms: Implementing correct typing for dynamic form fields

I have a formgroup that looks like this: this.formBuilder.group<{ id: number; nameDe?: FormControl<string>; nameFr?: FormControl<string>; nameIt?: FormControl<string>; }>({ id: value?.id || null }); The main foc ...

angulartypescriptangular-formbuilder