Index html generation failed on ng build in Angular 12

[anuj9196]

Bug Report

Affected Package

Not sure which package is causing this error, here are the packages in use

{
  "name": "quiz-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.0",
    "@angular/cdk": "^12.0.0",
    "@angular/common": "~12.0.0",
    "@angular/compiler": "~12.0.0",
    "@angular/core": "~12.0.0",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "~12.0.0",
    "@angular/material": "^12.0.0",
    "@angular/platform-browser": "~12.0.0",
    "@angular/platform-browser-dynamic": "~12.0.0",
    "@angular/router": "~12.0.0",
    "@types/prismjs": "^1.16.5",
    "express": "^4.17.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "ngx-cookie-service": "^11.0.2",
    "path": "^0.12.7",
    "perfect-scrollbar": "^1.5.1",
    "prismjs": "^1.23.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.0",
    "@angular/cli": "~12.0.0",
    "@angular/compiler-cli": "~12.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/lodash": "^4.14.169",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  },
  "engines": {
    "node": "14.17.0",
    "npm": "6.14.13"
  }
}

Is this a regression?

Description

While running the build using ng build command, the build fails to generate the Index HTML file with the following error

Minimal Reproduction

Check the build log: https://github.com/anuj9196/quiz-app/runs/2589355739?check_suite_focus=true#step:7:56

To reproduce

• take a clone of the repository
• Install dependencies npm install
• Build the project ng build

Exception or Error

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✖ Index html generation failed.
undefined:4:720308: missing '}'

Your Environment

Angular Version:

Angular CLI: 12.0.0
Node: 14.17.0
Package Manager: npm 6.14.13
OS: darwin x64

Angular: 12.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@angular/flex-layout            11.0.0-beta.33
@schematics/angular             12.0.0
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?
Setting "optimization": false in the build > options builds the project file but the build budget size is 2 MB more.

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/quiz-app",
            "optimization": false,
            ...
         }
     }
}

[alan-agius4]

Likely related to #20760, will need to take a look later to confirm if it’s the same root cause with data URIs.

As a workaround you can disable critical CSS inlining https://angular.io/guide/workspace-config#optimization-configuration.

[inexuscore]

@alan-agius4 Thank you, resolved. I can't believe how many hours I've wasted on this LMAO! inline styles and data URIs in particular (base64 images, etc.) break Angular 12's production build, wow.

[alan-agius4]

@anuj9196,

It appears that in your case the problem is that the CSS optimizer is incorrectly optimising media queries which is causing the CSS parser to fail.

Opening style.css and navigating to the line and column indicated in the error message we find the below which is invalid CSS as the media query has no feature value instead of @media all.

@media{.page-break-after,.page-break-before{display:none}}

Let's continue tracking this cssnano/cssnano#1105

[rolfback]

@anuj9196,

It appears that in your case the problem is that the CSS optimizer is incorrectly optimising media queries which is causing the CSS parser to fail.

Opening style.css and navigating to the line and column indicated in the error message we find the below which is invalid CSS as the media query has no feature value instead of @media all.

@media{.page-break-after,.page-break-before{display:none}}

Let's continue tracking this cssnano/cssnano#1105

I had this problem as well and it made no difference if I set Optimization to false in angular.json. It turned out as you mentioned that in the compiled .css I had a bad css row at the position the error was telling me: list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); of which I just needed to remove the quotationmarks to have it working again. Thank you for the clue!

[benardbees]

"rxjs" caused me the same problem, upgrade to "rxjs": "7.1.0", and fix errors, worked for me

[tfrijsewijk]

I know the issue is closed, but I was unable to reproduce an error with cssnano.

I'm maintaining a component library which produces dso.css. Angular 12 is unable to bundle the dso.css in angular.json. The problem with the styling inside dso.css background-image with a data url to an image that contained a <style> with @keyframes.

My solution was to decode %7B to { and %7D to } within the <style>. The build passes but reports a warning:

npm run build

> angular12-test@0.0.0 build
> ng build

√ Browser application bundle generation complete.
√ Copying assets complete.
- Generating index html...1 rules skipped due to selector errors:
  100%25 -> Unmatched selector: %25
√ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.041503e2fd30c014fe9e.js      | main          | 212.34 kB
styles.a6563f3b5786fb7a36de.css   | styles        | 193.30 kB
polyfills.a4477f231111cac02cf0.js | polyfills     |  35.95 kB
runtime.e3d82d92b74a9840998d.js   | runtime       |   1.01 kB

                                  | Initial Total | 442.61 kB

Build at: 2021-05-28T11:51:27.159Z - Hash: f75e1905401770074415 - Time: 15522ms

The application works fine except for the animation which is now broken in IE11.

For more information see dso-toolkit/dso-toolkit#1152

[mtinnes]

disabling inlineCritical style optimization allows the build to succeed. The following config works for me however I'd like to now exactly why:
"optimization": { "scripts": true, "fonts": { "inline": true }, "styles": { "minify": true, "inlineCritical": false } },

[inexuscore]

@mtinnes yup, that fixes the problem. I had the same issue when upgrading some projects from Angular 11 to 12. In my case, the problem was base64 images. disabling inlineCritical or replacing data-uri images with image files resolved the issue.

[slavede]

It works for me too (upgrade from ng11 to ng12). Can you explain in short what does this do in the end?

[aipirvu]

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

Worked for me. This seems to be the best compromise; not disabling the optimization for all of them.

It works for me too (upgrade from ng11 to ng12). Can you explain in short what does this do in the end?

It only disables optimization for "inlineCritical", as per angular documentation: "Extract and inline critical CSS definitions to improve First Contentful Paint.". Here is an article explaining this in more detail.