angular-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
Yes, the previous version in which this bug was not present was: ^11.0.0Description
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
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 81
- Comments: 38
Commits related to this issue
- cdi, ROKAS-7 workaround for a css related bug: https://github.com/angular/angular-cli/issues/20760#issuecomment-840608632 — committed to SchweizerischeBundesbahnen/journey-maps-client by swiss-chris 3 years ago
- cdi, ROKAS-7 workaround for a css related bug: https://github.com/angular/angular-cli/issues/20760#issuecomment-840608632 — committed to SchweizerischeBundesbahnen/journey-maps-client by swiss-chris 3 years ago
- fix production build after: https://github.com/angular/angular-cli/issues/20760 — committed to DevExpress/web-dashboard-demo by dimarudnev 3 years ago
- Pull request #111: cdi, ROKAS-7 upgrade to Angular 12 Merge in KI_ROKAS/journey-maps-client from feature/cdi/ROKAS-7-upgrade-to-angular-12 to master * commit '68cae3546efa7432da7acde8ece166143debd58... — committed to SchweizerischeBundesbahnen/journey-maps-client by swiss-chris 3 years ago
- fix optimized builds via disabling options.styles.inlineCriticals (https://github.com/angular/angular-cli/issues/20760\#issuecomment-889918677) — committed to luomus/laji by olzraiti 3 years ago
- Upgrade to Angular 12 Disabled inlineCritical CSS optimization due to open Issue https://github.com/angular/angular-cli/issues/20760 — committed to hwdotexe/website by hwdotexe 3 years ago
- fix: encode svg to Base64, prevent build optimizer error (#901) See https://github.com/reworkcss/css/issues/154 https://github.com/angular/angular-cli/issues/20760 https://github.com/nrwl/nx/issue... — committed to scttcper/ngx-toastr by loetscher 3 years ago
- feat(@nguniversal/common): disable critical CSS inlining by default With this change we disable critical css inline by default. The main motivations are the following issues https://github.com/angula... — committed to angular/universal by alan-agius4 3 years ago
- feat(@angular-devkit/build-angular): disable critical CSS inlining by default With this change we disable critical css inline by default. The main motivations are the following issues #20760 and #208... — committed to angular/angular-cli by alan-agius4 3 years ago
This appears to be an issue in CSS package.
As a workaround you can disable critical CSS inlining https://angular.io/guide/workspace-config#optimization-configuration.
Lets continue tracking this https://github.com/reworkcss/css/issues/154
I started getting this error after updating to version 12 from version 9 ( 9 -> 10 -> 11 -> 12) I used the workarround in production build configuration: “optimization”: { “scripts”: true, “styles”: { “minify”: true, “inlineCritical”: false }, “fonts”: true } and it solved the build problem.
Hey @davidpawar,
Yes, I managed to fix it by disabling
inclineCriticaloptimization, you can see it here Basically I changed one line inangular.jsonfile fromwith
I also started getting this error after updating to version 12
I also add:
But am still getting the error. Anybody have another workaround or solution?
I am using UIkit in my project and after Angular 12 upgrade I started receiving the following error:
After isolating tons of
.scssand.cssfiles I found that the following variables in/node_modules/uikit/src/scss/variables-theme.scssare causing this error:Not sure where to go next with it.
It would be nice to have a verbose message that gives more information of the actual issue that is trigging the build error.
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: falsetongExpressEngineoptions:Adding just this worked for me:
Hi, I already include the following to angular.json
but i am still getting the same error, is there anything i did wrong or any other workaround possible?
Yeah, I already highlighted this to the Google Chrome team.
I tripped on this by including
"node_modules/@clr/ui/clr-ui.css"in my build@codecat15 you know what would be even more helpful? If reworkcss/css library was maintained and its bugs were fixed.
what’s painful here is that you just get a message which says
it would be nice if it tells which file is causing the problem with the line number
I experienced another problem today where the build finished successfully, but the global and imported styles where missing on runtime. Only the component styles were loaded. It was also fixed by adding
inlineCritical: falsebut it’s kinda strange.after some digging, I found that each style line has more than one semicolon (😉 will break to more than one line which leads to different errors