Micro frontends routing issue in single spa

[raju-akp]

Hi @joeldenning...I'm new to single spa...I don't know how make a micro frontends by using single spa in angular 8..and there is no reference code in single-spa.org web site...can you please suggest me any reference code of angular 8 single spa...I need like below reference page code...this is exactly my requirement

https://www.youtube.com/watch?v=3EUfbnHi6Wg&list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU&index=1

[joeldenning]

Hi @raju-akp - check out https://github.com/joeldenning/coexisting-angular-microfrontends/. It is linked to in the single-spa examples documentation

[raju-akp]

Hi Joel Thanks for the response. We are trying to migrate and enable an existing angular8 app to single-spa. We are trying to understand how to break/split the app. In one of your youtube videos here, you showed style-guide, common-services, root-app, app1, app2 and nav-app like structure. Currently we have all of these modules in one app. We are to trying to understand how to split and convert our existing app to the one that you showed in the video. I need some help on understanding how to use your CLI for migrating my current angular app:

1. In the style-guide app I would like to have scss/css, layouts, and components which can be used by all the other apps (root-app, app1, app2, and nav-app). Do we create this as a using CLI as "create-single-spa --moduleType app-parcel" or "create-single-spa --moduleType root-config" or "reate-single-spa --moduleType util-module".

2. Similarly what would I do for the other apps - common-services, root-app, app1, app2 and nav-app

Here is a trimmed version of current app - https://github.com/raju-akp/testing

[joeldenning]

In the style-guide app I would like to have scss/css, layouts, and components which can be used by all the other apps (root-app, app1, app2, and nav-app). Do we create this as a using CLI as "create-single-spa --moduleType app-parcel" or "create-single-spa --moduleType root-config" or "reate-single-spa --moduleType util-module".

Good question:

• Components: these can only be shared between styleguide and other apps if you have a shared version of Angular. Is that the case for you?
• scss/css: Sass requires a build-time step, but microfrontends have independent builds. So if you want things like partial sass templates that are includable in any microfrontend, you'd need to publish those to npm in addition to making them deployable as part of the styleguide repo
• layouts - not sure what you mean by those? HTML templates?

Ultimately a styleguide is an in-browser module. This means that it is compiled to System.register format by webpack.

You can choose whether you'd like to use either create-single-spa --moduleType util-module --typescript or ng new to generate the scaffolding for the project. In both cases, you'll need to mark all @angular libraries as webpack externals so that they are shared.

create-single-spa's util-module is more basic and provides a foundation to start with. If you're averse to setting up postcss/sass, typescript, and testing configurations, then perhaps create-single-spa's util module would not be a good choice.

If you choose to use Angular CLI, you could do ng add single-spa-angular, but then modify the main.single-spa.ts file to export components instead of the single-spa lifecycle methods.

Similarly what would I do for the other apps - common-services, root-app, app1, app2 and nav-app

For root config, use create-single-spa --moduleType root-config

For Angular applications, using create-single-spa is completely equivalent to using ng new and ng add single-spa-angular. The create-single-spa CLI simply does those same steps.

Hope this helps - feel free to ask more questions. We also have a slack workspace where you can chat with others using single-spa-angular.