search

joeldenning / coexisting-angular-microfrontends

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

Named router outlets #37

Closed alalicon577 closed 4 years ago

alalicon577 commented 4 years ago

hi Joel,

I copied your repo and I've been trying to create a Named outlet for the app2 but it's not working. Here is the code:

<nav>
  <li>
    <a routerLink="/">Home</a>
  </li>
  <li>
    <a routerLink="/app1">App 1</a>
  </li>
  <li>
    <a [routerLink]="[{ outlets: { appOutlet: ['app2'] } }]">App 2</a>
  </li>
</nav>

Here are the router outlets:

<navbar-primary-nav></navbar-primary-nav>
<router-outlet></router-outlet>
<router-outlet name="appOutlet"></router-outlet>

Have you tried this one by any chance?

I am getting an error like this:

Error: Cannot match any routes. URL Segment: 'app2' at ApplyRedirects../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2464)

Thank you.

joeldenning commented 4 years ago

Are you trying to render app2 inside of app1? That is generally not how single-spa applications work.

The stacktrace you shared indicates that the app 1 routes are not configured to handle the app2 route

alalicon577 commented 4 years ago

No. I am trying to render it in the NavBar app using a separate outer-outlet. By default, all apps render in the first <router-outlet>. What I am trying to do is display both app1 and app2 on top of each other. The app2 will use the Named router-outlet while the app1 will use the default router-outlet.

alalicon577 commented 4 years ago

To further expound on what I am trying to do, I want to create multiple router outlets as documented in this blog: https://www.techiediaries.com/angular-router-multiple-outlets/

In theory, each router-link<a routerlink="/appSample"></a>should be mapped to the angular component in the routing module like this:

const routes: Routes = [
  {
    path: "appSample",
    component: AppSampleComponent
  },
  {
    path: "appSampleWithNamedOutlet",
    component: ProductListSidebarComponent,
    outlet: "appoutlet"
  }
];

However in the single-spa, by some form of ingenuity, it automatically ties the microfrontend to the routes without doing the above configuration. I think what's missing in the single-spa lib is to be able to map the app to a named outlet using the "outlet" property.

joeldenning commented 4 years ago

In single-spa, there are three kinds of microfrontends. The coexisting angular microfrontends repo employs only one kind - “single-spa applications”.

single-spa applications do not have a parent/child relationship. They are all siblings. They each mount into separate dom element containers. Layout between single spa applications is usually achieved via css positioning - app1 and app2 have some margin-top that places them below the navbar.

In this coexisting-angular-microfrontends example, the navbar, app1, and app2 are all single spa applications. That means there is no parent/child component hierarchy between them.

The other two kinds of microfrontends are “single spa parcels” and “utility modules.” Both of them offer ways of introducing parent / child component hierarchies. However, it’s my recommendation to first split by routes with single spa applications before using those two kinds of microfrontends.

The single spa core team has extensive documentation for all of this, here are a few pages I’d recommend checking out: