CODEWITHSUNDEEP
angulartypescriptazure-devops
gvdm
gvdm

Reputation: 3166

Typescript files in Angular's "prod" build artifact

I have an Angular project that I build with this command (in Azure DevOps)

node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build \
    --project="my-app" --prod --build-optimizer --base-href="/MyApp/"

In the artifacts folder no Typescript file is found, and that's ok because the compiled Typescript files are transformed in minified JS files.

The problem is that when I deploy and use the application I can see the HTML and Typescript files in the "Sources" tab, "webpack://" folder. In general it seems that Chrome can access the project's files

enter image description here

This is a huge problem because the customers can see the actual source code. Do you know how can it be? What's my mistake in the build process?

Thank you

Upvotes: 0

Views: 1019

Answers (1)

gvdm
gvdm

Reputation: 3166

I premise that in my angular.json file I have the setting "sourceMap": true set.

A first solution is to run the ng build command with the --sourceMap=false flag. In fact, in the official ng build documentation the --sourceMap is true by default. The problem of this first solution is that I will not be able to perform the debug operations on the deployed application (for example in the test and QA environments).

Following this link I was able to allow both the scenarios, that is hide the sourceMap in the deployed application but allow to perform the debug operations if needed.

This is what I did:

  1. Set this configuration in my angular.json 
    "sourceMap": {
    "hidden": true,
    "scripts": true,
    "styles": true
},
    This way no sourceMap is automatically linked to the minified JS files and the webpack:// folder if hidden.
  2. In Google Chrome's dev tools, Sources tab, select the main-HASH.js file and in its code right click the background and select "Add source map". In the text box enter the sourceMap link (that is the minified JS path plus a ".map" suffix) enter image description here enter image description here

This will show the webpack:// folder allowing to set breakpoints in the TS code

enter image description here

Upvotes: 1

Related Questions