Build breaks on Windows with ~ font paths relative to node_modules (working on OSX/Linux)

[sinedied]

Versions

Angular CLI: 1.6.3
Node: 8.4.0
OS: win32 x64 (windows 10)
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

@angular/cli: 1.6.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.5.3
webpack: 3.10.0

Repro steps

When using Sass and a lib that includes fonts, like FontAwesome, override the font path variable to a tilde-based one like this:

$fa-font-path: "~font-awesome/fonts";

Here is a repository to reproduce the bug: https://github.com/ngx-rocket/starter-kit/tree/cli-bug-tilde

1. git clone the repo and checkout the cli-bug-tilde branch
2. npm install
3. npm start

Observed behavior

On Windows, the build process breaks badly with Sass when font paths variables use ~ for paths relative to node_modules folder. Same projects builds fine on OSX or Linux.

Here is the complete error (I omitted the warnings of postcss-loader, see #8781 (comment)):

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/main.scss
Module not found: Error: Can't resolve './C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot' in 'C:\node\ngbug\src'
resolve './C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot' in 'C:\node\ngbug\src'
  using description file: C:\node\ngbug\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\node\ngbug\package.json (relative path: ./src)
    using description file: C:\node\ngbug\package.json (relative path: ./src/C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot.js doesn't exist
      as directory
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot doesn't exist
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot.ts]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot.js]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot]
 @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/main.scss 6:183261-183352
 @ ./src/main.scss
 @ multi ./src/main.scss
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/main.scss
Module not found: Error: Can't resolve './C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot?v=4.7.0' in 'C:\node\ngbug\src'
resolve './C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot?v=4.7.0' in 'C:\node\ngbug\src'
  using description file: C:\node\ngbug\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\node\ngbug\package.json (relative path: ./src)
    using description file: C:\node\ngbug\package.json (relative path: ./src/C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot.js doesn't exist
      as directory
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot doesn't exist
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot.ts]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot.js]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.eot]
 @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/main.scss 6:183139-183238
 @ ./src/main.scss
 @ multi ./src/main.scss
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/main.scss
Module not found: Error: Can't resolve './C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.svg?v=4.7.0' in 'C:\node\ngbug\src'
resolve './C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.svg?v=4.7.0' in 'C:\node\ngbug\src'
  using description file: C:\node\ngbug\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\node\ngbug\package.json (relative path: ./src)
    using description file: C:\node\ngbug\package.json (relative path: ./src/C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.svg)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.svg doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.svg.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.svg.js doesn't exist
      as directory
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.svg doesn't exist
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.svg]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.svg.ts]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.svg.js]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.svg]
 @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/main.scss 6:183813-183912
 @ ./src/main.scss
 @ multi ./src/main.scss
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/main.scss
Module not found: Error: Can't resolve './C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.ttf?v=4.7.0' in 'C:\node\ngbug\src'
resolve './C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.ttf?v=4.7.0' in 'C:\node\ngbug\src'
  using description file: C:\node\ngbug\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\node\ngbug\package.json (relative path: ./src)
    using description file: C:\node\ngbug\package.json (relative path: ./src/C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.ttf)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.ttf doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.ttf.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.ttf.js doesn't exist
      as directory
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.ttf doesn't exist
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.ttf]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.ttf.ts]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.ttf.js]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.ttf]
 @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/main.scss 6:183678-183777
 @ ./src/main.scss
 @ multi ./src/main.scss
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/main.scss
Module not found: Error: Can't resolve './C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff2?v=4.7.0' in 'C:\node\ngbug\src'
resolve './C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff2?v=4.7.0' in 'C:\node\ngbug\src'
  using description file: C:\node\ngbug\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\node\ngbug\package.json (relative path: ./src)
    using description file: C:\node\ngbug\package.json (relative path: ./src/C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff2)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff2 doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff2.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff2.js doesn't exist
      as directory
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff2 doesn't exist
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff2]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff2.ts]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff2.js]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff2]
 @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/main.scss 6:183412-183513
 @ ./src/main.scss
 @ multi ./src/main.scss
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/main.scss
Module not found: Error: Can't resolve './C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff?v=4.7.0' in 'C:\node\ngbug\src'
resolve './C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff?v=4.7.0' in 'C:\node\ngbug\src'
  using description file: C:\node\ngbug\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\node\ngbug\package.json (relative path: ./src)
    using description file: C:\node\ngbug\package.json (relative path: ./src/C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff.js doesn't exist
      as directory
        C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff doesn't exist
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff.ts]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff.js]
[C:\node\ngbug\src\C:nodengbugnode_modules�ont-awesome�onts�ontawesome-webfont.woff]
 @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/main.scss 6:183546-183646
 @ ./src/main.scss
 @ multi ./src/main.scss

webpack: Failed to compile.

Desired behavior

Build works without issue.

Mention any other details that might be useful (optional)

May be related to the fix of #8781 (comment)

Working on angular-cli@~1.5 branch.

[clydin]

Fixed via #9077 and will be in next release.

[sinedied]

@clydin Seems that your fix have broken something else 😭 : https://travis-ci.org/ngx-rocket/generator-ngx-rocket/jobs/327635323

This one was working with 1.6.3.

[clydin]

Unrelated actually; imports and url()s are handle differently. Apparently webpack doesn’t automatically resolve with the tilde. You can actually remove the tilde to remove the error. Next patch release will fix the tilde issue in imports.

[sinedied]

You can actually remove the tilde to remove the error

Not really, I already tried to replace the ~ by ../node_modules/ and then the builds breaks because it tries to import the fonts (located in the same folder as the .css file) from the root folder, ie myproject/src) and not the related to the css file.

[dinerotah]

@clydin On a Windows 10 OS, you could produce the same error running node tests/run_e2e.js tests\build\styles\inline-urls on Master.
No way to complete tests on windows 10 OS before submitting a PR.
Removing tilde from inline-urls.ts generate other errors.

[dinerotah]

@clydin After merging my fork with Master, tests pass. Thanks.

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