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


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
  • 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

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.

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;

@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 ( 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.

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

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.

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