I have enabled sourceMap globally in my project, yet TypeScript sources are not visible in my Firefox browser debugger when I am working with Angular 14

When launching an Angular application in dev mode using ng serve, source maps are supposed to load instantly on web browsers. If "sourceMap": true is configured, as I've gathered from my online research.

Most developers don't seem to have any issues with this functionality.
However, I'm experiencing difficulties because my Firefox browser doesn't display the TypeScript equivalents of the JavaScript generated by Angular.

I am currently working with Angular 14.

https://i.sstatic.net/j9Xlv.png

Did I forget to set a parameter somewhere?

Most of the code below was automatically generated by Angular plugins. However, there may be some inaccuracies or missing configurations.

Can anyone provide assistance?

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "skipLibCheck": true,
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  ...

package.json

{
  "name": "etude",
  "version": "0.0.0",
  "scripts": {
    ...
angulartypescriptdebuggingsource-maps

Answer №1

I have successfully completed my research, thanks to your assistance.

https://i.sstatic.net/kvSG2.png

Angular 14 is not functioning the same as previous versions.
There are two changes that need to be made in the angular.json file:

In comparison to my initial post, in order to resolve my issue, I had to:

  1. Add a development configuration under the architect build section:
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/etude",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "aot": true,
      "assets": [
        "src/favicon.ico",
        "src/assets"
      ],
      "styles": [
        "node_modules/ol/ol.css",
        "src/styles.css"
      ],
      "scripts": []
    },
    "configurations": {
      "production": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
          }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": true,
        "namedChunks": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true,
        "budgets": [
          {
            "type": "initial",
            "maximumWarning": "2mb",
            "maximumError": "5mb"
          },
          {
            "type": "anyComponentStyle",
            "maximumWarning": "6kb",
            "maximumError": "10kb"
          }
        ]
      },

      "development": {
        "buildOptimizer": false,
        "optimization": false,
        "vendorChunk": true,
        "extractLicenses": false,
        "sourceMap": true,
        "namedChunks": true
      }
    }
  }
}
  1. In the serve section, make the following adjustment:
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "etude:build"
  },

  "configurations": {
    "production": {
      "browserTarget": "etude:build:production"
    },

    "development": {
      "browserTarget": "etude:build:development"
    }
  },

  "defaultConfiguration": "development"
}

Running ng serve will display the typescript files accordingly.

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

Building a TypeScript function using a dictionary with function names and argument types

In possession of a dictionary { "function_name":"myFunc", "arguments":["a1","a2"] } A desire to create a function where the name matches that in the dictionary above (i.e myFunc ) with respective arg ...

javascriptangulartypescriptfunction

Testing the Angular component with service: An error occurred while trying to access the `diagnosticData` property as it was found to be undefined

Seeking guidance on angular testing as a beginner. I have encountered an issue where my component is not receiving the values during testing, even though the app functions correctly. Can someone assist me with this? I have shared the service, JSON object, ...

jsonangularunit-testingkarma-jasmineangular-components

Troubleshoot your node.js backend application using an Integrated Development Environment (IDE) such as WebStorm

In the package.json file, I included the following script: "debug": "NODE_PATH=src nodemon --exec babel-node src/run.js --inspect", However, when attempting to debug using this method, it seems to be arbitrarily jumping to different lines. As someone mor ...

node.jsdebuggingnpmwebstorm

Applying CSS dynamically to a mat-cell in Angular 6

In my material table, I need to apply specific CSS classes based on the content of the cell. https://i.sstatic.net/YN6EO.png These are the CSS classes that I am using .status-code{ flex: 0 0 10% !important; width: 10% !important; } .status-code- ...

cssangularangular-materialmaterial-design

Plugin for receiving SMS in Cordova

I found a helpful article on Ionic 4 that discusses using cordova-plugin-sms-receive. However, I encountered an error stating SMSReceive is not defined. The article suggests declaring var SMSReceive: any; to make the SMSReceive variable accessible on the ...

angularcordovaionic4

Angular 2: Harnessing the power of dynamic backlinks on landing pages!

I am facing an issue with my Angular 2 item page. When a user lands on the page via a deep link, the Location.back() function does not work as there is no history in the Location object. To address this, I attempted to use a workaround where if the back() ...

javascripttypescriptangular

Showing Angular dropdown menu using Java HashMap

I am trying to fetch and display data from a HashMap in my Angular application by making a GET request to a Spring Application. Here is the code I have tried: Spring code: @GetMapping("gateways") public ResponseEntity<?> getGateways() { Map< ...

angularspringtypescriptangular6

How can I conditionally add SCSS files to index.html in Angular 13?

I need to include this import <link rel="stylesheet" href="./assets/sass/style.scss"> <link rel="stylesheet" href="./assets/sass/plugins.scss"> conditionally in the index.html file of an Angular proj ...

angularangular13

Implementing lazy loading with nested material tabs in Angular 7

My Angular 7 project involves creating an HTML page with nested Material tabs. The second tab contains another set of tabs where I am attempting to generate a canvas chart based on data passed to the child component. Here is the snippet of my HTML code. ...

angularangular-materiallazy-loading

Problem with Angularfire: The type 'Promise<any>' does not have a property called 'subscribe'

Whenever I try to retrieve data from the database, an error message crops up: "The property subscribe is not recognized within type Promise<any>." What steps should I take to fix this issue? This snippet showcases my code: getUsers(){ retur ...

angularfirebasegoogle-cloud-firestoreangularfire

Learn how to apply CSS styles from one component to another in Angular

I am attempting to modify the background color of a wrapper from a different component. I tried using ::ng-deep but it's not functioning correctly. For the mauto component, the background should be a solid block color. For the vgud component, the back ...

cssangularangular12

Launch Outlook Email with Attachment through Angular on a click event

I am developing a client side application that utilizes Angular 7 for the frontend and C# for the backend. Here is the requirement: When a button on the UI, labeled as "open Mail with Attachment", is clicked, I need to be able to open an email in Outlook ...

c#.netangularangular7html-email

Utilizing the WebSocket readyState to showcase the connection status on the application header

I am currently in the process of developing a chat widget with svelte. I aim to indicate whether the websocket is connected or not by utilizing the websocket.readyState property, which has the following values: 0- Connecting, 1- Open, 2- Closing, 3- Close ...

javascripthtmlreactjstypescriptsvelte

Error: The JSON file cannot be located by the @rollup/plugin-typescript plugin

I have recently set up a Svelte project and decided to leverage JSON files for the Svelte i18n package. However, I am facing challenges when trying to import a JSON file. Although the necessary package is installed, I can't figure out why the Typescri ...

jsontypescriptsvelte

Despite rebuilding, the content in the Angular application does not refresh upon making changes

My current project involves using ASP.Net core Web API as the backend with an Angular app on the frontend. I decided to customize my Angular project rather than using the default SPA template provided. To achieve this, I created a blank ASP.NET Core projec ...

angularasp.net-coreasp.net-web-api

Personalizing specific dates in mat calendar (Angular material)

I am facing an issue with marking the days that have tasks in the mat calendar. I have been trying to troubleshoot why this code is not working as expected. Below is the typescript code snippet: dateClass(): any { return (date: Date): MatCalendarCell ...

angularsassangular-materialcalendar

angular feature module triggers rerouting only on site refresh

In my app-routing.module.ts file, I have defined the following routes: { path: 'abc', children: [ { path: 'foo', pathMatch: 'full', redirectTo: 'foo/bar', }, { ...

angular

Implementing Scroll Pagination in Angular 2 to Showcase Information

Recently delving into Angular2, my aim is to set up Scroll Pagination for dynamic data loading upon user scrolling. My application comprises three key Components: App.Component, Categories.Component, and Products.Component. The primary objective is to pr ...

typescriptangularpagination

Display and view .dwg files using Javascript, HTML, and Angular

Looking for a way to upload and preview .dwg format images on a page created using js/HTML/angularjs or Angular 2+? I've attempted to use a CAD viewer js library, but the lack of documentation has made it challenging. Has anyone successfully implement ...

javascripthtmlangularjsangular

Using Angular Material theme with Webpack

In the process of configuring angular material for my Angular (4) application using webpack, I discovered that including a default theme is necessary for it to function properly. One of the recommendations provided in the documentation is to use @import & ...

angularwebpackangular-material