Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Hrothgar32 opened this issue Feb 1, 2024 · 4 comments
Open

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

Hrothgar32 opened this issue Feb 1, 2024 · 4 comments
Assignees
Labels
documentation Something that needs documented

Comments

@Hrothgar32
Copy link

Hrothgar32 commented Feb 1, 2024

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.

image

Angular CLI Version:
image

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: angular/angular-cli#27007 , but we're interested in workarounds if other teams have faced this problem.

@Akshat55 Akshat55 self-assigned this Feb 1, 2024
@Akshat55 Akshat55 added the documentation Something that needs documented label Feb 1, 2024
@Akshat55
Copy link
Contributor

Akshat55 commented Feb 1, 2024

@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
Copy link
Author

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Something that needs documented
Projects
None yet
Development

No branches or pull requests

4 participants