CODEWITHSUNDEEP
angularwebpacksystemjssingle-spa-angular
high_speed_soul
high_speed_soul

Reputation: 21

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

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"

Upvotes: 1

Views: 1620

Answers (1)

Murali Elumalai
Murali Elumalai

Reputation: 49

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();

Upvotes: 0

Related Questions