search

joeldenning / coexisting-angular-microfrontends

Multiple angular applications, coexisting in one page via single-spa.
MIT License
225 stars 155 forks source link

Refreshing app causes inconsistent rendering order of applications #44

Closed tungurlakachakcak closed 4 years ago

tungurlakachakcak commented 4 years ago

Hi, all! Sorry for structuring this issue badly, perhaps a template for issues would be useful. :)

Steps to reproduce:

  1. visit a route, for example, /app1
  2. click the refresh button
  3. Observe that the order of navbar and app1's content is switched.

This may not happen every time.

Solution: As a solution, locally, I defined placeholders for the apps in the root-html-file -> index.html and then using domElementGetter, configured each application to load in those placeholders.

I would love to contribute for this issue, but am not sure if the index.html file is the correct place for defining the layout.

joeldenning commented 4 years ago

Hi Vallerious, good question. You are right that by default single-spa does not ensure a consistent dom order of applications. Recently the single-spa core team has been working on a project called single-spa-layout, which provides an easier API for ensuring dom order. The first beta of the project was released in https://github.com/single-spa/single-spa-layout/releases/tag/v1.0.0-beta.0 and the preliminary documentation for it is at https://single-spa.js.org/docs/layout-overview. I view that project as the proper solution to this issue.

The alternative to single-spa-layout is to do what you've described by using domElementGetters. That approach is also a good one, and is perhaps just a bit more complex/roundabout than single-spa-layout. But both approaches work well.

If you'd like to update this example repo to use single-spa-layout, please feel free to do so.

I am closing this issue because I think I've answered the question. Feel free to comment further / reopen.

tungurlakachakcak commented 4 years ago

I would gladly contribute, but in the documentation I see that the javascript code uses "import" and is supposed to be put in the Githubissues.

  • Githubissues is a development platform for aggregating issues.