[BUG] Angular 17 can't resolve path to included IBM Plex fonts

[Hrothgar32]

Detailed description

Hello!

We've been trying to incorporate the Carbon Components package into our Angular 17 project in which we use standalone components, but by following the initial steps in the README, at the moment we try to build/serve our project the compiler throws an error indicating that it cannot resolve the paths to the included IBM Plex fonts.

The issue is reproducible even in older versions of Angular 17, but if we downgrade to Angular 16 the steps work as intended.

Angular CLI Version:

Carbon Components Angular version: "^5.16.4"

Here is the link for a minimal repo on which the issue is reproducible.

Notes

We suspect that there is a slight possibility that the problem may come from upstream: https://github.com/angular/angular-cli/issues/27007 , but we're interested in workarounds if other teams have faced this problem.

[Akshat55]

@Hrothgar32 Thanks for pointing this out, we have to update our documentation to include this:

@use '@carbon/styles/scss/config' with (
    $use-flexbox-grid: true,
    $font-path: '@ibm/plex' // Since Angular doesn't support `~` imports anymore, we can rewrite the path by updating the config
);

Including $font-path: '@ibm/plex in your configuration should resolve this issue.

[Hrothgar32]

Thank you @Akshat55 for the response!

I've tried your configuration and it resolved the compilation issue, however the styles weren't applied when I imported the modules and used the directives. However importing like this:

@use "@carbon/styles" with (
    $font-path: '@ibm/plex'
);

Solved the compilation issue, and the styles were applied as well!

[Katastrophe831]

Using angular 16, I had to do this

@use '@carbon/styles/scss/config' with (
    // Use flexbox for grid - stick to CSS Grid or Flexbox
    // CSS Grid has become the default grid system in v11
    $use-flexbox-grid: true,
    $font-path: '@carbon/styles/node_modules/@ibm/plex'
);

[abdelhalimjean]

just ran through this issue, it would be nice if the docs were updated

[goerkemballmueller]

@use '@carbon/styles/scss/config' with (
  $use-flexbox-grid: true,
  $font-path: '@ibm/plex' // Since Angular doesn't support `~` imports anymore, we can rewrite the path by updating the config
);

had same error here please update docs