Angular 2: Organizing a large web application. Is there a way to split it into smaller apps that can communicate with one another?

[Milad]

Problem to Solve

At work, I inherited ownership of a (legacy) very large web application (that spans multiple scrum teams and dev teams).  One constant pain-point of the current large app, is that whenever one of the scrum teams updates their respective area of the application, that team has to deploy the entire app.  One thing we started doing to alleviate this, is having teams create their new functionality outside of the large app, and then, just have a page inside the large app that makes an ajax call to the new app and simply injects the HTML into the large app.  That way the team can just deploy the new smaller app when making changes without having to deploy the entire large application (that spans other teams).

The Good news

We currently thinking about re-writing/redesigning the large application, and one of my goals from a development perspective, is to organize it into smaller applications/code-bases, so that each team can deploy their code without having to deploy a large app that spans multiple teams.  One way I plan to achieve this is to leverage multiple services to fetch data.  So that would introduce one layer of separation.  

From client-side perspective, one of the technologies that I am leaning heavily towards is Angular 2, especially for the separation of concerns that Angular 2 offers (components, templates, directives, etc.).  I understand that I can break up an Angular 2 application into features, components, etc., but, I believe, in the end all of those still have to live within one application/code-base that all get deployed out together.  Is there a way in Angular 2 to breakup a large portal/suite into smaller apps, and have the apps interact with one another.  For example, maybe one shell app can be shared (for layout and navigation), but, each area of the portal/suite can be broken up into smaller apps?

Any thoughts on best ways to approach/structure this from an Angular 2 perspective are greatly appreciated.  Also, if this is definitively, not possible from an Angular 2, perspective, that would also be helpful information.

Thanks in advance!

[Sander Elias]

Hi Milad,

Angular 2 is well suited here. But before you start on the front end, you need to make a couple of decisions. You need to communicate between "parts". What is it that you need to communicate? How important is this communication? Does it need to be real-time? All of it, or just some hot parts? 

Design your back-end to accommodate for this first. Choose how you want to communicate (websockets/ssp/ajax/...). Probably a mix. Read into microservices. 

bottom-line communication and storage are back-end tasks in systems like this. Design this API well, and your frontend will become much more robust, and easier to maintain.

Regards

Sander

[Milad]

Hi Sander, thanks for your feedback.  The items that you mentioned are definitely being considered.  However, I should have been a bit more clear in my original post.  The goal is to make all the parts look and function like one app for our users.  The different parts (smaller apps) when combined together need to look and feel like a single app?  I hope that makes a bit more sense?

Thanks again!

[Sander Elias]

Hi Milad,

Sure. Create an "app-shell" that hold the menu(s) and stuff that needs to be the same for each smaller app. You can then use the router inside the app for each part itself, and navigate between different apps like usual. 

You menu can be partly fixed, and partly dynamic, depending on your needs.

Regards

Sander

[Milad]

Hi Sander. 

So, if I understand your suggestions correctly, it would look something like this:

app-shell

• shared navigation
• shared content
• index.html
• router-outlet
  
• to load in content from each (external) individual app (see below) into the index.html

App-A

• content and functionality for App-A

App-B

• content and functionality for App-B

App-C

• content and functionality for App-C

In this scenario, each application would be in its own code-base, and teams would only need to deploy their individual apps when making changes.  The only time the app-shell would need to get updated/deployed is if a new route got added for new navigation, or new shared content got added.  Does this summarize your suggestion correctly?

Some questions:

• In the scenario described above, would each smaller app (i.e., non app-shell) also be bootstrapped for Angular 2 individually, or would the bootstrapping only happen on the app-shell?
• Will the router be able to handle loading content (components/templates) from external apps?

Thanks again!

~Milad

[Sander Elias]

Hi Milad,

In the scenario described above, would each smaller app (i.e., non app-shell) also be bootstrapped for Angular 2 individually, or would the bootstrapping only happen on the app-shell?

That depends on how you solve this. I would share the common components, but would create different SPA's that work alongside each other (main app in index.html, and then app-a.html and so on), That way you can navigate between the spa's  by normal navigation, and all apps are fully self-contained. This way you are sure teams can't mess up outside their own part(s). Also this will keep memory pressure lower, as each team might have their own dependencies. This matters even when you do lazy-loading. (unloading isn't flaw-free..)

Will the router be able to handle loading content (components/templates) from external apps?

Within limits, yes it can. 

Regards

Sander

[Milad]

Hi Sander, just wanted to let you know that I ended proceeding with your suggestion of having separate apps.  SPA routing is done within each app, while, going from one app to the other does require a page refresh to load the new html file.  There is a json file that maintains a list of all the routes for all the apps, and each app overrides the ones that belong to it to perform angular routing, otherwise, the redirect happens to go other apps.

Thanks again for your suggestion.

[Rahul Tiwari]

Hi Milad, 

As mentioned here,you have managed to solve your problem based on the discussion.

Recently I also started looking for solution to the similar and want to develop exactly the same way as directory structure which you have described in above comments.

So I have a request if you could share your POC work related to this if not actual project structure which could help us in gaining some insight how this can be achieved in angular 2.

Any help in this regard highly appreciated.

[Sander Elias]

Hi Rahul,

Since recently, the nx-tool from the nrwl team are available, those can help set up a large application. The way I described above is still a valid option. but that is an alternative that comes tools to set things up.

Regards

Sander

[Rahul Tiwari]

Hi Sander

Thanks for the information.

I understand this tool provide the solution which will be fit for this sort of problems.

But I was curious and really wanted to know how @Milad & team has organized their projects and how they have managed to pull this thing off without depending on any external tools like nx, as I would also prefer not to create dependency on nx-tool coz it will require some before hand deep understanding to optimally utilize that.

So for those reasons, if Milad and team has come up with some good customized solution then it would really helpful if I can also use that as base and can start organizing our project by taking some sort of inspiration from that.

[Rahul Tiwari]

Hi guys,

are there any suggestions to develop this kind of architecture to support large web application development in angular 2.

Highly appreciate any help here.

Thanks,

Rahul

[Maria]

Hi all,

I'm trying to do the same thing as Milad did, but I think I'm not getting the navigation part. I'm keep getting ERROR Error: Uncaught (in promise): Error: Cannot match any routes.

Can someone share an example on how the navigation should work? I'm trying to get to the app2.html, is that the way it should be?

Thank you in advance. 

[Maria]

Hi Sander,

I'm just wondering how the navigation should be? I'm trying to accomplish the same thing as Milad, but when I'm trying to set up the navigation I'm keep getting ERROR Error: Uncaught (in promise): Error: Cannot match any routes. 

What I did, and please correct me if I'm wrong, was to create my dist files, and I'm trying to access the app2.html that was created.

Thank you in advance for your help.

[Sander Elias]

Hi Maria,

A lot of things going on in this thread. I'm not sure if I understand your question? Are you trying to route from one SPA to another? Or inside one SPA? 
If you want to go to a different SPA, you use a normal anchor (`<a href='/mySecondSpa'>Second spa</a>`). inside a single one, you use the routerlinks.

Regards

Sander

[Maria]

Hi,

Yes, I'm trying to route from one SPA to another, but that other SPA I named the index.html as app2index.html and app2main.ts, so I'm trying to do a  href='/mySecondSpa'>Second spa</a> but I get the Error: Cannot match any routes. URL Segment: /mySecondSPA. But if I leave the default index and main, I get other errors like if they are duplicated.

Thank you for your answer.

[Maria]

Let me try to explain what I'm trying to do, and what I'm doing.

I have create a SPA (secondapp) for a specific project, now they want to have a portal including that SPA previous created. So, I'm trying to get that portal or main SPA to call the secondapp.

What I'm doing is building my secondapp and copy those dist files to my wwwroot/secondappfolder/

I call the secondapp as window.location.href = '/secondappfolder'. Just keep in mind that my main app is deploy to wwwroot.

Thank you

[Maria]

Correct me if I'm wrong but I think the router in the main app is expecting me to define a route for the child app, maybe because both apps are in the same domain?

[Sander Elias]

Hi Maria,

Yes, you are wrong;-) You can have as many entry pages as you want in one domain. "routing" between 2 pages is as simple as putting an old-fashioned hyperlink between the 2.

<a href="/foldername/myAppname.html">start myApp</a>
<a href="/otherFoldername/">start app that has the name index.html</a>

Angular has zero bearing on this. Make sure your server is configured so that it returns the html file that starts your application on 404. Most servers allow you to do this for each folder. 

Regards

Sander

[Rahul Tiwari]

Hi All,

I was trying to use an angular application which I have published as NPM library, this application has lazy loaded modules, one app module which I renamed as CoreModule to avoid conflict with the host application appmodule.

But when I try to use this NPM library by installing it to my host angular application using again lazy loaded module, it gives error for routes.forRoot() called twice. So i was wondering is there any way that an complete angular app can be installed inside another angular app as node modules. 

As I want different teams can work on different application independently and those application can be unified into one separate angular application using Npm install.

Any help on how can this architecture be achieved as this could really help us in structuring out a very large application.

[Sander Elias]

Hi Rahul,

You can have multiple applications, but multiple routers will run you into problems. This might be worked around, but currently, I have not seen this done yet. I will ask around if someone has some experience with this.

Regards

Sander

[Rahul Tiwari]

Hi Sander,

Appreciate for the comments.

Really hoping if you can share some work around anytime soon to achieve this meanwhile we are also trying to crack this thing on our side.

[Sander Elias]

Hi Rahul,

Perhaps this article by Manfred is something you can use?

Regards

Sander

[Rahul Tiwari]

Hey Sander,

The IFRAME approach mentioned in the article , we were already using this in our current application and wanted to get rid of those iframes due to the issues they can cause in longer run.

Having said that, though this article has re-directed me to few important articles which are really helpful for us in moving ahead on our approach. I just want to share those here as well.

1. Approach towards achieving architectural goals of Micro-frontends architecture.

2. Angular in micro services  world

[Sander Elias]

Hi Rahul,

In my opinion, the way forward in this lies in custom elements. Especially the upcoming Angular Elements variation.  It will need some rethinking of current concepts.

I'm looking forward to the point where I can use a CE, let it register a few routes on instantiation, and be done with. We are not that far off.

Regards,

Sander