Run angular7 application from legacy web application

Question

I have built a new Angular7 application and locally angular application is working fine. Now I need to launch my angular application from the existing legacy web application which is build on Java/JSP. In the existing legacy application, I have a URL. On click of that URL, angular application should open.

But whenever I am hitting the URL, seems like routing is not happening properly to angular app.

Local angular application is running successfully on - http://localhost:4200/alerts;alerttype=renewals;cor=411119

What I did so far, I have copied the angular dist folder to the webcontent folder of legacy application and running the application as below

http://localhost:9086/customer/eWeb/AlertApp/alerts;alerttype=renewals;cor=411119

app.routing.module.ts

    const routes: Routes = [
    { path: 'alerts', component: AlertsComponent },
    { path: 'customer/eWeb/AlertApp/alerts', component: AlertsComponent 
     },
    ];

Can anyone help and tell how to launch the angular application from the legacy application? what all routing needs to be configured?

Thanks in advance.

Saksham · Accepted Answer · 2019-06-17 18:54:13Z

1

Once you build your angular application, you get a few js and css files (depending upon your code, mode details here)

Just bundle and move these files on the server and call the main file (bundle.js) on a JSP page.

Before doing this, don't forget to set the base path in index.html

answered Jun 17, 2019 at 18:54

Saksham

9,4209 gold badges48 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MSV Over a year ago

so in my case, base path in index.html is as <base href="/"> Do you want to add something else? Also I do not see main bundle.js file after build

Ethan Nguyen · Accepted Answer · 2019-06-18 05:39:08Z

1

Update your server-side url config (SpringMVC or SpringBoot config or Servlet web.xml) to return your parent jsp.

http://localhost:9086/customer/eWeb/AlertApp --> app.jsp

In app.jsp, just include css + bundled js files (similar your angular index.html)

<body>
 <div app> </div>
 <script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="scripts.js"></script><script type="text/javascript" src="main.js"></script>
</body>

answered Jun 18, 2019 at 5:39

Ethan Nguyen

1144 bronze badges

Collectives™ on Stack Overflow

Run angular7 application from legacy web application

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related