Search code examples
angularjsptypeerrorangular-routing

Integrating angular app in spring application, JSP page [TypeError]

I am trying to integrate Angular app in existing spring application. Below is the code used for integration. It works on some jsp pages but fails on some, please refer below description and rendered element in browser.

<div id="lanetable" style="display: block;">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <div>
    <div class="">
      <div id="container" class="formTableExternal" style="padding-bottom: 10px;">
        <div id="container">
          <app-root></app-root>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript"
    src="<%=ContextUtil.getContext(request)%>/product/AngularUIModules/app/polyfills.js"></script>
  <script type="text/javascript"
    src="<%=ContextUtil.getContext(request)%>/product/AngularUIModules/app/runtime.js"></script>
  <script type="text/javascript"
    src="<%=ContextUtil.getContext(request)%>/product/AngularUIModules/app/main.js"></script>
</div>

I am able to see all scripts are loaded properly but angular app does not load on page and instead gives below error in console.

main.js:1 ERROR TypeError: this.router.events.pipe(...).subscribe is not a function
    at e.setUpPreloading (main.js:1)
    at e.bootstrapListener (main.js:1)
    at main.js:1
    at Array.forEach (<anonymous>)
    at e._loadComponent (main.js:1)
    at e.bootstrap (main.js:1)
    at main.js:1
    at Array.forEach (<anonymous>)
    at e._moduleDoBootstrap (main.js:1)
    at main.js:1

main.js:1 ERROR Error: Uncaught (in promise): TypeError: this.expandSegmentGroup(...).pipe is not a function
TypeError: this.expandSegmentGroup(...).pipe is not a function
    at e.apply (main.js:1)
    at main.js:1
    at new e (polyfills.js:1)
    at e.runNavigate (main.js:1)
    at main.js:1
    at e.invoke (polyfills.js:1)
    at Object.onInvoke (main.js:1)
    at e.invoke (polyfills.js:1)
    at t.run (polyfills.js:1)
    at polyfills.js:1
    at j (polyfills.js:1)
    at j (polyfills.js:1)
    at polyfills.js:1
    at e.invokeTask (polyfills.js:1)
    at Object.onInvokeTask (main.js:1)
    at e.invokeTask (polyfills.js:1)
    at t.runTask (polyfills.js:1)
    at d (polyfills.js:1)

Rendered element in browser:

enter image description here

I am not able to pin point the exact error. I can not provide full source of jsp because of organization policy, but same app renders on different jsp pages.

Solution

  • I tried to open the same application from all other browsers apart from chrome and got different error on internet explorer. resolution given was uncomment two lines from polyfill.ts import 'core-js/es6/array'; import 'core-js/es6/string'; and that resolved error from both internet explorer and chrome. Although the question was not specific to angular but one of the answer suggest the same error occurs in angular app as well.

    find that question here.