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

【问题标题】：Integrating angular app in spring application, JSP page [TypeError]在spring应用程序中集成angular app，JSP页面[TypeError]
【发布时间】：2019-07-07 08:33:20
【问题描述】：

我正在尝试将 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>

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

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页面上呈现。

【问题讨论】：

标签： angular jsp typeerror angular-routing

【解决方案1】：

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

找到那个问题here.

【讨论】：