Generate production build with sourcemaps in Angular - CLI

Question

How to keep sourcemaps after production build?

Right now, my command looks like this:

"build-prod": "ng build --app=release -prod && cp -R lang dist"

I tried changing it to:

ng build --app=release --sourceMap=true -prod && cp -R lang dist

but nothing changed.

If I do: ng build --sourcemap I get sourcemaps but then I get index.html instead of index.prod.html.

Is it possible to edit the first command to build sourcemap files?

this is my tsconfig.json file:

{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2017",
            "dom"
        ]
    }
}

score 30 · Answer 1 · edited May 26 '21 at 08:53

30

You should edit your angular.json like this

"configurations": {
    "production": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
            }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false, // change to true

Then run

ng build --prod

But I wouldnt recommend you turn on source map in production because it will increase a bundle size

edited May 26 '21 at 08:53

BuZZ-dEE

6,075
12
66
96

answered Aug 26 '19 at 15:54

Tony Ngo

19,166
4
38
60

I have "sourceMap": true in my tsconfig file, shouldn't that be enough? I only have tsconfig.json and angular-cli.json or is angular-cli.json same as angular.json? – user122222 Aug 26 '19 at 18:35
that tsconfig only support for dev mode. You need to set in angular.json for prod. angular-cli. json is out of date version. Lastest angular cli used angular. json – Tony Ngo Aug 27 '19 at 02:21
9

Note that source maps generally only get downloaded if the users opens their developer tools, so for most users having the source maps available *won't* impact download size: https://stackoverflow.com/q/23848364/3001761 – jonrsharpe Oct 13 '20 at 15:30
@jonrsharpe They are helpful if you have an enterprise setup where you have multiple lower states before production. Then you can test and debug in a prod like environment. You can then turn it off for real prod. Or have a third config for prod-test. – markbernard Aug 03 '22 at 00:37
For Angular V14.2 I had to write "ng build --configuration production" to consider production configuration with enabled source maps. – enne87 Jan 15 '23 at 12:48

score 14 · Answer 2 · answered Dec 10 '20 at 16:10

14

you can try

ng build --prod --source-map=true|false

angular.io/cli/build

answered Dec 10 '20 at 16:10

Muhammed Moussa

4,589
33
27

Generate production build with sourcemaps in Angular - CLI

2 Answers2

Linked