Search code examples
angularelectronangular-libraryelectron-packager

Unable to load assets in custom .scss file in Angular Electron application

I am packaging my angular application using electron packager. However, when opening the packaged application then the assets referenced from my custom created .scss files does not load correctly whilst my other assets (referenced directly from the libraries assets folder) loads correctly.

The angular project contains applications and libraries. It has the following structure

Root
  --> Projects
    --> Desktop
    --> Web
    --> Library-1
    --> Library-2

Library 1 has a fonts.scss file which REFERENCES the fonts:

fonts are in library-1/src/assets/fonts

enter image description here

The assets is in the assets folder in the above picture

One of the fonts I am trying to load from the fonts.scss file:

@font-face {
    font-family: "OhBaby";
    src: url("/assets/fonts/OoohBaby-Regular.ttf");
}

I have tried removing the / from the url path, but then the Web app doesn't work and the desktop application in developent doesnt work

Then I package the application with the following command:

electron-packager ./dist/desktop MyAppName --overwrite --asar --platform=win32 --arch=x64 --icon=projects/desktop/src/assets/logo-accent.ico --prune=true --out=dist --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"MyAppName\""

How I reference the fonts file in a component:

@import "../../../../../Library-1/src/styles/fonts.scss";

The desktop appplication with electron in development and my web application the fonts from the fonts.scss file works correctly, but not when I open the packaged desktop application.

The error that is produced for a font that is not working?

enter image description here

The correct path should contain resources/app.asar/.../ in the url

Here is an asset reference that work:

assets/images/brands/logo-android.svg

Here are my angular.json where I ouput my assets:

"assets": [
    "projects/desktop/src/favicon.ico",
    "projects/desktop/src/assets",
    {
        "glob": "**/*",
        "input": "./projects/library-1/src/assets",
        "output": "/assets/"
    }
],
"styles": [
    "projects/desktop/src/styles.scss"
],

The assets are copied over correctly to the dist folder as seen in this image:

files in dist/desktop/assets: enter image description here

I would like a solution that does not require me to move my fonts and other assets referenced in custom .scss files to the styles.scss file of library1.

How can I tell the packager or electron to use the correct paths or how can I configure Angular to use the correct paths.

Solution

  • Replace the / with a ^ when referencing an asset in a scss or css file.

    e.g.

    "^assets/fonts/OoohBaby-Regular.ttf"