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

[Robbllle]

Command

test

Is this a regression?

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

[david-rodriguez-rev]

I'm seeing this same issue with Angular 18 and Font-Awesome 4 and Bootstrap 3. Any fix or workaround would be greatly appreciated.

[alebx]

I'm seeing this same issue with Angular 18 and Font-Awesome 4 and Bootstrap 3. Any fix or workaround would be greatly appreciated.

My workaround is, that I have two variable path files (folders), one for esbuild and the other for webpack, then I include the desired variable path file (folder) via includePaths in angular.json.

[alan-agius4]

Thanks for reporting this issue. Luckily, it has already been fixed in one of the recent releases. Please update to the most recent version to resolve the problem.

If the problem persists in your application after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior. You can use ng new repro-app to create a new project where you reproduce the problem.