Index html generation failed on ng build in Angular 12 #20804

anuj9196 · 2021-05-15T07:45:44Z

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,
            ...
         }
     }
}

The text was updated successfully, but these errors were encountered:

alan-agius4 · 2021-05-15T08:39:38Z

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 · 2021-05-15T15:46:05Z

@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 · 2021-05-17T07:28:12Z

@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 · 2021-05-17T21:00:39Z

@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 · 2021-05-24T08:58:17Z

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

tfrijsewijk · 2021-05-28T11:52:22Z

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 · 2021-05-30T04:26:18Z

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 · 2021-05-30T17:55:55Z

@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 · 2021-05-31T07:23:38Z

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

aipirvu · 2021-06-01T12:39:38Z

"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.

restfulhead · 2021-06-02T18:02:45Z

I got undefined:3:xxx: @font-face missing '}' after upgrading from 11 to 12. Setting inlineCritical to false as suggested above fixed it.

Exop63 · 2021-06-03T11:27:04Z

Index html generation failed.
undefined:1:111091: property missing ':'

fix: inlineCritical :false

zaerl · 2021-06-04T08:41:05Z

My build failed with the same error. And it was because of cssnano/cssnano#1105

The CSS:

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

The all is removed by cssnano.

Schiepek · 2021-06-11T21:11:27Z

I had the error:

Ã Index html generation failed. undefined:268:50133: @media missing '}'

Disabling 'inlineCritial' optimization works, but it's not a good solution cause it increases initial page load time.

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

After hours of searching, I found the line in my CSS which caused the trouble.

@media (min-width: 992px) {
  .nav-account .nav-account__item.has-children::after {
    content: "";
    display: inline-block;
    margin-left: 9px;
    width: 6px;
    height: 4px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'%3E%3Cpath transform='translate(-586.156 -1047.28)' fill='%23fff' d='M586.171,1048l0.708-.71,2.828,2.83-0.707.71Zm4.95-.71,0.707,0.71L589,1050.83l-0.707-.71Z'/%3E%3C/svg%3E");
    background-size: 6px 4px;
    background-repeat: no-repeat;
    background-position: center center;
    top: -2px;
    position: relative;
  }
}

I changed it then to base64 encoding and it worked:

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA2IDQnPjxwYXRoIHRyYW5zZm9ybT0ndHJhbnNsYXRlKC01ODYuMTU2IC0xMDQ3LjI4KScgZmlsbD0nI2ZmZicgZD0nTTU4Ni4xNzEsMTA0OGwwLjcwOC0uNzEsMi44MjgsMi44My0wLjcwNy43MVptNC45NS0uNzEsMC43MDcsMC43MUw1ODksMTA1MC44M2wtMC43MDctLjcxWicvPjwvc3ZnPg0K");

tfrijsewijk · 2021-06-13T07:42:48Z

@Schiepek your problem looks a bit like mine: background-image with data url to an SVG, but without a <style> element inside the SVG..

huan · 2021-06-19T18:40:54Z

@tfrijsewijk @Schiepek Thanks for the tips, I run this issue today and your solution helps me fix the problem.

danielehrhardt · 2021-06-27T22:41:13Z

If i add the Adyen CSS File:
@import "@adyen/adyen-web/dist/adyen.css";
The Build does have this Issue.

jewkesy · 2021-06-28T20:53:35Z

Getting the same issue using ClarityUI

maxima120 · 2021-07-01T19:28:25Z

I have same issue (with missing ':'). The switching inline critical off works. however I dont see why is it happening. I dont have @media all.. only reference to @media (it appears in 2 different css files):

@media (min-width: 768px) {
  html {
    font-size: 16.1px;
  }
}

The app hasnt changed and worked in Angular 10 but not 12.

DavidMarquezF · 2021-07-05T22:01:07Z

Why is this issue closed? It doesn't appear to be fixed.

For me it also happens with @media all, it removes the all. However, in the css nano issue cssnano/cssnano#1105 (comment) is said that this is the expected behavior of the tools that angular uses.

Apparently @media without anything behind defaults to @media all, thus it gets removed in order to save space.

slavede · 2021-07-06T07:54:00Z

I agree with @DavidMarquezF , at least leave it opened with the link to cssnano issue...although workaround works, we lose some optimization features with it.

maxima120 · 2021-07-07T15:47:11Z

this game can be played by two :) perhaps we should just open a new issue

…ng critical CSS inling to fail Workaround for Critters as it doesn't work when `@media all {}` is minified to `@media {}`. Closes #20804

…ng critical CSS inling to fail Workaround for Critters as it doesn't work when `@media all {}` is minified to `@media {}`. Closes #20804 (cherry picked from commit 3d71c63)

gaeldupont44 · 2021-07-13T14:28:06Z

Hello ! :)
Somebody could publish a npm version of the lib with the @alan-agius4 fix please ?

BobNovas · 2021-07-21T15:53:40Z

I got the following error on ng build, with Angular 12 and Clarity 5.4.1:
>ng build √ Browser application bundle generation complete. √ Copying assets complete. × Index html generation failed. undefined:10:275198: property missing ':'

I fixed this by removing the double quotes from 10 lines in a copy of clr-ui.css (and using the copy):

from: background-image: url("lots-o-characters")
to: background-image: url(lots-o-characters)

The double quotes appear to blow up the parser/optimizer or some part of the ng build, and removing the double quotes fixes that problem and doesn't appear to cause any others.

kkoo95 · 2021-07-23T09:27:56Z

@alan-agius4 thanks for the fix, but there is still the same issue with @page, as in:

✖ Index html generation failed.
undefined:7:215671: @page missing '}'

our css looks like this:

utils.scss

@media print {
  @page { ... }
}

style.scss

.rule {
  @import 'utils'
}

it results in:

@media print {
  @page {
  .rule  { ... }
}

I don't know if you'll be able to add another workaround for that or if i must use the optimization one:

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

angular-automatic-lock-bot · 2021-08-23T08:07:58Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

alan-agius4 transferred this issue from angular/angular May 15, 2021

anuj9196 mentioned this issue May 15, 2021

Building with "nx build --prod" leaves error: "Index html generation failed." nrwl/nx#4381

Closed

alan-agius4 self-assigned this May 15, 2021

alan-agius4 closed this as completed May 17, 2021

tfrijsewijk mentioned this issue May 28, 2021

Angular 12 is unable to bundle dso.css dso-toolkit/dso-toolkit#1152

Closed

huan added a commit to BOOOOTBAY/botbay.ml that referenced this issue Jun 19, 2021

fix angular 12 bug (angular/angular-cli#20804 (comment))

e4ad2bc

alan-agius4 reopened this Jul 7, 2021

alan-agius4 added the area: devkit/build-angular label Jul 7, 2021

alan-agius4 added the needs: investigation Requires some digging to determine if action is needed label Jul 7, 2021

ngbot bot modified the milestone: needsTriage Jul 7, 2021

alan-agius4 mentioned this issue Jul 8, 2021

fix(@angular-devkit/build-angular): fix issue were @media all causing critical CSS inling to fail #21306

Merged

filipesilva closed this as completed in #21306 Jul 9, 2021

filipesilva pushed a commit that referenced this issue Jul 9, 2021

fix(@angular-devkit/build-angular): fix issue were @media all causi…

3d71c63

…ng critical CSS inling to fail Workaround for Critters as it doesn't work when `@media all {}` is minified to `@media {}`. Closes #20804

alan-agius4 mentioned this issue Jul 9, 2021

fix(@angular-devkit/build-angular): fix issue were @media all causi… #21321

Merged

tgilino mentioned this issue Jul 14, 2021

Unable to locate mapbox-gl.css stylesheet warning reported during "ng build" after upgrading to Angular 12 mapbox/mapbox-gl-js#10853

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 23, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Index html generation failed on ng build in Angular 12 #20804

Index html generation failed on ng build in Angular 12 #20804

anuj9196 commented May 15, 2021

alan-agius4 commented May 15, 2021

inexuscore commented May 15, 2021

alan-agius4 commented May 17, 2021 •

edited

Loading

rolfback commented May 17, 2021 •

edited

Loading

benardbees commented May 24, 2021

tfrijsewijk commented May 28, 2021 •

edited

Loading

mtinnes commented May 30, 2021 •

edited

Loading

inexuscore commented May 30, 2021

slavede commented May 31, 2021 •

edited

Loading

aipirvu commented Jun 1, 2021

restfulhead commented Jun 2, 2021

Exop63 commented Jun 3, 2021

zaerl commented Jun 4, 2021

Schiepek commented Jun 11, 2021 •

edited

Loading

tfrijsewijk commented Jun 13, 2021

huan commented Jun 19, 2021

danielehrhardt commented Jun 27, 2021

jewkesy commented Jun 28, 2021

maxima120 commented Jul 1, 2021 •

edited

Loading

DavidMarquezF commented Jul 5, 2021

slavede commented Jul 6, 2021 •

edited

Loading

maxima120 commented Jul 7, 2021

gaeldupont44 commented Jul 13, 2021 •

edited

Loading

BobNovas commented Jul 21, 2021 •

edited

Loading

kkoo95 commented Jul 23, 2021 •

edited

Loading

angular-automatic-lock-bot bot commented Aug 23, 2021

Index html generation failed on ng build in Angular 12 #20804

Index html generation failed on ng build in Angular 12 #20804

Comments

anuj9196 commented May 15, 2021

Bug Report

Affected Package

Is this a regression?

Description

Minimal Reproduction

Exception or Error

Your Environment

alan-agius4 commented May 15, 2021

inexuscore commented May 15, 2021

alan-agius4 commented May 17, 2021 • edited Loading

rolfback commented May 17, 2021 • edited Loading

benardbees commented May 24, 2021

tfrijsewijk commented May 28, 2021 • edited Loading

mtinnes commented May 30, 2021 • edited Loading

inexuscore commented May 30, 2021

slavede commented May 31, 2021 • edited Loading

aipirvu commented Jun 1, 2021

restfulhead commented Jun 2, 2021

Exop63 commented Jun 3, 2021

zaerl commented Jun 4, 2021

Schiepek commented Jun 11, 2021 • edited Loading

tfrijsewijk commented Jun 13, 2021

huan commented Jun 19, 2021

danielehrhardt commented Jun 27, 2021

jewkesy commented Jun 28, 2021

maxima120 commented Jul 1, 2021 • edited Loading

DavidMarquezF commented Jul 5, 2021

slavede commented Jul 6, 2021 • edited Loading

maxima120 commented Jul 7, 2021

gaeldupont44 commented Jul 13, 2021 • edited Loading

BobNovas commented Jul 21, 2021 • edited Loading

kkoo95 commented Jul 23, 2021 • edited Loading

angular-automatic-lock-bot bot commented Aug 23, 2021

alan-agius4 commented May 17, 2021 •

edited

Loading

rolfback commented May 17, 2021 •

edited

Loading

tfrijsewijk commented May 28, 2021 •

edited

Loading

mtinnes commented May 30, 2021 •

edited

Loading

slavede commented May 31, 2021 •

edited

Loading

Schiepek commented Jun 11, 2021 •

edited

Loading

maxima120 commented Jul 1, 2021 •

edited

Loading

slavede commented Jul 6, 2021 •

edited

Loading

gaeldupont44 commented Jul 13, 2021 •

edited

Loading

BobNovas commented Jul 21, 2021 •

edited

Loading

kkoo95 commented Jul 23, 2021 •

edited

Loading