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

Risav Karna
  • 936
  • 8
  • 16
Anuj TBE
  • 9,198
  • 27
  • 136
  • 285
  • try simply `ng build` – Developer May 14 '21 at 16:15
  • `ng build` completed successfully – Anuj TBE May 14 '21 at 16:53
  • 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. – Developer May 14 '21 at 17:25
  • 1
    In my case, setting `"buildOptimizer": false` in `angular.json` is working fine. when `true`, it is giving the above error. – Anuj TBE May 14 '21 at 19:30
  • 6
    Same case, but it tells me: Index html generation failed. undefined:9:146288: property missing ':'. Everything worked fine until upgrading to 12. – fmdavid May 21 '21 at 11:34
  • 3
    @fmdavid Check https://github.com/angular/angular-cli/issues/20804#issuecomment-841623644 for solution – Anuj TBE May 21 '21 at 12:42
  • 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](https://github.com/cssnano/cssnano/issues/1105) – Raphaël Balet May 28 '21 at 16:49
  • 2
    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 - https://github.com/angular/angular-cli/issues/20804#issuecomment-841623644 – Kanchan Jun 03 '21 at 07:47
  • In angular.json replace "optimization": true to "optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false }, – Viktor Tarnavskyi Jun 23 '21 at 13:24
  • 1
    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 } – lastjeef Jun 25 '21 at 12:59
  • Please read this for the correct answer: https://stackoverflow.com/questions/67742918/angular-12-index-html-generation-failed-error – Pablo Palacios Jul 22 '21 at 01:41
  • The detail for the error can be found here: https://github.com/angular/angular-cli/issues/20804 – Pablo Palacios Jul 22 '21 at 01:42
  • Check this link for a solution specific to Angular 12 https://github.com/angular/angular-cli/issues/20804#issuecomment-850937763 – Risav Karna Aug 03 '21 at 08:34
  • 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. – Marco Luly Aug 17 '21 at 09:15
  • In Angular 12, this is your answer: "optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false }, "fonts": false }, – Nick H Oct 07 '21 at 01:20
  • This appears to be a known bug. https://github.com/angular/angular-cli/issues/20760 – Steve Olson Jan 25 '22 at 12:54
  • To properly debug the problem, try running `ng serve --prod`. You should be able to find the error. – cozmik05 Feb 21 '22 at 02:27

1 Answers1

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.

David B.
  • 695
  • 5
  • 10
  • 5
    `ng build` completes successfully. Also the same project was not giving any such error on Angular 10. – Anuj TBE May 14 '21 at 16:54
  • 2
    I am having the same issue when I upgraded the project to Angular 12. But still looking for a solution. – Sagar Saini Aug 12 '21 at 18:16
  • 2
    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. – Marco Luly Aug 17 '21 at 08:51
  • run `ng s --prod` to debug. – cozmik05 Feb 21 '22 at 02:29