Solvedangular cli Index html generation failed. property missing ':'

🐞 Bug report

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc

Is this a regression?


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


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

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,");

.mce-spellchecker-word {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D''%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
15 Answers

βœ”οΈAccepted Answer

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,");}.mce-spellchecker-word {background:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D''%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");}


As a workaround you can disable critical CSS inlining

Lets continue tracking this reworkcss/css#154

Other Answers:

I also started getting this error after updating to version 12

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," !default;
$internal-form-select-image: "data:image/svg+xml;charset=UTF-8," !default;
$internal-form-datalist-image: "data:image/svg+xml;charset=UTF-8," !default;
$internal-form-radio-image: "data:image/svg+xml;charset=UTF-8," !default;
$internal-form-checkbox-image: "data:image/svg+xml;charset=UTF-8," !default;
$internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8," !default;
$internal-list-bullet-image: "data:image/svg+xml;charset=UTF-8," !default;
$internal-nav-parent-close-image: "data:image/svg+xml;charset=UTF-8," !default;
$internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8," !default;
$internal-accordion-open-image: "data:image/svg+xml;charset=UTF-8," !default;
$internal-accordion-close-image: "data:image/svg+xml;charset=UTF-8," !default;

Not sure where to go next with it.

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.


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,

More Issues: