Comments (3)
The domElementGetter returning null because the document.body is not ready yet.
Your code must be pretty different than the coexisting-angular-microfrontends code, since we call singleSpa.start() inside of document.body.
You should not need to worry about any of this. single-spa-angular creates a dom element container for you without you having to create it in the html file or your own custom domElementGetter.
To fix your code, just put your javascript into the <body>
element of the HTML.
I'm closing this since this does not seem like an issue with coexisting-angular-microfrontends and I've given you a way to fix it.
from coexisting-angular-microfrontends.
The code is exacly the sameas the coexisting-angular-microfrontends code but in the navbar app i want to have a sidebar instead of navbar.So my code in the navbar html is like this:
<div class="container-fluid">
<div class="row">
<div class="col-3">
<div style="text-align:center">
<h1>
Sidebar
</h1>
<div class="list-group list-group-flush">
<a routerLink="/home" href="#">Home</a>
<a routerLink="/login" href="#">Log in</a>
</div>
</div>
</div>
<div class="col-9">
<div id="main-section">
</div>
</div>
</div>
</div>
And i want to place my home-page-app inside div with id "main-section"
So in the home-page app in the main.single-spa.ts i put the function:
function domElementGetter() {
let el = document.getElementById('main-section');
if (!el) {
el = document.createElement('div');
el.id = 'main-section';
document.body.appendChild(el);
}
return el;
}
All working well and i have this result:
But when back button is pressed the document.getElementById('main-section') returns undefined and this happened:
That is the reason why i changed the code in the main.single-spa.ts in the home-page app to the code i posted to find the element first and after return the DOM element.
But as i saw in the console with the comments the main.single-spa.ts is running before the DOM is generated and that is why return undefined.
from coexisting-angular-microfrontends.
For back button related issues, see single-spa/single-spa-angular#94.
Your error makes no sense for it to be related to the back button. Please push your code to github and we can reopen this for me to look at. The setInterval
stuff you have is incorrect and shouldn't be needed.
from coexisting-angular-microfrontends.
Related Issues (20)
- Upgrade an example with Angular 13. HOT 1
- Use IDE Debugger HOT 1
- how can I integrate a new angular application in another angular in a specific location?
- Import an utility module into microfrontend Angular
- Pending depdendencies pull requests
- Overlapping Micro-Apps When Mounting App1 and App2 on Single-Spa Routes HOT 1
- single spa won't display two apps at the same time HOT 5
- How to Build "coexisting-angular-microfrontends"? HOT 7
- Styles overlapping and not able to unmount while switching from one app to another HOT 1
- Can we have Proxy HOT 5
- App.component not rendered HOT 2
- app1 does not load HOT 1
- Issue with $localize() after upgrading to angular 9 HOT 2
- Navbar died in status SKIP_BECAUSE_BROKEN HOT 4
- Nested (Child) Routes in Angular HOT 1
- After building , navigating to "app1" gives 404 HOT 3
- set live load to true not working
- seems not work... HOT 1
- Current status of support HOT 3
- live reload HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from coexisting-angular-microfrontends.