I've recently started migrating some Angular projects to single-spa, and I've ran into this issue.
In the child projects (microfrontends, Angular 12), assets requested in styles.scss will only ask for it from the root/host url, while assets requested in components' scss files will properly go look for them in the microfrontend's url.
I've tried using the --deploy-url option for ng serve, APP_BASE_HREF is provided with the correct base url. When launching in "single-spa mode", the child project is served with the @angular-builders/custom-webpack:dev-server builder. "baseHref" and "deployUrl" properties in angular.json>architect.build.options don't work and "rebaseRootRelativeCssUrls" will throw an error on build/serve as it was removed already in a previous Angular version.
Sample image of the resulting network requests based on where the asset is called from
Paths are relative in .scss files, as shown below:
styles.scss
.sample {
background-image: url('./assets/img/SAMPLE.png');
}
app.component.scss
.sample-two {
background-image: url('../assets/img/SAMPLE.png');
}
Copying the assets over to the root project and using absolute urls is not an option. As child projects need to be independent and be able to be loaded standalone by developers, they should keep their own assets and they shouldn't be duplicated to both projects if an alternative exists.
