时间戳

首页 > 解决方案 > 在spring应用程序中集成angular app，JSP页面[TypeError]

angular - 在spring应用程序中集成angular app，JSP页面[TypeError]

问题描述

我正在尝试将 Angular 应用程序集成到现有的 spring 应用程序中。下面是用于集成的代码。它适用于某些 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>

我能够看到所有脚本都已正确加载，但角度应用程序未在页面上加载，而是在控制台中出现以下错误。

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)

浏览器中的渲染元素：

在此处输入图像描述

我无法指出确切的错误。由于组织政策，我无法提供完整的 jsp 源代码，但相同的应用程序会在不同的 jsp 页面上呈现。

标签： angularjsptypeerrorangular-routing

解决方案

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

在这里找到这个问题。

推荐阅读