Angular, using font from "theme" npm package in a angular component library

I have created an npm package “theme” that contains @font-face and font-size definitions. This npm package is integrated into an Angular library “shared-elements”, which contains the components. This library is then integrated into the actual Angular application “web-app”.

When creating the “shared-elements” library, I get the error message:

⠋ Compiling with Angular sources in Ivy partial compilation mode.X X [[ERRORERROR]X ]X [ [Could not resolve "../fonts/webfont.woff"ERRORCould not resolve "../fonts/webfont.woff"ERROR ] ][plugin angular-css-resource] [plugin angular-css-resource] Could not resolve "../fonts/webfont.woff"Could not resolve "../fonts/EuH_SansBol.woff"
<stdin>:994:11:
<stdin>:994:11:
994 │ src: url( 994 │ src: url([plugin angular-css-resource]"../fonts/webfont.woff"[plugin angular-css-resource]"../fonts/webfont.woff"


The library already existed before. In this library not @forward or @use but @import and the npm theme package could simply be integrated without errors.

Why did it work with @import, but no longer with @forward?

theme

+ src
+ assets
+ fonts
web-font.woff
+ scss
_fonts.scss
theme.scss


_fonts.scss

@font-face {
font-family: "webFont";
src: url("../fonts/web_font.woff") format("woff");
font-weight: 400;
font-style: normal;
}

$font-size-default: 16px;
$font-size-small: 14px;
$font-size-large: 18px;


theme.scss

@forward "xy";

@forward "fonts"; // before @include "fonts";
@use "fonts";


When I create the package, there is a dist\assets folder with the following structure

• css (contains the created css files)
• fonts (contains the font)
• scss (contains the original scss files)

I would like to integrate this package into an Angular library "shared-elements" that provides components (e.g. button, ..). To do this, I install the package (is also visible under the node_modules with the contents of the dist\assets folder)

However, I cannot specify any assets in angular.json because the project type is a "library".

"shared-elements": {
"projectType": "library",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "projects/shared-elements",
"sourceRoot": "projects/shared-elements/src",
"prefix": "xy",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "projects/shared-elements/ng-package.json"
},

"configurations": {
"production": {
"tsConfig": "projects/shared-elements/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "projects/shared-elements/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},

Continue reading...