Open TheColorRed opened 3 years ago
I have added the following to my main.single-spa.ts
file:
const lifecycles = singleSpaAngular({
domElementGetter: () => {
return document.getElementById('file-manager')
}
})
I then renamed the div (seen in the OP)
This works, however when reloading the page, it cannot find the element.
Uncaught Error: domElementGetter did not return a valid dom element
How would I get a dom element that is loaded lazily?
If there currently isn't a way to do this, maybe something like this would work?
if (ivyEnabled()) {
const domElementGetter = chooseDomElementGetter(options, props);
getContainerElement(domElementGetter).then(domElement => {
while (domElement.firstChild) domElement.removeChild(domElement.firstChild);
}).catch(err => throw new Error(err));
}
function getContainerElement(domElementGetter: DomElementGetter): Promise<never | HTMLElement> {
return new Promise<HTMLElement>((resolve, reject) => {
let element: HTMLElement
let count = 0
const max = 10
function watchDom() {
element = domElementGetter()
if (!element) {
if (count < max) {
count++
setTimeout(watchDom, 100)
} else {
if (!element) {
reject('domElementGetter did not return a valid dom element')
}
}
} else {
resolve(element)
}
}
watchDom()
})
}
Sorry for not having time to take a deep look into your problem, but by my quick peek I understand you are using an Angular app as root-config instead of an agnostic HTML/JavaScript one. And then I am betting on tag name conflicts: app-root
and router-outlet
tags both in root-config app and Angular microservice.
Demonstration
/
Expected Behavior
When reloading a page that has a microservice the service should load in the same spot.
Actual Behavior
When I navigate to a page single spa loads the microservice correctly:
However, if I reload this page (F5), the microservice loads in the wrong location:
Code
I am registering the apps like this:
When refreshing the page the item is created in the
body
element, instead of using the existing div element.Note: the whole project (including microservices) is using Angular 11.