fix(@angular/cli): ensure stylesheet relative tilde path conversion

[clydin]

Fixes #9061

[maa105]

I tried it by updating the file in the node_modules/@angular/cli/models/webpack-configs/styles.js but I got this weird error (same as before the update but the path changed to relative instead of absolute):

Module not found: Error: Can't resolve './....node_modules☼ont-awesome☼onts☼ontawesome-webfont.eot' in 'c:\Users<user_name>\Desktop<project>\src'
resolve './....node_modules☼ont-awesome☼onts☼ontawesome-webfont.eot' in 'c:\Users<username>\Desktop<project>\src'

it seems everything after the / is either missing or is suing some kind of escape sequence like "/f" in "/fontawesome" is displaying as "☼"

same thing with ioic icons:

Module not found: Error: Can't resolve './....node_modulesionic-angular☼ontsnoto-sans-bold.woff' in 'c:\Users<user_name>\Desktop<project>\src'
resolve './....node_modulesionic-angular☼ontsnoto-sans-bold.woff' in 'c:\Users<user_name>\Desktop<project>\src'

any ideas?

[LosD]

This seems to somehow have broken Material2 styles.css imports for me:

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/deeppurple-amber.css' in '/home/dennis/Projects/angular2frontend/src'
    at onError (/home/dennis/Projects/angular2frontend/node_modules/enhanced-resolve/lib/Resolver.js:61:15)
    at loggingCallbackWrapper (/home/dennis/Projects/angular2frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/dennis/Projects/angular2frontend/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/dennis/Projects/angular2frontend/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/dennis/Projects/angular2frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/dennis/Projects/angular2frontend/node_modules/tapable/lib/Tapable.js:252:11)
    at /home/dennis/Projects/angular2frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (/home/dennis/Projects/angular2frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/dennis/Projects/angular2frontend/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/dennis/Projects/angular2frontend/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/dennis/Projects/angular2frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/dennis/Projects/angular2frontend/node_modules/tapable/lib/Tapable.js:252:11)
    at innerCallback (/home/dennis/Projects/angular2frontend/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
    at loggingCallbackWrapper (/home/dennis/Projects/angular2frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/dennis/Projects/angular2frontend/node_modules/tapable/lib/Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (/home/dennis/Projects/angular2frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
 @ ./src/styles.css 4:14-138
 @ multi ./src/styles.css ./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css

Worked until latest CLI release on my Ubuntu workstation.

Yes, the file is present:

ls /home/dennis/Projects/angular2frontend/node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css 
/home/dennis/Projects/angular2frontend/node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css

For anyone else running into the same: A workaround, at least for me, is simply to include the CSS directly in the .angular-cli.json styles. However, that is probably not going to help if dependencies has CSS files depending on each other.

[filipesilva]

@LosD #9188 should address what you're seeing. It's not released yet but should be in the next release.

[LosD]

@filipesilva Thanks. I also found the bug report (#9185), which has other nice workarounds. @clydin gave the simplest one: Just nuke the tilde. :)

[manimayan]

This is the easy way to get rid of "ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!."
Run the below:
npm install --save-dev @angular/[email protected]

[manimayan]

This is the easy way to get rid of "ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!."
Run the below:
npm install --save-dev @angular/[email protected]

[angular-automatic-lock-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.}