angular-cli: Since 1.6.4 Angular Material CSS import does not work anymore (breaking change)
Versions
Angular CLI: 1.6.4
Node: 9.4.0
OS: linux x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cdk: 5.0.4
@angular/cli: 1.6.4
@angular/material: 5.0.4
@angular-devkit/build-optimizer: 0.0.37
@angular-devkit/core: 0.0.24
@angular-devkit/schematics: 0.0.45
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.4
@schematics/angular: 0.1.12
typescript: 2.6.2
webpack: 3.10.0
Repro steps
A new Angular CLI and Angular Material project like mentioned here: https://material.angular.io/guide/getting-started
Observed behavior
The import @import "~@angular/material/prebuilt-themes/indigo-pink.css";
in the styles.css
fails:
ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in '/.../src'
at onError (/.../node_modules/enhanced-resolve/lib/Resolver.js:61:15)
at loggingCallbackWrapper (/.../node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/.../node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/.../node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/.../node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/.../node_modules/tapable/lib/Tapable.js:252:11)
at /.../node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
at loggingCallbackWrapper (/.../node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/.../node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/.../node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/.../node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/.../node_modules/tapable/lib/Tapable.js:252:11)
at innerCallback (/.../node_modules/enhanced-resolve/lib/Resolver.js:144:11)
at loggingCallbackWrapper (/.../node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/.../node_modules/tapable/lib/Tapable.js:249:35)
at resolver.doResolve.createInnerCallback (/.../node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
@ ./src/styles.css 4:14-138
@ multi ./src/styles.css
Desired behavior
No error or update Angular Material Getting started section.
Mention any other details that might be useful (optional)
Worked until 1.6.3 😃
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 47
- Comments: 45 (7 by maintainers)
Commits related to this issue
- Fix the import for the app to compile Workaround for the latest CLI bug https://github.com/angular/angular-cli/issues/9185 — committed to punisherx/angular-material-dashboard by punisherx 6 years ago
- Removed the tilda from @import Workaround for the latest CLI issue https://github.com/angular/angular-cli/issues/9185 — committed to punisherx/angular-material-dashboard by punisherx 6 years ago
- fix build demo - block angular cli to version 1.6.3 until the issue https://github.com/angular/angular-cli/issues/9185 is resolved - add angular-devkit/core to dev dependencies until the issue https:... — committed to mrbatista/ngx-loader by mrbatista 6 years ago
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
@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
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 mycss
styles to myscss
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 version1.6.5
via mypackage.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
then run again in your project
run ng serve
full depedencies
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
to the
node_modules\@angular\cli\models\webpack-configs\styles.js
file.in the place where
postcssImports({
appears in the first occurrence it wasand it has to be
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 forsrc/styles.css
).Edit: Nevermind, you need multiple files, then that wont work