Repository navigation
Module build failed: Error: Can't resolve '~https://fonts.googleapis.com/icon?family=Material+Icons' 1.6.4+ #9181
Description
Versions
Angular CLI: 1.6.4
Node: 6.11.3
OS: win32 x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... 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
This happen also with 1.7.0-beta.0
Repro steps
npm run build
Observed behavior
ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/assets/css/styles.css
Module build failed: Error: Can't resolve '~https://fonts.googleapis.com/icon?family=Material+Icons' in 'C:\Users\.....\Desktop\dashboard\src\assets\css'
at onError (C:\Users\.....\Desktop\dashboard\node_modules\enhanced-resolve\lib\Resolver.js:61:15)
at loggingCallbackWrapper (C:\Users\.....\Desktop\dashboard\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
at runAfter (C:\Users\.....\Desktop\dashboard\node_modules\enhanced-resolve\lib\Resolver.js:158:4)
at innerCallback (C:\Users\.....\Desktop\dashboard\node_modules\enhanced-resolve\lib\Resolver.js:146:3)
at loggingCallbackWrapper (C:\Users\.....\Desktop\dashboard\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
at next (C:\Users\.....\Desktop\dashboard\node_modules\tapable\lib\Tapable.js:252:11)
at C:\Users\.....\Desktop\dashboard\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:40:4
at loggingCallbackWrapper (C:\Users\.....\Desktop\dashboard\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
at runAfter (C:\Users\.....\Desktop\dashboard\node_modules\enhanced-resolve\lib\Resolver.js:158:4)
at innerCallback (C:\Users\.....\Desktop\dashboard\node_modules\enhanced-resolve\lib\Resolver.js:146:3)
at loggingCallbackWrapper (C:\Users\.....\Desktop\dashboard\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
at next (C:\Users\.....\Desktop\dashboard\node_modules\tapable\lib\Tapable.js:252:11)
at innerCallback (C:\Users\.....\Desktop\dashboard\node_modules\enhanced-resolve\lib\Resolver.js:144:11)
at loggingCallbackWrapper (C:\Users\.....\Desktop\dashboard\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
at next (C:\Users\.....\Desktop\dashboard\node_modules\tapable\lib\Tapable.js:249:35)
at resolver.doResolve.createInnerCallback (C:\Users\.....\Desktop\dashboard\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:44:6)
@ ./src/assets/css/styles.css 4:14-150
@ multi ./src/assets/css/styles.css ./node_modules/bootstrap/dist/css/bootstrap.min.css
Desired behavior
build success :-)
Mention any other details that might be useful (optional)
I have this line in my styles.css file:
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
Activity
[-]npm build[/-][+]Module build failed: Error: Can't resolve '~https://fonts.googleapis.com/icon?family=Material+Icons'[/+][-]Module build failed: Error: Can't resolve '~https://fonts.googleapis.com/icon?family=Material+Icons'[/-][+]Module build failed: Error: Can't resolve '~https://fonts.googleapis.com/icon?family=Material+Icons' 1.6.4+[/+]roger2hk commentedon Jan 12, 2018
Duplicate of #9166
dinerotah commentedon Jan 12, 2018
@roger2hk It is not a duplicate that it happens only with 1.6.4+
Actually in #9166 there are two or more issues
dinerotah commentedon Jan 12, 2018
Removing '~' from import resolve the problem, I will let this open just wondering if some one could explain why this happen only with 1.6.4+.
With 1.6.4+ using bootstrap 4.0.0-beta.3 didn't throw any errors.
clydin commentedon Jan 12, 2018
I’m actually surprised that worked before. The tilde is a webpack specific symbol that means the url is a module. In this case it’s an absolute url and not a module.
dinerotah commentedon Jan 12, 2018
@clydin In many tutorial of how to use material2 theming they said to add that line to the global stylesheet and it was working:
http://spartansoft.net/add-angular-material-2-to-angular-4-project/
Also @import '~@angular/material/prebuilt-themes/indigo-pink.css'; generate the same error.
clydin commentedon Jan 12, 2018
The actual module import for material is indeed a bug. However, the tilde can be removed there as well. The next patch release will address that issue.
Material now has official documentation available here: https://material.angular.io/guide/getting-started
Also, adding the font urls via imports will have performance implications on your application. The browser will not be aware that it needs to fetch the assets until it parses the stylesheet. Which can cause a delay of first render. Adding them to
index.htmlallows the browser to become more quickly aware of the need to fetch.dinerotah commentedon Jan 12, 2018
@clydin Thanks for your accurate explanations.
aleftos commentedon Jan 14, 2018
I replaced the line:
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
By:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v34/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
In file styles.css
works for me.
angular-automatic-lock-bot commentedon Sep 7, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.