Troubleshoot an Angular build within Visual Studio Code

While working on my PWA app with Angular, I have implemented a watched build that automatically rebuilds my code whenever there are any changes:

ng build --output-path dist --watch

This process has been efficient so far.

In addition to this, I have set up a lite-server via the command line to host the build results from the dist folder:

lite-server

As a result, I can view the built app on localhost:3000. However, I am facing an issue with debugging in Visual Studio Code. I tried extending the launch.json file with a configuration to launch the server:

{
    "name": "Launch via NPM",
    "type": "node",
    "request": "launch",
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": "npm",
    "runtimeArgs": [
        "run-script", "runServer"
    ]
}

The script 'runServer' is defined in my package.json file as simply running 'lite-server'. Even after selecting and running this configuration, the server starts and the browser opens, but I am still unable to debug in Visual Studio Code by stopping at breakpoints.

I am unsure if it is possible to build the Angular code in a dist folder without just serving it using 'ng serve'. When using 'ng serve' along with the default Chrome launch configuration in VSC, debugging Angular works smoothly. However, I lose out on the PWA capabilities in that setup.

If anyone has a solution or idea that could work in this scenario, I would appreciate the help.

angulartypescriptvisual-studio-codeangular-pwa

Answer №1

To resolve the issue, execute the ng build command with the development configuration:

ng build --output-path dist --watch --configuration development

The default configuration is named as "development" and is defined in the angular.json file:

 "development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }

The crucial aspect here is the sourceMap setting - this setup allows for debugging the PWA in Visual Studio Code without having to make any changes to the launch.json file when compared to the non-PWA scenario while using ng serve.

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

The pipe property cannot be accessed for the specified type "OperatorFunction<unknown, [unknown, boolean, any]>"

I have set up a data subscription that I want to utilize through piping, but for some reason it's not working as expected. The error message I'm receiving is: The property pipe is not available for type "OperatorFunction<unknown, [unknown, b ...

javascriptangulartypescriptionic-framework

I can't seem to get my Angular workspace with multiple projects to build my library. What could be the issue?

In my Angular workspace, I have several projects, one of which is a library that contains shared features. Whenever I attempt to compile my library using ng build my-lib, I am bombarded with a plethora of errors from different projects within the workspac ...

angular

The correct way to type a generic React function component using TypeScript

When attempting to generalize the function component Element into a GenericElement component in TypeScript Playground, I encountered syntax issues that raised complaints from TypeScript. What is the correct method for typing a generic react function compo ...

reactjstypescripttypescript-generics

Generate an interactive sitemap.xml in ReactJS for each request made to http://example.com/sitemap.xml

I am working on a single-page application (SPA) using reactjs, and I have links in the format of http://example.com/blog/:id. I want to dynamically generate a sitemap for this site. While I'm aware that there are npm packages like react-router-sitema ...

reactjstypescriptsitemapxml-sitemap

The Microsoft EDGE browser is encountering a XHR HTTP404 error when trying to access a TypeScript

While debugging a Typescript web application in Visual Studio 2015 and using the Microsoft EDGE browser, an error is reported as follows: HTTP404: NOT FOUND - The server cannot locate anything that matches the requested URI (Uniform Resource Identifier). ...

asp.netdebuggingtypescriptvisual-studio-2015microsoft-edge

Tips for creating a script that waits for a specific amount of time before moving on to the next execution block in Protractor

Need to automate a test case that involves filling out a form with 5 date pickers and 30 fields. Once the form is filled, a jar needs to be invoked to retrieve the data from the DB and process it independently. Note: The jar does not send any value back t ...

typescriptjasmineprotractor

The defaultValue of the Observable TextArea is blank space following the transmission of a sendMessage using SignalR in a Typescript

i am currently in the process of modifying a basic SignalR Chat feature. Here is the situation: when a user sends a message, the message gets sent successfully. However, the textarea from which it was sent remains filled with empty space (aside from the p ...

angulartypescriptsignalrobservable

Strategies for managing customer projects that require personalized components

Customization Challenge In the process of developing an application, I aim to achieve a balance between standard implementation and customizable features for customers. The customization can extend to various aspects such as behavior, style, or templates ...

angular

TypeScript fails to recognize that the filtered array consists entirely of one type when using a type guard

I recently stumbled upon this code snippet in a coding playground where TypeScript is used: export interface Page { heading: string; component: string; path: string; } export type RouteOnly = Pick<Page, 'heading' | 'path'> ...

typescript

Tips for updating the date separator in Angular 2

When using the date pipe to format a date, I am struggling to change the date separator. My goal is to format the date as "27.07.2016". Despite trying the code below: {{dateValue | date:'dd.MM.yyyy'}} The output still displays the date as "27/0 ...

angular

Utilize ngFor to invoke a unique custom function during every iteration

I am looking to set up a feature similar to this: <div *ngFor="let callLog of callLogs; trackBy: trackByFn; let contact = getContact(callLog.user-id);" class="call-log-item"> ... <div> {{ contact ? contact.name : callLog.cache-name } ...

angular

Angular 4 and the process of HTML encoding

Looking for assistance with html encoding in angular 4. I have product records stored in a database, with the fullDescription field in this particular format: &lt;div align="justify"&gt;&lt;span&gt; When using <div *ngIf="product" [inn ...

angulartypescript

Utilizing TypeScript 2's Absolute Module Paths

The issue at hand: I am facing a challenge with relative module paths and have attempted to resolve it by configuring the baseUrl setting in my tsconfig.json file. Despite my efforts, I keep receiving an error indicating that the module cannot be found. I ...

typescript

Combining Observables in Angular to Create a Post with New Tags using Wordpress REST API

I am currently working on an Angular application that communicates with the Wordpress REST API. The main objective of the app is to create a new post along with up to 3 optional tags. This customization allows users to decide whether or not they want to in ...

angularrxjswordpress-rest-api

Exploring the process of data filtering and applying specific conditions in Angular8

Received the following sample data from an API dynamically. Seeking suggestions on how to apply conditions based on the data. ...

angularjsangularangular8

Is it possible to initiate a request action in both the constructor and ngOnInit method?

I am facing a situation where I need to trigger a request action from both the constructor and ngOnInit functions in order to load data. However, I have noticed that on the second call, one of the dispatch actions is not being invoked and the data remains ...

angularngrxngrx-storereducersngrx-effects

Organize data into groups by value range using RxJS within an Angular application

Looking to organize the raw data array [ {bugid: b1 , state: 'foo', days: 2}, {bugid: b2, state: 'bar', days: 41}, {bugid: b3, state: 'foo', days: 45} ] Trying to group the data with RxJS in a specific format { &apo ...

javascriptangularrxjsrxjs-pipeable-operatorsngx-charts

Customize the header text in PrimeNG

Is it possible to customize the header text with icons and more in this section? <p-accordion> <p-accordionTab header="Header 1"> Content 1 </p-accordionTab> <p-accordionTab header="Header 2"> Content 2 ...

angulartypescriptsassprimeng

Exploring the Relationship Between Redux and ImmutableJS in Managing Nested State and Understanding the Computational Complexity of Immutable

Trying to grasp the concept of Immutability for my debut Redux (NGRX/Store) endeavor has been quite the challenge. Avoiding state mutation has been a struggle, especially while dealing with Object.assign({}) and state mutation errors. Thankfully, I stumble ...

typescriptreduximmutabilityngrximmutable-collections

Angular 2 : Encountering an issue when statically resolving symbol values - Is there a way to convert this into a factory method?

Upon installing Angular-cli, an error has surfaced: A problem arose while resolving symbol values statically. Function calls are not supported. To resolve this, consider replacing the function or lambda with a reference to an exported function (position 5 ...

angulartypescriptangular-cli