Why is typescript source code missing in dist?

Question

Angular CLI compiler generates source-maps ( .map files) which allow debugging the original typescript code in Chrome developer tools. I'm already using this feature when developing locally with the JIT compiler / ng serve .

However, when I build a preview-version for my web-server with the AOT comiler / ng build , I cannot debug the code, although all map files can be found in the dist directory. The reason is that ng buid didn't export the source code .ts files to the dist folder.

What's the purpose of the source-maps if the source code is missing?

How can I achieve that the relevant source code ( .ts ) is exported to dist on ng build ? Is there a cli parameter or setting for angular.json ?

EDIT

I understand the purpose of the source-maps without source files now (see comments) - The intention is to debug the source code on your local file system. Chrome allows to add mappings to local files for that. However I'm still looking for a way to provide the original source code with my app for several reasons:

• I have very bad experience with Chrome's "add folder to workspace" feature. Sometimes files are not reckognized, breakpoints are ignored, Chrome crashes.

• One might suggest to use the IDE's debugger to work around these issues. However, I still haven't found a way to configure WebStorm for debugging typescript files when attaching (!) a Chrome debugger. Debugging typescript works with WebStorm with Node.js or JavaScript-Debug configurations, but not with the "Attach Node.js/Chrome" debug configuration. I debug the app running on a mobile device, so I have to use this debug option.

• Other developers should be able to debug the application even if they work on a different branch / code base.

When I wrote this question I thought something is configured wrongly. Now that I understand the intention of Angular's source-maps, I ask you if there is a workaround to provide the source files. For instance angular.json allows to specify asset rules, but I wasn't successful when trying to leverage them for this purpose.

Answer 1

You need to create an new environment, add settings for this environment and build using this configuration. See example:

Create new environment file environment.dev.ts:

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

Add the environment build settings in angular.json under the configurations section. Notice the 'sourceMap' boolean:

"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
}

then build with this environment

ionic cordova build android -c dev