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

In angular.json replace "optimization": true to "optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false } — Viktor Tarnavskyi, Jun 23 '21 at 13:38

score 10 · Accepted Answer · answered Jun 23 '21 at 13:39

10

In angular.json replace:

"optimization": true

to:

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

answered Jun 23 '21 at 13:39

Viktor Tarnavskyi

541
5
7

It seems to have worked, thx a lot! Could you explain me what could be the impact of changing the optimization like the following ? – Raphaël Balet Jun 23 '21 at 14:21
1

Looks like there is a small error on the CSS file. And the angular compiler is not ignoring them anymore – Viktor Tarnavskyi Jun 24 '21 at 08:44

score 1 · Answer 2 · answered May 28 '21 at 17:00

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.

My issue was similar; I had some `@import` CSS files in my **style.css**, and that's where the main problem was. Simply commenting out the import lines solved the issue — Abdur Rahman, Oct 05 '21 at 10:46

score 0 · Answer 3 · edited Jan 22 '22 at 06:33

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.

Angular 12 Index html generation failed error

3 Answers3

To find where the error is

Linked