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.

Answer 3

I was facing this same issue in my Angular 12 project. On my style.scss file, I was importing the Google fonts using:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Raleway:ital,wght@0,700;1,700&display=swap');

So I proceeded to embed them on my index.html file:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Raleway:ital,wght@0,700;1,700&display=swap" rel="stylesheet">

Problem solved.