Optimization of inline scripts behaves differently with default settings vs explicitly defined minification

[kmaraz]

🐞 bug report

Description

In the documentation for Optimization configuration https://angular.io/guide/workspace-config#optimization-configuration it is stated that:

option: scripts - Enables optimization of the scripts output.
and the default value is TRUE

So based on default values mentioned in the documentation I thought that

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

is the same as:

"optimization": true

But the two behaves differently. The explicit configuration of optimization.scripts = true option turns on aggresive minification of inlined <script>s in the index.html which is not enabled when only optimization = true is set.

Did I get it wrong and it should behave differently?

🌍 Your Environment

Angular Version:

  "@angular-builders/custom-webpack": "^11.1.0",
    "@angular-devkit/build-angular": "^0.1102.2",
    "@angular-eslint/eslint-plugin": "^1.2.0",
    "@angular-eslint/eslint-plugin-template": "^1.2.0",
    "@angular-eslint/template-parser": "^1.2.0",
    "@angular/animations": "^11.2.3",
    "@angular/cdk": "^11.2.2",
    "@angular/cli": "^11.2.2",
    "@angular/common": "^11.2.3",
    "@angular/compiler": "^11.2.3",
    "@angular/compiler-cli": "^11.2.3",
    "@angular/core": "^11.2.3",
    "@angular/elements": "^11.2.3",
    "@angular/forms": "^11.2.3",
    "@angular/language-service": "^11.2.3",
    "@angular/material": "^11.2.2",
    "@angular/material-moment-adapter": "^11.2.2",
    "@angular/platform-browser": "^11.2.3",
    "@angular/platform-browser-dynamic": "^11.2.3",
    "@angular/router": "^11.2.3",

[alan-agius4]

Hi @kmaraz,

Inline scripts should never be optimized. I noticed that you are using @angular-builders/custom-webpack, can this be caused by this 3rd party builder?

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[kmaraz]

I'll do it, thanks!

[kmaraz]

Hi @alan-agius4, here it is: https://github.com/kmaraz/angular-optimization-bug

When I was testing it I have found the bug:

When the setting is:

"optimization": true,

Everything is correct.

When the setting is:

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

Everything is correct.

But when I set:

"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": true <<<<<<< THIS
  },
  "fonts": true
},

Then the code inside <script> tag is processed and broken.

Script in index.html before:

 <script>
    (function(t,e){var n=""+l(t)+!!e;this.xhrGuids&&!this.xhrGuids[n]&&(this.xhrGuids[n]=!0,this.totalCbs+=1)})
  </script>

Script in index.html after (as seen in dist directory in the repo):

<script>
    (function(t,e){var n+l(t)+!!e;this.xhrGuids&&!this.xhrGuids[n]&&(this.xhrGuids[n]=!0,this.totalCbs+=1)})
  </script>

Is there anything else I can do?