0

I have an angular app which is running in angular 6, I also have an another app which is running in angular 4. Now I am having an situation to reuse that angular 4 app inside angular 6. When user click on an menu in angular 6 app that angular 4 app need to be loaded inside an component. Is this possible? I don't want to use Iframe and object tag, is there any options to achieve this?

Gobi
  • 2,041
  • 1
  • 12
  • 10
  • https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project/ I would personally go the Iframe way :) – Andrei Tătar Aug 22 '18 at 12:53
  • Thanks Andrew for the response. since there is an version difference I can't follow the steps mentioned in the above link – Gobi Aug 22 '18 at 13:15
  • Is the 4 project big? Should be straight forward to upgrade... – Andrei Tătar Aug 22 '18 at 13:17
  • yes i tried it, lot of third party packages conflicts with angular 6 also due to some time constraint only I am finding any way to easily use the app old app components inside angular 6 – Gobi Aug 22 '18 at 13:21
  • I think the best way is using iframes. You might find a way to bootstrap 2 different versions of angular on the same page but in the end it will be very prone to failure on each change. – Andrei Tătar Aug 22 '18 at 13:29
  • Thanks Andrew, I decided to take some time and upgrade the app to angular 6 then pack it as an ng module and include it in new app. – Gobi Aug 24 '18 at 10:33

2 Answers2

1

I offer to you use iframe tag that load your angular 4 app.

<iframe src="http://angular4apphost/">
  <p>Your browser does not support iframes.</p>
</iframe>
Salman Kazemi
  • 66
  • 6
0

In this case first you should do some changes in your angular 4 project .

Step 1: replace the HttpModule with HttpClientModule and respectively do change the of HttpClient with Http in whole angular 4 project .

Step 2: when you will use the HttpClient it will show the error in your service page where You write the api service. so fix it.

Step 3: unstall the angular 4 and update with the following command.

rm -rf node_modules
npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install
quant
  • 2,184
  • 2
  • 19
  • 29
Prashant
  • 9
  • 5