AngularCli: disable minification

Question

Is there a way to disable the minification in AngularCli?

After I launch the command ng build --prod I need to have all files.js, in dist folder, separate and legible.

Is there any reason against using `ng build` without the `--prod` flag? — Oliver Hanappi, Apr 22 '17 at 08:39
What happens if you build in non-prod mode? Also, why do you need all of the separate JS? — jonrsharpe, Apr 22 '17 at 08:39
'ng build --prod --source-map' will also generate source maps that your browser can use to show you the original code (for debugging). But using 'ng serve' (default dev mod) would be the best way to go about this. — Ahmed Musallam, Apr 22 '17 at 18:22
Sorry, it is true that ng build disable minification. But what I want is that all files.js of each component are saved separately and not all in main.bundle.js — Danieleee, Apr 23 '17 at 08:37
Interesting conversation. We have the same need : don't minifying (because of class renaming) some modules because of certain functionality. Any idea ? — Christophe Gigax, Sep 27 '17 at 09:08
If --prod is your production there is serious difference. 9M main.js file drops to 1.2M with minification. — Davut Gürbüz, Feb 28 '19 at 08:18

Web Dev · Answer 1 · 2019-03-15T03:02:23.120

71

Just do:

ng build --prod --optimization=false

That seems to do it. For more information see: https://github.com/angular/angular-cli/wiki/build

This is valid for angular 6.*

edited Mar 15 '19 at 03:02

answered Oct 09 '18 at 02:16

Web Dev

2,677
2
30
41

what about angular 5? – roberto tomás Aug 15 '19 at 17:27
Don't know, sorry! Only started using Angular with versions 6.*+ – Web Dev Jan 16 '20 at 20:35
1

C'est genial :-D I was trying to find out, what setting is responsible for file minification in published Angular site, specifically on typescript site, but could not! And then I found your post... :-D Thank you! – Alexander Oct 07 '20 at 10:41
Glad to help! :D – Web Dev Nov 09 '20 at 21:27

score 20 · Answer 2 · answered Oct 19 '18 at 08:20

20

Note: If you use ng serve through some package.json run target, according to the manpage of Angular6 correspoding switch for this is:

ng serve --optimization=false

will speedup this bs in development noticeable

answered Oct 19 '18 at 08:20

mschmoock

20,084
6
33
35

1

Meaningful use. In prod it will cause fat output, but @devenv helps. – Davut Gürbüz Feb 28 '19 at 08:19
1

this was my trick, to see what provider fails to be injected! I was getting `Error: No provider for t`, now I get an error message more human `No provider for ComponentLoaderFactory!` – hzitoun Aug 09 '19 at 13:01
2

Today this option is [deprecated](https://angular.io/cli/serve#ng-serve) with `ng serve`, but it is possible to use it with `ng build` and by configuring the *angular.json* file – fservantdev Oct 13 '21 at 21:33
1

@fservantdev how do you do this please? – Wenneguen Jun 10 '22 at 16:15
@fservantdev how do you do this? – thargenediad Mar 28 '23 at 22:59
You can check this more updated answer : https://stackoverflow.com/a/70995225/12292636 – fservantdev Mar 29 '23 at 04:54

score 16 · Answer 3 · answered Feb 05 '22 at 04:09

The responses from 2018 are now outdated. For the more recent versions of Angular (13 as of this writing), the --optimization=false flag is deprecated. Instead, you can achieve the same result as follows:

In your angular.json, you can configure it for specific environment (e.g. no optimization in dev, but optimization in prod).

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "optimization": false,
            ...
          }
        }
      }

You can also have more granular control on which optimizations are enabled:

"optimization": {
  "scripts": true,
  "fonts": false,
  "styles": false
}

Those too can be further refined (e.g. for styles: minify, inlineCritical)

More details here: https://angular.io/guide/workspace-config#optimization-configuration

Best answer with the current versions of Angular – Morgs Oct 05 '22 at 10:03 — Morgs, Oct 05 '22 at 10:03

Chetan Laddha · Answer 4 · 2021-09-27T05:53:43.493

9

ng build --build-optimizer=false

Above command Enables '@angular-devkit/build-optimizer' optimizations when using the 'aot' option.

More details at https://angular.io/cli/build

edited Sep 27 '21 at 05:53

answered Jan 08 '18 at 07:52

Chetan Laddha

993
8
22

9

While this code may answer the question, providing additional context regarding **how** and **why** it solves the problem would improve the answer's long-term value. – Alexander Jan 08 '18 at 08:57
4

running this does not prevent bundling and minification for me, – Judy007 Aug 15 '18 at 01:57
4

That did not disable JSUglify minification for me – Web Dev Oct 09 '18 at 02:15

score -3 · Answer 5 · answered Oct 16 '17 at 13:57

-3

In order to get the plain and separate and un-minified js files you just need to compile them with typescript (tsc) to your dist directory.

There is no need to use the cli build. By design Angular CLI bundles all javascript files when building.

From the cli build documentation:

All builds make use of bundling and limited tree-shaking, while --prod builds also run limited dead code elimination via UglifyJS.

answered Oct 16 '17 at 13:57

kampsj

3,139
5
34
56

5

I dont think thats correct. Typescript cant compile angular templates – dasfdsa Mar 14 '19 at 00:09
Also typescript doesn't create any bundle, it only outputs 1-to-1 .js translations of .ts files – Stefan Orzu Mar 19 '19 at 15:20

AngularCli: disable minification

5 Answers5

Linked