Integrating Angular 7 with existing Java Application

Question

I am new to angular. My current application is build in Java with JSP using YUI library. In our application we have multiple tabs. Is it possible to switch to Angular 7 with same application for one or two tabs initially or we need to start with fresh project.

Please suggest.

Answer 1

Yes, it is doable, as Angular can bootstrap itself from a JSP page. It can be a great way to keep your current application running while transitioning to Angular. This way, you need less maintenance of the old tabs as they can removed quicker, while the tabs that stay in JSP can continue working.

To get started, include the Angular application root and all bundles somewhere in the JSPs of the tabs being replaced.

<app-root></app-root>

<!-- Angular must load AFTER the app-root selector for bootstrapping  -->
<% if( request.getHeader("Host").equals("localhost:4200") ) { %>
  <!-- dev bundles, to allow the normal angular workflow on localhost -->
  <script src="inline.bundle.js"></script>
  <script src="polyfills.bundle.js"></script>
  <script src="styles.bundle.js"></script>
  <script src="vendor.bundle.js"></script>
  <script src="main.bundle.js"></script>
<% } else { %>
  <!-- production bundles -->
  <script src="inline.bundle.js?ver=${maven.build.timestamp}"></script>
  <script src="polyfills.bundle.js?ver=${maven.build.timestamp}"></script>
  <script src="main.bundle.js?ver=${maven.build.timestamp}"></script>
<% } %>

This assumes you build your java project using maven, so turn off the file versioning ng build does and let maven handle the version naming (to avoid cache problems in when releasing versions). Otherwise you'd have to figure out a way to insert the Angular generated file names into your JSPs for every build.

ng build --prod --output-hashing none

Once the app-root is bootstrapped it can be moved using other javascript, as long as you make sure it is not removed from the DOM.