Since 1.6.4 Angular Material CSS import does not work anymore (breaking change)

[Martin-Luft]

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 :)

[jolafrite]

Same problem here
The postcss-url callbacks are never invoked

[clydin]

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

[pferretti]

Same problem here

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'

[pferretti]

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 :-)

[clydin]

@pferretti I provided further details over here on that particular problem: #9166 (comment)

Also, unless the application does not have access to the internet or has restrictions thereof, adding this to index.html should typically provide a performance benefit over the package import method:

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

[pferretti]

Thank you @clydin , but unfortunately my app has restrictions and I have to rely on font self-hosting.

For reference, I temporarily copied Material Icon fonts in my assets folder and added to style.css the styles specified at https://google.github.io/material-design-icons/#setup-method-2-self-hosting

Probably not elegant, but it's a temporary solution that works :-)

[LosD]

@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

[aarongranade]

Is this related to the issue with the updated autoprefixer? The autoprefixer version that was inhibiting use of bootstrap@4.0.0-beta.3 still does not appear to be functioning. (See 975f45a)

[clydin]

@aarongranade it's not related and that should be working. If it is not, ensure that the project's version of the CLI is updated (not just the global) and if the problem persists check which versions of autoprefixer are installed via npm ls autoprefixer and please respond in this issue: #9029

[jolafrite]

the solution I do to fix this issue is to change the part in https://github.com/angular/angular-cli/blob/1.6.x/packages/%40angular/cli/models/webpack-configs/styles.ts#L70 to

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

              resolve(result);
            });
          });
        },