Closed raju-akp closed 4 years ago
Hi @raju-akp - check out https://github.com/joeldenning/coexisting-angular-microfrontends/. It is linked to in the single-spa examples documentation
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:
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".
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
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:
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.
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