[Angular 17] Wrong sass variable resolution with fontawesome on first `ng test` run

[Robbllle]

Command

test

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16.x

Description

The first time I run ng test I get several errors related to invalid paths where $fa-font-path seems to be resolved incorrectly as ../node_modules/@fortawesome/fontawesome-free/scss/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf whereas the actual path is ../node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf.

The error does not occur when running ng test a second time. The app itself runs fine with ng serve with styles and icons being displayed correctly.

I'm not sure whether this is an error with Angular or somewhere in the chain of Karma, sass, post-css, fontawesome etc.

Minimal Reproduction

1. Create a new project ng new with scss
2. Add karma configs ng generate config karma
3. Install FontAwesome npm i @fortawesome/fontawesome-free
4. Import fontawesome scss files in styles.scss

   $fa-font-path: '@fortawesome/fontawesome-free/webfonts';
   @import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
   @import '@fortawesome/fontawesome-free/scss/brands.scss';

5. Run tests with ng test

Exception or Error

./src/styles.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
/Users/robertb/projects/angular-gen/karm/node_modules/@fortawesome/fontawesome-free/scss/brands.scss:19:2: Can't resolve '../node_modules/@fortawesome/fontawesome-free/scss/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf' in '/Users/robertb/projects/angular-gen/karm/src'

./src/styles.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
/Users/robertb/projects/angular-gen/karm/node_modules/@fortawesome/fontawesome-free/scss/brands.scss:19:2: Can't resolve '../node_modules/@fortawesome/fontawesome-free/scss/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2' in '/Users/robertb/projects/angular-gen/karm/src'

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 17.0.7
Node: 20.10.0
Package Manager: npm 10.2.3
OS: darwin arm64

Angular: 17.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.7
@angular-devkit/build-angular   17.0.7
@angular-devkit/core            17.0.7
@angular-devkit/schematics      17.0.7
@schematics/angular             17.0.7
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

OS: MacOS 13.6.2

[datencia]

same issue here...

[simon020286]

same issue

[marcoscazaux]

Same issue with:

• Angular 17.3
• Mac OS X14.3
• flag-icons (https://github.com/lipis/flag-icons)
• $flag-icons-path variable

Error:

Can't resolve '../../../../node_modules/flag-icons/sass/flag-icons/flags/4x3/tl.svg'