search

joeldenning / coexisting-angular-microfrontends

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

Micro App Routing #36

Closed danZzyy closed 4 years ago

danZzyy commented 4 years ago

Hello! Hopefully this is a straight forward issue as I have only begun to dive into the example. What I have been trying to do is access the routes of one of the applications that is not the root of the app. So basically I have routing set up on one of the apps to have a route /test. I have confirmed that accessing this app directly at the port it is running on successfully routes to this component. However when I run the whole thing and go to localhost:4200/app1/test the page does not appear. Does single spa support routing like this?

joeldenning commented 4 years ago

Yes, single-spa supports routing like that. The key concept is an activity function. Once that it configured, you add the route to your app1 routing module, and it should work fine.

danZzyy commented 4 years ago

thank you for your quick response! I got it working by removing { path: '**', component: EmptyRouteComponent } from the sub app's route. Just checked that the secondary routing did not work with it there.

While I have your attention, I have been working off of this example with the goal of converting the primary file that handles the single spa app registration into an angular component as well. (Partly because npm start did not work for me here but it is fine because I have a workaround) I converted it into an Angular app so I can run ng serve. It is really just an angular app with the root-html-file pasted into the app's index.html. My goal is to replace all the script dependencies that reference external links and instead have npm packages. I was also having trouble importing SystemJS into the Angular app, as well as getting the references to the running apps to resolve (understandable since it is looking for library definitions).

Anyway, my question is whether there is an existing solution to the above and if doing so would be a better practice for an Angular app vs the way it is done here with vanilla js root file.

joeldenning commented 4 years ago

my question is whether there is an existing solution to the above and if doing so would be a better practice for an Angular app vs the way it is done here with vanilla js root file.

I maintain systemjs and it is not recommended to bundle systemjs via webpack. It is preferred to script tag it. You will run into issues if you bundle it.

Regarding converting the root config to an angular application, I did not do that on purpose because it's not my recommendation. Root configs should not have any UI in them, and angular is for creating UIs. You can read more at https://single-spa.js.org/docs/configuration

danZzyy commented 4 years ago

Thank you so much!