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

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

Create a new project ng new with scss
Add karma configs ng generate config karma
Install FontAwesome npm i @fortawesome/fontawesome-free
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';

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

same issue here...

same issue

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'

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

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.

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.

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

Navigation Menu

Repository navigation

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

Command

Is this a regression?

The previous version in which this bug was not present was

Description

Minimal Reproduction

Exception or Error

Your Environment

Anything else relevant?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Command

Is this a regression?

The previous version in which this bug was not present was

Description

Minimal Reproduction

Exception or Error

Your Environment

Anything else relevant?

Activity

datencia commented on Jan 22, 2024

simon020286 commented on Mar 29, 2024

marcoscazaux commented on Apr 9, 2024

david-rodriguez-rev commented on Mar 11, 2025

alebx commented on Mar 11, 2025

alan-agius4 commented on Oct 17, 2025

angular-automatic-lock-bot commented on Nov 17, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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