在Spring应用程序的JSP页面[TypeError]中集成angular应用程序

时间:2019-02-13 13:27:43

标签: angular jsp typeerror angular-routing

我正在尝试将Angular应用程序集成到现有的spring应用程序中。以下是用于集成的代码。它可以在某些jsp页面上运行,但在某些jsp页面上却无法运行,请参考下面的描述和浏览器中的呈现元素。

<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>

我能够看到所有脚本均已正确加载,但是angular app无法在页面上加载,而是在控制台中显示以下错误。

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)

浏览器中的渲染元素:

enter image description here

我无法指出确切的错误。由于组织政策的原因,我无法提供完整的jsp来源,但是同一应用程序在不同的jsp页面上呈现。

1 个答案:

答案 0 :(得分:0)

我尝试从除chrome之外的所有其他浏览器中打开相同的应用程序,并在Internet Explorer上遇到了不同的错误。给出的分辨率是从polyfill.ts import 'core-js/es6/array'; import 'core-js/es6/string';取消注释的两行,并且解决了Internet Explorer和Chrome的错误。 尽管问题并非特定于角度问题,但答案之一表明在角度应用中也会发生相同的错误。

找到问题here.