CODEWITHSUNDEEP
angularangular12angularbuild
Raphaël Balet
Raphaël Balet

Reputation: 8573

Angular 12 Index html generation failed error

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

Upvotes: 4

Views: 5069

Answers (3)

bc100k
bc100k

Reputation: 159

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.

Upvotes: 0

Viktor Tarnavskyi
Viktor Tarnavskyi

Reputation: 631

In angular.json replace:

"optimization": true

to:

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

Upvotes: 13

Rapha&#235;l Balet
Rapha&#235;l Balet

Reputation: 8573

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.

Upvotes: 1

Related Questions