Login/Register
Error in production build: Index html generation failed [closed]
Asked Answered
angularbuildangular12
L

1

21

Upgraded the Angular 10 project to Angular 12. But now on running production build, it is giving error

Index HTML generation failed.
undefined:6:720366 missing '}'

ng build --configuration production --aot

enter image description here

It is very difficult to find the error because it points to the generated HTML file. Node log will no do much.

The content of index.html

<!doctype html>
<html lang="en">

<head>
    <title>Quiz - Admin</title>
    <base href="/">
    <meta charset="utf-8">
</head>

<body>

<app></app>

</body>

</html>

While running the development build, locally does not give any error, even ng build completed successfully

Please check the build pipeline here: https://github.com/anuj9196/quiz-app/runs/2589355739?check_suite_focus=true#step:7:56

Laband answered 14/5, 2021 at 15:56 Comment(17)
try simply ng build – Unipersonal
ng build completed successfully – Laband
Now angular 12 we don't require to add --prod. ng build will do it automatically. And also no requirement for --aot. It's default now. – Unipersonal
In my case, setting "buildOptimizer": false in angular.json is working fine. when true, it is giving the above error. – Laband
Same case, but it tells me: Index html generation failed. undefined:9:146288: property missing ':'. Everything worked fine until upgrading to 12. – Margaretmargareta
@Margaretmargareta Check github.com/angular/angular-cli/issues/… for solution – Laband
For me, it was the use of @media all {} that give me an error, I just had to remove it and it worked flawlessly this is the bug report – Voluntarism
In angular.json modify the "optimization": true to following code - "optimization": { "scripts": true, "fonts": { "inline": true }, "styles": { "minify": true, "inlineCritical": false } }, Here is the GitHub issues - github.com/angular/angular-cli/issues/… – Chau
In angular.json replace "optimization": true to "optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false }, – Impedance
I had the same problem when mocing from Angular 9 to 12 ! I tried the workarround and it solved it replace "optimization :"true" in production configuration ( angular.json by : "optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false }, "fonts": true } – Aegis
Please read this for the correct answer: #67743418 – Varied
The detail for the error can be found here: github.com/angular/angular-cli/issues/20804 – Varied
Check this link for a solution specific to Angular 12 github.com/angular/angular-cli/issues/… – Anglian
Had the same misterious problem. The line:column problem was related to the style.css generated. Went on that line:column and there was a typo error: inculde instead of include. In my opinion, this question should be reopened. – Barragan
In Angular 12, this is your answer: "optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false }, "fonts": false }, – Accrual
This appears to be a known bug. github.com/angular/angular-cli/issues/20760 – Incoherent
To properly debug the problem, try running ng serve --prod. You should be able to find the error. – By
R
7

The error is not in the index.html file that you see in the folder structure. It occurs on generating the final index.html. This is a compilation error probably in the css/scss files (as the typescript seem to compile correctly). Make sure you have all curly brackets } closed in your css files.

Remind answered 14/5, 2021 at 16:21 Comment(4)
ng build completes successfully. Also the same project was not giving any such error on Angular 10. – Laband
I am having the same issue when I upgraded the project to Angular 12. But still looking for a solution. – Synchronic
Had the same misterious problem. The line:column problem was related to the style.css generated. Went on that line:column and there was a typo error: inculde instead of include. In my opinion, this question should be reopened. – Barragan
run ng s --prod to debug. – By

© 2022 - 2024 — McMap. All rights reserved.