angular-cli: Since 1.6.4 Angular Material CSS import does not work anymore (breaking change)

Regarding the release notes for Angular 5.2

I’m frankly getting sick of reading things like ‘This is a minor release that is a drop-in replacement for 5.1 containing many bugfixes.’ and then having to spend 2 hours getting it to work until i stumble upon the right issue after having gone round and round in circles.

I just cannot fathom how nobody involved in releasing 5.2 would stop to think ‘hmm perhaps this update of our main project might cause a conflict with the latest version of our other main project’.

It just wastes probably literally millions of hours and all you need is to add a Known Issues section that is kept updated. I’m sorry but it’s pathetic.

This is indeed a defect and will be corrected in the next patch release. The tilde can actually be removed to retain existing behavior.

Forget all this reverting to 1.6.3 stuff. As @clydin said for now

Just remove the tilde ~ from the path.

@import “@angular/material/prebuilt-themes/indigo-pink.css”;

This works for me with Angular 5.2 with CLI 1.6.4

Whether this is a temporary fix that itself will break again I’m not clear. Just make a mental note for the next release that you may have to put the tilde back again. For the record I only saw this error updating from Angular 5.1 > 5.2 - I don’t think the CLI version itself is solely to blame.

Thanks @clydin ! removing the tilde correct the behaviour for Angular Material theme import. In my project I also have an import for

@import "~material-design-icons/iconfont/material-icons.css";

and removing the tilde actually give the error

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
Module not found: Error: Can't resolve './MaterialIcons-Regular.woff2'

It worked until angular cli version 1.6.3 😃

Beyond ridiculous. If I have to spend another set of hours having to hunt down such stupid issues… a tilde that used to work… really? I’m just going to switch to a different framework it is getting impossible to work with.

Resolved in 1.6.5 & 1.7.0-beta.1. If this problem still persists for anyone, please open a new issue detailing the circumstances of the problem.

It’s fixed, we just have to wait for a new release.

actually removing telda ‘~’ ,solved the problem for me either, i’m using: angular-cli@1.6.4 npm@5.6.0 windows 8.1-64 bit.

I moved the @imports from my css styles to my scss styles and they worked again. Note that I was only having the issue for --prod builds so not sure if it’s a different issue.

In SCSS: @import url('https://fonts.googleapis.com/css?family=Material+Icons');

I resolved the issue by upgrading @angular/cli to version 1.6.5 via my package.json

"@angular/cli": "^1.6.5",

@CisSasGot Already merged see 5d346c1423f5d7297b1084d14de1665216450798

This is the eay way to get rid of “ERROR in ./node_modules/css-loader?{“sourceMap”:false,“import”:false}!.” Run the below: npm install --save-dev @angular/cli@1.6.3

downgrade is working, stop ng serve, downgrade package.json

 "devDependencies": {
    "@angular/cli": "^1.6.3",
 ...
}

then run again in your project

 npm i -S -d -D @angular/cli
+ @angular/cli@1.6.3
added 3 packages, removed 12 packages, updated 3 packages and moved 7 packages in 16.723s

run ng serve

 agb@MacPro  ~/Sites/test   development ●  ng serve
Your global Angular CLI version (1.6.4) is greater than your local
version (1.6.3). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-01-17T09:42:10.576Z
Hash: f2e3ecfc884e2f1a1625
Time: 28136ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 535 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 607 kB [initial] [rendered]
chunk {scripts} scripts.bundle.js (scripts) 20.8 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 1.67 MB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 45 MB [initial] [rendered]

webpack: Compiled successfully.

full depedencies

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/cdk": "^5.0.4",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/flex-layout": "^2.0.0-beta.12",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.0.4",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/platform-server": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@asymmetrik/ngx-leaflet": "^3.0.1",
    "@ngrx/effects": "^4.1.1",
    "@ngrx/router-store": "^4.1.1",
    "@ngrx/store": "^4.1.1",
    "@ngrx/store-devtools": "^4.1.1",
    "@types/leaflet": "^1.2.5",
    "@types/lodash": "^4.14.92",
    "angular2-jwt": "^0.2.3",
    "angular2-jwt-refresh": "^0.1.0",
    "apollo-angular": "^1.0.1",
    "apollo-angular-link-http": "^1.0.1",
    "apollo-cache-inmemory": "^1.1.5",
    "apollo-client": "^2.2.0",
    "apollo-link": "^1.0.7",
    "apollo-link-context": "^1.0.3",
    "apollo-link-http": "^1.3.2",
    "apollo-link-state": "^0.3.1",
    "apollo-link-ws": "^1.0.4",
    "apollo-utilities": "^1.0.4",
    "core-js": "^2.5.3",
    "devextreme": "^17.2.4",
    "devextreme-angular": "^17.2.4",
    "faker": "^4.1.0",
    "graphql": "^0.12.3",
    "graphql-subscriptions": "^0.5.6",
    "graphql-tag": "^2.6.1",
    "hammerjs": "^2.0.8",
    "leaflet": "^1.3.0",
    "lodash.merge": "^4.6.0",
    "logrocket": "^0.6.2",
    "logrocket-ngrx": "0.0.0",
    "ngrx-store-logger": "^0.2.0",
    "node-sass": "^4.7.2",
    "raven-js": "^3.22.1",
    "rxjs": "^5.5.6",
    "subscriptions-transport-ws": "^0.9.5",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.3",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@storybook/addon-actions": "^3.4.0-alpha.1",
    "@storybook/addon-links": "^3.4.0-alpha.1",
    "@storybook/addon-notes": "^3.4.0-alpha.1",
    "@storybook/angular": "^3.4.0-alpha.1",
    "@types/jasmine": "^2.8.4",
    "@types/jasminewd2": "^2.0.3",
    "@types/lodash-es": "^4.17.0",
    "@types/node": "^9.3.0",
    "codelyzer": "~4.0.2",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.3",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ngrx-store-freeze": "^0.2.0",
    "protractor": "~5.2.2",
    "serenity-js": "^1.10.2",
    "ts-node": "^4.1.0",
    "tslint": "~5.9.1",
    "typescript": "^2.6.2",
    "webpack-bundle-analyzer": "^2.9.2"
  },

Had the same issue, but for now I just downgraded CLI back to 1.6.3 (exact), and everything is fine.

I am also having this issue. Is there an easy way to roll back to angular-cli 1.6.0?

@clydin Its still not working with ng build --prod with below config. Hope you guys added an unit test for this feature. This doesn’t work: @import 'https://fonts.googleapis.com/icon?family=Material+Icons';

This works: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

devDependencies": { “@angular/cli”: “^1.7.4”, “@angular/compiler-cli”: “^5.2.9”, “@angular/language-service”: “^5.2.0”, “@types/jasmine”: “~2.8.3”, “@types/jasminewd2”: “~2.0.2”, “@types/node”: “~6.0.60”, “codelyzer”: “^4.0.1”, “jasmine-core”: “~2.8.0”, “jasmine-spec-reporter”: “~4.2.1”, “karma”: “~2.0.0”, “karma-chrome-launcher”: “~2.2.0”, “karma-cli”: “~1.0.1”, “karma-coverage-istanbul-reporter”: “^1.2.1”, “karma-jasmine”: “~1.1.0”, “karma-jasmine-html-reporter”: “^0.2.2”, “protractor”: “~5.1.2”, “ts-node”: “~4.1.0”, “tslint”: “~5.9.1”, “typescript”: “^2.6.2” }

I had the same problem but adding 3 lines of code it seems that the problem has disappeared, I will see if everything works and let my know.

I added

if (url.startsWith("~")) {
              url = url.substr(1);
 }

to the node_modules\@angular\cli\models\webpack-configs\styles.js file.

in the place where postcssImports({ appears in the first occurrence it was

postcssImports({
                resolve: (url, context) => {
                    return new Promise((resolve, reject) => {
                        loader.resolve(context, url, (err, result) => {
                            if (err) {
                                reject(err);
                                return;
                            }
                            resolve(result);
                        });
                    });
                },
   // ...
   // ...

and it has to be

postcssImports({
                resolve: (url, context) => {
                    return new Promise((resolve, reject) => {
                      if (url.startsWith("~")) {
                        url = url.substr(1);
                      }
                        loader.resolve(context, url, (err, result) => {
                            if (err) {
                                reject(err);
                                return;
                            }
                            resolve(result);
                        });
                    });
                },
   // ...
   // ...

this is not my solution, but the only one that helps something, but that no one answered the correctness of the solution from @jolafrite , that’s why I call reagain, post the bug-fix.

What do you think about this solution? this correct is it?, and what’s next?

I was able to simply remove the tilde from the import statement in my styles.css that was for the Angular Material theme. That worked. However… that approach did not work for other imported styles (font-awesome, etc.). So, I simply went back to the .angular-cli.json file to add my style imports there and that works fine with 1.6.4.

It is odd that the Angular team has let this seemingly simple bug out in the wild for so many days. I would have expected this to be fixed the same day that 1.6.4 was released or the next day.

Downgrade worked to me 😃

@simeyla thank you so much!

@pferretti You can also add the file to the .angular-cli.json styles array. That should copy it to the source and make a style link to it in head (just like it does for src/styles.css).

Edit: Nevermind, you need multiple files, then that wont work