search

single-spa / single-spa-angular

Helpers for building single-spa applications which use Angular
Apache License 2.0
198 stars 78 forks source link

Single SPA as standalone apps #92

Closed RamyaGowrugolla closed 5 years ago

RamyaGowrugolla commented 5 years ago

It is mentioned in your documentation for Angular 7 that Single SPAs cannot be opened up as a html file and these applications all share one html file. In our use case we need to keep these Single SPAs independently accessible too. They will be hosted separately as stand alone websites. This was apparently possible in the older single-SPA-Angular-CLI version. Please advise, is it achievable in this current version?

joeldenning commented 5 years ago

Maintaining two slightly different deployed instances of the same code seems like it could be tough to maintain, but yes it should still be possible with single-spa-angular@3.

To do this:

1) Inside of your angular.json, change projects.{projectName}.architect.build.builder and projects.{projectName}.architect.serve.builder back to the original Angular defaults. For build, change it back to @angular-devkit/build-angular:browser. For serve, change it back to @angular-devkit/build-angular:dev-server. 2) Make sure the single-spa root html file and the Angular projects' index.html files have the same global scripts and css in them 3) Make sure that assets work in both. See https://single-spa.js.org/docs/ecosystem-angular.html#angular-assets. 4) Run npm run serve:single-spa and npm run build:single-spa for single-spa stuff. Run ng build and ng serve for non single-spa stuff.

I have not maintained a project that attempts to keep both ways working. So let me know if you run into any issues with this. I'm closing this issue for now since I've answered the question, but feel free to comment further or reopen with further discussion.

RamyaGowrugolla commented 4 years ago

Hi Joel, Further to your suggested approach above. How does the application have to be packaged and deployed? we generally generate bundles with the Angular CLI [ng build --configuration=prod/test/dev --source-map=false] and deploy the bundles on IIS (.NET web server, Internet Information Services).

Thanks in advance!

joeldenning commented 4 years ago

Could you clarify if you're asking about the application's bundling and deployment as a single-spa application or as a normal Angular application? The answer is different for each

RamyaGowrugolla commented 4 years ago

Need it for both Joel. It would be preferable to have the same deployment/package work for both the single spa and the normal angular application. It is a Microfrontend architecture with stand alone apps that also need to be working as normal angular apps.

joeldenning commented 4 years ago

It would be preferable to have the same deployment/package work for both the single spa and the normal angular application. It is a Microfrontend architecture with stand alone apps that also need to be working as normal angular apps.

This is not part of the my design goals of single-spa-angular. You can follow the instructions from my previous post that show how it might be possible, but it is not something that is recommended or actively supported.

Abdelrahman-H-Mahmoud commented 3 years ago

I was able to do something like this I made a small demo find it in this repo and find the commits with the changes I made here

michaelworm commented 2 years ago

Thanks @Abdelrahman-H-Mahmoud, this worked out for me!

@joeldenning Could this solution be added to the single-spa website docs or something similar? I was researching for hours and found nothing how to solve this but then found this issue luckily.

Abdelrahman-H-Mahmoud commented 2 years ago

@michaelworm you are welcome 😊