What could be the reason behind the absence of TypeScript source code in the dist folder?

While using Angular CLI compiler, it generates source-maps (.map files) that allow debugging of the original TypeScript code in Chrome developer tools. This feature works seamlessly when developing locally with the JIT compiler/ng serve.

However, upon building a preview version for my web-server using the AOT compiler/ng build, I encounter an issue where I cannot debug the code even though all map files are present in the dist directory. The root cause being that ng build fails to export the source code .ts files to the dist folder.

The question arises - what is the purpose of having source-maps if the actual source code is missing?

Is there a way to ensure that the relevant source code (.ts) is exported to dist during ng build? Are there any CLI parameters or settings in angular.json that can facilitate this?

UPDATE

After understanding the rationale behind source-maps without source files (refer to comments), it appears that they are intended for debugging the source code on your local file system. Chrome enables adding mappings to local files for this purpose. Nevertheless, I am still seeking a method to include the original source code with my application due to various reasons:

  • I have encountered issues with Chrome's "add folder to workspace" functionality such as unrecognized files, ignored breakpoints, and crashes.

  • It might be suggested to utilize the IDE's debugger to circumvent these challenges. However, configuring WebStorm for debugging TypeScript files while attaching a Chrome debugger remains elusive. Debugging TypeScript in WebStorm is feasible with Node.js or JavaScript-Debug configurations but not with the "Attach Node.js/Chrome" debug setup, which is essential for debugging the app on a mobile device.

  • Moreover, other developers should have the ability to debug the application regardless of the branch or code base they are working on.

Initially, I suspected misconfigured settings causing this dilemma. But now that I grasp the purpose of Angular’s source-maps, I wonder if there exists a workaround to provide the source files. For instance, angular.json supports defining asset rules; however, attempts to leverage them for this objective proved unsuccessful.

angulartypescriptangular-clisource-mapsangular-cli-v6

Answer №1

To start, you must set up a new environment and define the necessary configurations for it before building your project. Follow this sample:

Begin by creating a new environment file named environment.dev.ts:

export const environment = {
  production: false,
  baseUrl: 'http://192.168.1.11',
  port: ':2992',
  api: 'api',
  debug: true,
  type: 'dev'
};

Next, incorporate the build settings for the environment in angular.json within the configurations section. Make sure to pay attention to the 'sourceMap' boolean value:

"dev": {
  "fileReplacements": [{
     "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.dev.ts"
   }],
   "optimization": true,
   "outputHashing": "all",
   "sourceMap": true,
   "extractCss": true,
   "namedChunks": false,
   "aot": true,
   "extractLicenses": true,
   "vendorChunk": false,
   "buildOptimizer": true
}

Finally, execute the build process using this specific environment configuration:

ionic cordova build android -c dev

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

Specify the type of nested object exclusively with string values

I am working on creating a complex nested object structure with string values only, as shown below: let obj = { foo: "bar", foo2: "bar2", nestedFoo: { foo3: "bar3", anotherNested: { foo4: "bar4" ...

reactjstypescript

Injecting services with an abstract class is a common practice in Angular library modules

In my development workflow, I have established an Angular Component Library that I deploy using NPM (via Nexus) to various similar projects. This library includes a PageComponent, which contains a FooterComponent and a NavbarComponent. Within the NavbarCom ...

angulartypescript

What is the best way to declare strings within a Typescript interface?

I have an array of Projects with multiple strings in the stack property const projects: IProject[] = [ {name: '', description: '', stack: {'php', 'sql'}} ] What is the best approach for defining the interface? ...

javascriptreactjstypescripttypes

When considering Angular directives, which is more suitable for this scenario: structural or attribute?

In the process of developing an Angular 5 directive, I aim to incorporate various host views (generated from a component) into the viewContainer. However, I find myself at a crossroads as to whether I should opt for an attribute directive or a structural ...

angulartypescriptangular2-directivesangular-directive

I am confused as to why I am receiving npm warnings for angularfire 2.0.0-beta.2 when I have only been using version 2.0.0-beta.0

Currently, I am working on a project that involves using angularfire 2.0.0-beta.0 as specified in the package.json file... "angularfire2": "^2.0.0-beta.0" ...however, upon running npm install, I have been receiving npm warnings related to angularfire 2.0 ...

angularfirebasenpmionic2angularfire2

promise not being returned by service method

In my Angular 8 application, I am facing an issue where the promise call does not return an exception when it occurs. Can someone help me understand how to make getRepApprovedName return a promise? When I use 'return http.get', I encounter a synt ...

angular

How can Angular Universal SSR be configured to make localhost calls when running on the server and use an IP address when running on the client in a built project?

After converting an angular project to universal, we are facing the issue of hitting the IP address every time a click action occurs. Since both the angular project and our server are on the same machine, I want to connect to localhost when running server- ...

angularserver-side-rendering

What is the best way to create a universal limitation for a larger collection of a discriminated union?

Is it possible to enforce that when defining a generic class Foo<X>, where X represents a discriminated union type, X must be a superset of another discriminated union Y? In my specific scenario, I am utilizing a discriminated union to differentiate ...

typescriptgenericsdiscriminated-union

What is the process for disabling change detection for a specific method of a WebSocket?

Explanation: I have developed a custom websocket connection to communicate with a netty server on my website. My implementation involves splitting large messages into smaller parts to enable concurrent sending over a single socket, which is currently funct ...

angularzone

Problems with Angular 14 and NGRX Selector causing complications

At my basket store, I currently have 5 items with 2 of them having an id of 4. https://i.stack.imgur.com/YIplp.png In my reducer, when I use: on(getBasket, (state, { id }) => state.filter((photo) => photo.id !== id) It works to remove the item fr ...

angularngrx

The addControl function inside a for loop and async function is not properly assigning a value to the form

My goal is to iterate through an array, make a HTTP request, retrieve another array from it, and assign the selected object from the fetched array to a newly added Form Control in the form. This is how I approached it: for (let i = 0; i < typeaheadFiel ...

angularangular-reactive-forms

What is the best way to reset a setInterval ID in Angular?

In my Angular project, I am developing a simple timer functionality that consists of two buttons – one button to start the timer and another to stop it. The timer uses setInterval with a delay of 1000ms. However, when the stop button is pressed, the time ...

javascriptangularsetinterval

Exporting items with a label in TypeScript/JavaScript

Is it possible to rename the functions that are exported using the following syntax in Typescript/Javascript? export const { selectIds, selectEntities, selectAll, selectTotal } = adapter.getSelectors(selectState); I would like to import selectAll as sele ...

javascripttypescriptes6-modules

Tips for resolving the AngularFire migration error related to observables

Recently, I decided to upgrade a project that had been untouched for over a year. Originally built on Angular 10, I made the jump to Angular 12. However, the next step was upgrading AngularFire from v6 to v7, and it appears there is an issue with typings. ...

angularfirebase

Using ngx-stripe for managing membership plans

Can anyone provide insight on how ngx-stripe functions for setting up a subscription? I attempted to use cURL but I was unsuccessful. I can create the card token, but what steps come next? My frontend is in Angular and my backend is in Laravel. I know ...

angularlaravelstripe-payments

An issue has been identified: the element 'insight-dashboard-erneuerung-settings' is unrecognized during the implementation of lazy loading

I am currently working on implementing lazy loading for the Dashboard module in my Angular project, but I have run into an issue: When trying to use 'insight-dashboard', I am getting the error message 'is not a known element'. I have c ...

angularangularjswebpacklazy-loadingsingle-page-application

Error in Typescript: Property 'timeLog' is not recognized on type 'Console'

ERROR in src/app/utils/indicator-drawer.utils.ts:119:25 - error TS2339: Property 'timeLog' does not exist on type 'Console'. 119 console.timeLog("drawing") I am currently working with Typescript and Angular. I have ...

angulartypescriptconsoleconsole.log

Tips for running a function before initializing Angular 2

Is there a way to run a function before initializing Angular in the current ng2 CLI configuration? One approach is to use SystemJS and call System.import() immediately after our function executes. ...

angularjsangular

Angular template error: 'Component' type does not have the specified property

I am facing an issue with importing an array from a file named platforms.ts. The array is declared as shown below: export const platforms: Platforms[] = [ { name: 'Instagram', value: 'instagram' }, { name: 'Facebo ...

angularangular-template

What is the best way to retrieve the value from a Material UI textfield after hitting the enter key

Having trouble retrieving input values with the provided code. Attempted using onKeyUp, onKeyDown, and onKeyPress, but none of them returned the value as desired. Typically, I would use the onChange property to get the value, but it triggers for every ne ...

reactjstypescriptmaterial-ui