0

I have a legacy AngularJs application and a new one based in Angular 5.

My login page is under Angular 5, main page preferably under angular 5, either. Now, is there any workaround to have these applications share the same menu and landing page but part ways from then on?

And if not, what is the recommended path to follow, given the fact that migrating legacy app to Angular 5 is beyond the company timeline at the moment.

ps. there is a similar question on stack which addresses similar concern, but mine is slightly different as in i do not intend to migrate or downgrade/upgrade my projects. I'm simply looking for a neutral landing page to connect both worlds.

aforementioned question:

Running Angular and AngularJS frameworks side by side

Siavash Rostami
  • 1,883
  • 4
  • 17
  • 31
  • Only solution I can come up with is not using any framework for the menu and landing page. – Chrillewoodz Sep 19 '18 at 07:14
  • @Chrillewoodz so if no framework for landing page, then how can i take care of routing from menu items to respective internal links, not to mention the menu itself is taken from the DB. – Siavash Rostami Sep 19 '18 at 07:26
  • What do you use for routing in AngularJs app, default router or ui-router? – Oleg Dikusar Sep 19 '18 at 07:33
  • @Chrillewoodz it's ui-router – Siavash Rostami Sep 19 '18 at 07:44
  • Hard to say without knowing your router tree but you could create a wrapper for the ng6 "routes branch" which handles all the routing there. And the same for AngularJS. Generating the menu can be done using normal XHR request in vanilla JS. – Chrillewoodz Sep 19 '18 at 07:47

2 Answers2

2

I've been very busy with the topic lately, because many have the same problem again and again (me, of course). Nowadays, you often hear the concept of micro-frontends. The concept is about designing the frontend to be extensible and scalable. Especially in the time when many companies have both Angular and React and Vue developers. The following approaches came out of my research:

Links :

You can create your new app and have a hyperlink from your legacy app. (You must have a page reload when you switch beetween the both apps.)

Iframes :

a Software architekt builded a meta router to deal with iframes and single page application:
Take a look at this https://github.com/manfredsteyer/meta-router

Metaframeworks:

Metaframeworks allow you to have a communication beetween differents apps builded using differents frameworks: here a simple example with the idea of single page application: https://single-spa.js.org/

NPM Packages:

In order to deal with npm packages you can use as the other answerer mentioned the concept of Angular elements. You have to create a shell app and another independently apps that will be registred as elements in your shell app. Take a look at this example.: Building micro frontends — angular elements

Mosaiq

The online shop Zalando faced to the same problem and created a framework in order to deal with the problem: https://www.mosaic9.org/

Plugin Architecture

Angular libraries

I Think a right way is to have in a app the same framework and the same version of this framework (e.g Angular 7). I will prefer to take a time a do a upgrade to a typescript version of angular. I hope the answer can be usefull for others.

billyjov
  • 2,778
  • 19
  • 35
0

I was in a similar boat as you: I had an Angular 6 component, that needed to be implemented in an old AngularJS application. Upgrading the AngularJS app was out of the question, it would have been a massive undertaking.

Angular has provided ngUpgrade, which you would use on an old AngularJS app, to upgrade it to Angular5/6. But, only the main bootstrapping would be in the new version. The old components would still be in AngularJS. This means that you can upgrade each component in your legacy project at leisure - no need to upgrade everything at once.

Another option (which is what we used), is Angular Elements.
What this does, is wrap your Angular 5/6 components into a custom WebElement. These WebElements can then be used in any environment, like AngularJS, or ReactJS, or even without a framework at all. The generated JS files include the complete compiled Angular runtime, so these files will be hefty. If bandwidth is an issue, don't bother.

Smallwater
  • 364
  • 2
  • 10