Angular-cli: Module build failed: Error: Can't resolve '~https://fonts.googleapis.com/icon?family=Material+Icons' 1.6.4+

[Taha-Di-Nero]

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';

[roger2hk]

Duplicate of #9166

[Taha-Di-Nero]

@roger2hk It is not a duplicate that it happens only with 1.6.4+
Actually in #9166 there are two or more issues

[Taha-Di-Nero]

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]

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.

[Taha-Di-Nero]

@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/

To leverage Material Design icons and use the icons components with the syntax you will need to add the following to your global stylesheet:
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

Also @import '~@angular/material/prebuilt-themes/indigo-pink.css'; generate the same error.

[clydin]

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.html allows the browser to become more quickly aware of the need to fetch.

[Taha-Di-Nero]

@clydin Thanks for your accurate explanations.

[aleftos]

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[bot]]

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._}