Index html generation failed. `property missing ':'` #20760

kemsky · 2021-05-13T11:27:49Z

🐞 Bug report

Command (mark with an `x`)

Is this a regression?

Yes

Yes, the previous version in which this bug was not present was: ^11.0.0

Description

Build fails, the error message is misleading:

√ Browser application bundle generation complete.
√ Copying assets complete.
× Index html generation failed.
undefined:1:1234: property missing ':'

🔬 Minimal Reproduction

https://github.com/kemsky/angular-cli-bug

This CSS breaks the build:

/**
This document validates as CSS level 3 + SVG !
**/
.tox-rtc-remote-image {
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A");
}

.mce-spellchecker-word {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
}

🔥 Exception or Error


× Index html generation failed.
undefined:1:1234: property missing ':'

🌍 Your Environment


Angular CLI: 12.0.0
Node: 14.15.3
Package Manager: npm 6.14.9
OS: win32 x64

Angular: 12.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... 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
@schematics/angular             12.0.0
rxjs                            6.6.7
typescript                      4.2.4

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

kkachniarz220 · 2021-05-13T13:03:25Z

I also started getting this error after updating to version 12

alan-agius4 · 2021-05-13T14:42:39Z

This appears to be an issue in CSS package.

const css = require('css');

const cssContent = `
.tox-rtc-remote-image {background:url("data:image/svg+xml;charset=UTF-8,%3Csvg%2width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A");}.mce-spellchecker-word {background:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");}
`

css.parse(cssContent);

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

Lets continue tracking this reworkcss/css#154

MichalK6677 · 2021-05-14T10:28:50Z

I am getting the same error after Angular 12 update.

I used the critical CSS inlining workaround.

Anyway, the repo https://github.com/reworkcss/css does not seem to be very active.

alan-agius4 · 2021-05-14T10:40:17Z

I am getting the same error after Angular 12 update.

I used the critical CSS inlining workaround.

Anyway, the repo https://github.com/reworkcss/css does not seem to be very active.

Yeah, I already highlighted this to the Google Chrome team.

hwebb · 2021-05-15T08:26:45Z

I'm happy that I'm not the only one getting this issue. It seems to fail on an imported CSS file containing at least 2 background: url(...) and one url has a closing bracket in the string.

andrew-landsverk-win · 2021-05-17T12:44:53Z

@hwebb How were you able to determine which files were causing the build issues?

hwebb · 2021-05-17T17:07:28Z

@hwebb How were you able to determine which files were causing the build issues?

I just disabled everything until it worked again, then I enabled 1 by 1 until I found the exact thing that failed and I made some tests on the CSS until I found the specific line... I know it's old school debugging, but there is not much info of where the issue is.
The workaround of alan-agius4 above did work.

pavelsource · 2021-05-18T12:33:56Z

I am using UIkit in my project and after Angular 12 upgrade I started receiving the following error:

 ng build
✔ Browser application bundle generation complete.
✔ ES5 bundle generation complete.
✔ Copying assets complete.
✖ Index html generation failed.
undefined:15:204028: property missing ':'

After isolating tons of .scss and .css files I found that the following variables in /node_modules/uikit/src/scss/variables-theme.scss are causing this error:

$internal-divider-icon-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
$internal-form-select-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
$internal-form-datalist-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
$internal-form-radio-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
$internal-form-checkbox-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
$internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
$internal-list-bullet-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
$internal-nav-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
$internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
$internal-accordion-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
$internal-accordion-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;

Not sure where to go next with it.

i23591326 · 2021-05-18T19:39:42Z

Getting this problem with @angular/material-experimental/mdc-form-field. Looks like it has been broken somewhere at "migrate to the Sass module system" branch (check for changes for mdc-text-field.$focused-label-color for example https://github.com/angular/components/pull/21204/files#diff-334e35073fa3ed0afa80d4f1c4f326384ccc480c2ed62d909c17345dc6fcbe42R22). I guess it's worth mentioning here.

junekpavel · 2021-05-26T09:58:18Z

I'm having same problem, but with Error: undefined:2:3017528: missing '}'.

Disabling critical CSS inlining worked for me to fix build.

But we are also using Angular Universal and when I run builded ssr application I get the exactly same error.

EDIT:

I found the similar workaround - disabling critical CSS inlining even for SSR. If anyone having same issue, you can add inlineCriticalCss: false to ngExpressEngine options:

  server.engine('html', ngExpressEngine({
    bootstrap: module,
    inlineCriticalCss: false,
  }));

…tps://github.com/angular/angular-cli/issues/20760\#issuecomment-889918677)

changhuixu · 2021-08-19T21:55:25Z

having the same issue

Disabled inlineCritical CSS optimization due to open Issue angular/angular-cli#20760

See reworkcss/css#154 angular/angular-cli#20760 nrwl/nx#4381 Co-authored-by: Remo Loetscher <[email protected]>

With this change we disable critical css inline by default. The main motivations are the following issues angular/angular-cli#20760 and angular/angular-cli#20864. BREAKING CHANGE: Inlining of critical CSS is no longer enable by default. Users already on Angular version 12 and have not opted-out from using this feature are encouraged to opt-in using the `inlineCriticalCss` option. The motivation behind this change is that the package used to parse the CSS has a number of defects which can lead to unactionable error messages when updating to Angular 13 from versions priors to 12. Such errors can be seen in the following issue angular/angular-cli#20760.

… default With this change we disable critical css inline by default. The main motivations are the following issues #20760 and #20864. BREAKING CHANGE: Inlining of critical CSS is no longer enable by default. Users already on Angular CLI version 12 and have not opted-out from using this feature are encouraged to opt-in using the browser builder `inlineCritical` option. The motivation behind this change is that the package used to parse the CSS has a number of defects which can lead to unactionable error messages when updating to Angular 13 from versions priors to 12. Such errors can be seen in the following issue #20760. ```json "configurations": { "production": { "optimization": { "styles": { "inlineCritical": true, } }, ... } ```

codecat15 · 2021-10-07T21:13:07Z

what's painful here is that you just get a message which says

✖ Index html generation failed.
undefined:9:396236: property missing ':'

it would be nice if it tells which file is causing the problem with the line number

hakimio · 2021-10-15T20:59:51Z

@codecat15 you know what would be even more helpful? If reworkcss/css library was maintained and its bugs were fixed.

kdubious · 2021-10-18T23:31:07Z

I tripped on this by including "node_modules/@clr/ui/clr-ui.css" in my build

angular-automatic-lock-bot · 2021-11-21T08:02:55Z

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 self-assigned this May 13, 2021

alan-agius4 closed this as completed May 13, 2021

alan-agius4 reopened this May 13, 2021

alan-agius4 added area: @angular-devkit/build-angular devkit/build-angular:browser freq1: low Only reported by a handful of users who observe it rarely severity3: broken labels May 13, 2021

ngbot bot added this to the needsTriage milestone May 13, 2021

alan-agius4 added state: blocked on upstream type: bug/fix labels May 13, 2021

ngbot bot modified the milestones: needsTriage, Backlog May 13, 2021

JoostK mentioned this issue May 14, 2021

error on ng serve angular v12 #20791

Closed

leonelvsc mentioned this issue May 14, 2021

Unable to build in --configuration production angular 12 angular/angular#42097

Closed

DeffiDeffi mentioned this issue May 14, 2021

ng -12 upgrade, getting missing property on build for production #20521

Closed

alan-agius4 mentioned this issue May 15, 2021

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

Closed

alan-agius4 mentioned this issue May 19, 2021

Angular 12: ng build fail with undefined:5:64672: property missing ':' #20845

Closed

15 tasks

babich-a mentioned this issue May 20, 2021

Angular v12 compile error DevExpress/DevExtreme#17518

Closed

alan-agius4 mentioned this issue May 21, 2021

Production build fails after upgrade to version 12 #20884

Closed

15 tasks

alan-agius4 mentioned this issue May 27, 2021

CSS google font import breaks ng-serve in Angular 12 #20975

Closed

15 tasks

aorin mentioned this issue Aug 18, 2021

Dependency update luomus/laji#166

Merged

olzraiti referenced this issue in luomus/laji Aug 18, 2021

fix optimized builds via disabling options.styles.inlineCriticals (ht…

44bcfbd

…tps://github.com/angular/angular-cli/issues/20760\#issuecomment-889918677)

waterplea mentioned this issue Aug 23, 2021

[BUG] Angular 12 build failed (production) taiga-family/taiga-ui#641

Closed

alan-agius4 mentioned this issue Aug 27, 2021

[REGRESSION][v12.2] Font is no longer loaded #21662

Closed

2 tasks

coryrylan mentioned this issue Aug 31, 2021

Index html generation failed. undefined:9:283862: property missing ':' vmware-archive/clarity#6306

Closed

hwdotexe added a commit to hwdotexe/website that referenced this issue Sep 1, 2021

Upgrade to Angular 12

8c728b2

Disabled inlineCritical CSS optimization due to open Issue angular/angular-cli#20760

ozavodny mentioned this issue Sep 7, 2021

Issue with angular inlineCritical optimization scttcper/ngx-toastr#900

Closed

This was referenced Sep 8, 2021

fix: encode svg to Base64, prevent build optimizer error scttcper/ngx-toastr#901

Merged

Angular12: × Index html generation failed. ag-grid/ag-grid#4663

Closed

alan-agius4 mentioned this issue Sep 8, 2021

undefined:14:952802: missing '}' #21726

Closed

15 tasks

scttcper pushed a commit to scttcper/ngx-toastr that referenced this issue Sep 8, 2021

fix: encode svg to Base64, prevent build optimizer error (#901)

900974c

See reworkcss/css#154 angular/angular-cli#20760 nrwl/nx#4381 Co-authored-by: Remo Loetscher <[email protected]>

alan-agius4 mentioned this issue Sep 30, 2021

CSS inlining bug when using an @import statement with a url that contains a semi-colon #21721

Closed

alan-agius4 added freq3: high and removed freq1: low Only reported by a handful of users who observe it rarely labels Sep 30, 2021

This was referenced Oct 6, 2021

feat(@angular-devkit/build-angular): disable critical CSS inlining by default #21880

Merged

feat(@nguniversal/common): disable critical CSS inlining by default angular/universal#2349

Merged

alan-agius4 linked a pull request Oct 20, 2021 that will close this issue

build: update all non-major dependencies #21982

Merged

1 task

alan-agius4 mentioned this issue Oct 20, 2021

build: update critters to version 0.0.11 #21983

Merged

alan-agius4 removed the state: blocked on upstream label Oct 20, 2021

filipesilva closed this as completed in #21982 Oct 21, 2021

nizamial09 mentioned this issue Oct 26, 2021

mgr/dashboard: Update Angular version to 12 ceph/ceph#43404

Merged

3 tasks

alan-agius4 unpinned this issue Oct 27, 2021

angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 21, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Index html generation failed. `property missing ':'` #20760

Index html generation failed. `property missing ':'` #20760

kemsky commented May 13, 2021 •

edited

Loading

kkachniarz220 commented May 13, 2021

alan-agius4 commented May 13, 2021

MichalK6677 commented May 14, 2021

alan-agius4 commented May 14, 2021

hwebb commented May 15, 2021

andrew-landsverk-win commented May 17, 2021

hwebb commented May 17, 2021

pavelsource commented May 18, 2021

i23591326 commented May 18, 2021

junekpavel commented May 26, 2021 •

edited

Loading

changhuixu commented Aug 19, 2021

codecat15 commented Oct 7, 2021

hakimio commented Oct 15, 2021

kdubious commented Oct 18, 2021

angular-automatic-lock-bot bot commented Nov 21, 2021

Index html generation failed. property missing ':' #20760

Index html generation failed. property missing ':' #20760

Comments

kemsky commented May 13, 2021 • edited Loading

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

kkachniarz220 commented May 13, 2021

alan-agius4 commented May 13, 2021

MichalK6677 commented May 14, 2021

alan-agius4 commented May 14, 2021

hwebb commented May 15, 2021

andrew-landsverk-win commented May 17, 2021

hwebb commented May 17, 2021

pavelsource commented May 18, 2021

i23591326 commented May 18, 2021

junekpavel commented May 26, 2021 • edited Loading

changhuixu commented Aug 19, 2021

codecat15 commented Oct 7, 2021

hakimio commented Oct 15, 2021

kdubious commented Oct 18, 2021

angular-automatic-lock-bot bot commented Nov 21, 2021

Index html generation failed. `property missing ':'` #20760

Index html generation failed. `property missing ':'` #20760

kemsky commented May 13, 2021 •

edited

Loading

Command (mark with an `x`)

junekpavel commented May 26, 2021 •

edited

Loading