Angular 12 Index html generation failed error

Question

Upgrading to angular 12 with the following command ng update @angular/core@12 @angular/cli@12 cause me to have the following error, when compiled with the --configuration production mode.

✖ Index html generation failed.
undefined:15:4027680: missing '}'

It's a duplicate of this question but wanted to post a proper question / answer since it will surely help others and I don't know when we will be able to post again on the thread since it was closed some days ago

Answer 1

In angular.json replace:

"optimization": true 

to:

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

Answer 2

it's an error from the cssnano library here the bug report reporter in the following topic that was included in the latest version of angular.

Basically

Providing the following input:
@media all { p{ display: none; } }
The following output is generated
@media{p{display: none;}}

But @media alone doesn't exist, which result in a compiling error.

To find where the error is

In the message you see in the console, undefined:15 the 15 is the line, in your style.scss that cause the bug to happen.

For me, I had to comment the code.