component: () => import( /* webpackChunkName: "about" */ './views/About.vue') about coexisting-vue-microfrontends

[joeldenning]

Try running System.resolve('app3') to see what the url is for app3. It might return a promise, in which case do System.resolve('app3').then(url => console.log(url)). Is that url correct?

[yangangzhang]

Try running System.resolve('app3') to see what the url is for app3. It might return a promise, in which case do System.resolve('app3').then(url => console.log(url)). Is that url correct?

Yes, the url is right.

[yangangzhang]

I found a solution to this problem.

The app2

router.js

{
      path: '/app2/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.

      component: () => import( /* webpackChunkName: "about2" */ './views/About.vue')

    }

The app3

router.js

{
      path: '/app3/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.

      component: () => import( /* webpackChunkName: "about3" */ './views/About.vue')

    }

Different subapps have different webpackChunkName names

[yangangzhang]

In short,Accessing a large subapp, I found that other problems caused by lazy routing loading prevented the handover from successfully switching to other apps.
If you don't use routing lazy loading, there's no problem.

other problems

[joeldenning]

Can you create an issue on single-spa-angular, with a link to a github repo that reproduces the problem.

Maybe title it "Lazy loaded routes cause errors"

[yangangzhang]

A github repo
https://github.com/yangangzhang/coexisting-vue-microfrontends
You can test the problem above.
Thanks again