How do I get the publicPath to update using Angular 8 with single-spa to load font awesome?

Question

I'm trying to update webpack_public_path using Angular. I'm using the single-spa library and I'm having an issue loading font-awesome fonts.

It's looking for them in the root of our server ('/') but they actually reside in the application folder ('/app1').

I've created the a file set-public-path.ts and am importing it inside of main.single-spa.ts.

set-public-path.ts

// @ts-ignore
__webpack_public_path__ = 'https://appURL.net/app1/'

main.single-spa.ts

import './set-public-path.ts'
import { enableProdMode, NgZone } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ɵAnimationEngine as AnimationEngine } from '@angular/animations/browser'; 
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import singleSpaAngular from 'single-spa-angular';
import { singleSpaPropsSubject } from './single-spa/single-spa-props';

if (environment.production) {
  enableProdMode();
}

// @ts-ignore
console.log(__webpack_public_path__);

const domElementGetter = () => document.getElementById('application');

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic().bootstrapModule(AppModule);
  },
  template: '<app1-root />',
  domElementGetter,
  NgZone,
AnimationEngine,
});


export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

When the application runs, it logs the correct URL but the 404 error still says it's looking in the root. I'm not sure what I'm doing wrong. I'm using SystemJS to import the applications inside of the index.html file.

Environment Info:

"@angular-builders/custom-webpack": "^8",
"@angular/animations": "~8.2.11",
"@angular/cdk": "~8.2.3",
"@angular/common": "~8.2.11",
"@angular/compiler": "~8.2.11",
"@angular/core": "^8.2.14",
"@angular/forms": "~8.2.11",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "~8.2.11",
"@angular/platform-browser-dynamic": "~8.2.11",
"@angular/router": "~8.2.11",
"@azure/msal-angular": "^0.1.4",
"@microsoft/applicationinsights-web": "^2.0.0",
"@okta/okta-angular": "^1.3.1",
"@types/jest": "^24.0.24",
"hammerjs": "^2.0.8",
"node-sass": "^4.13.1",
"rxjs": "~6.4.0",
"rxjs-compat": "^6.5.3",
"single-spa-angular": "^3.0.1",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"

Answer 1

This worked for me;

set-public-path.js

export default function setPublicPath() {
    return Promise.all([getUrl()]).then(values => {
        const [url] =values;
        __webpack_public_path__ = url;
        return true;
    });
}

function getUrl() {
     return window.System.resolve('app8');
}

main.single-spa.ts

import setPublicPath from './set-public-path.js';
setPublicPath();