angular-cli: Build error with 1.7.1 when using Angular Material

Versions

<!--
Angular CLI: 1.7.0
Node: 8.9.1
OS: darwin x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

@angular/cdk: 5.2.2
@angular/cli: 1.7.1
@angular/flex-layout: 2.0.0-beta.12
@angular/material: 5.2.2
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.6.2
webpack: 3.11.0
-->

Repro steps

git clone https://github.com/ngx-rocket/generator-ngx-rocket
npm link .
mkdir repro && cd repro
ngx new. Select all default options but choose “Angular Material” for the UI question
npm run e2e

Observed behavior

With angular-cli@1.7.1 I have this error when I build a project using Angular Material:

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/main.scss
(Emitted value instead of an instance of Error) CssSyntaxError: /Users/noda/github/generator-ngx-app/sample/node_modules/material-design-icons/iconfont/material-icons.css:10:12: Can't resolve '../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf)%20format(%27truetype%27' in '/Users/noda/github/generator-ngx-app/sample/src'

   8 |        url(MaterialIcons-Regular.woff2) format('woff2'),
   9 |        url(MaterialIcons-Regular.woff) format('woff'),
> 10 |        url(MaterialIcons-Regular.ttf) format('truetype');
     |            ^
  11 | }

When reverting back to angular-cli@1.7.0 everything works perfectly.

Desired behavior

App builds correctly with angular-cli@1.7.1

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 26
Comments: 18 (5 by maintainers)

Commits related to this issue

Package updates - also see https://github.com/angular/angular-cli/issues/9726 — committed to malariagen/sims-backbone by idwright 6 years ago

Most upvoted comments

Same issue.

There is a serious problem in CLI management which needs to be solved.

First, it’s the third times we have a CSS regression issue in minor or patch releases, just in the last few weeks. It’s not acceptable in such an important project. Tests are clearly insufficient.

Then and most importantly, it’s not normal to have to wait so long for regressions fixes, just because the CLI team sticks to a completely inflexible and arbitrary calendar. Regressions should be fixed and new patch releases published immediately, like in any other library. I really don’t understand this way of managing Angular (and I’m not alone on this point). All process are automated so it’s easy to publish a new release.

+19

cyrilletuzi on Feb 23, 2018

Roughly the same error is happening with Devextreme icons when trying to load them using angular-cli 1.7.1. Reverting to 1.7.0 also solves this for me.

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/devextreme/dist/css/dx.light.css
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\Vincent Lycoops\projects\web-acc\node_modules\devextreme\dist\css\dx.light.css:3219:12: Can't resolve 'icons/dxicons.woff)%20format(%27woff%27),%20url(icons/dxicons.ttf)%20format(%27truetype%27' in 'C:\Users\Vincent Lycoops\projects\web-acc\node_modules\devextreme\dist\css'

  3217 | @font-face {
  3218 |   font-family: 'DXIcons';
> 3219 |   src: url(icons/dxicons.woff) format('woff'), url(icons/dxicons.ttf) format('truetype');
       |            ^
  3220 |   font-weight: normal;
  3221 |   font-style: normal;

wartab on Feb 22, 2018

@clydin Yes the error lies with material icons, but using Google Fonts is not an option since my targets includes Cordova and offline support is needed.

I also agree with @cyrilletuzi : while I cannot deny that the angular CLI does a great job overall, it’s not normal to have patch releases that breaks app builds so often. For the 1.6 branch, I had to wait for 1.6.5 until I could build my apps again. In the meanwhile, we can’t do anything else than reverting to a previous version.

I also proposed using our CI which builds apps reflecting more “real world” use cases to complement your tests (https://github.com/angular/angular-cli/issues/9317) and setup a canary branch for this, but as it’s not part of your release process all I can do is raise issues like this one each time it breaks which is not quite ideal.

sinedied on Feb 23, 2018

@clydin unfortunately I cannot add quotes in @angular/material packages, so I have to wait for the fix 😉

sinedied on Feb 22, 2018

Yes; the last part was intended to be lazy. A fix and additional test coverage is in the process of being added. Also, note that this issue only affects unquoted urls. If and where possible, quotes can be added to temporarily workaround issue.

clydin on Feb 22, 2018

After execute an: npm upgrade , it worked for me!

clebertmoura on Mar 2, 2018