JSP中的Angular2（Spring MVC）答案

【问题标题】：Angular2 in JSP ( Spring MVC )JSP中的Angular2（Spring MVC）
【发布时间】：2017-08-17 08:15:11
【问题描述】：

我的问题类似于this existing question，即一个 Web 项目已经在使用 - Spring MVC + Angular1.x + JSP + JavaScript 等。

页面布局已经使用磁贴技术进行设计，我必须开发一个示例页面 - 仅正文部分，即我必须继续使用磁贴进行布局，并且必须重复使用 - 页眉、页脚、左侧导航等。

所以我建立了一个单独的 Angular2 项目，构建它并将最终的 JS 文件包含在图块的布局 JSP 中。

在我的新 body jsp 中，当我使用 angular2 根组件时，我的 jSP 显示完美，但应用程序的所有其他页面都显示以下错误，

core.es5.js:1020 ERROR Error: The selector "app-root" did not match any elements
    at DefaultDomRenderer2.selectRootElement (platform-browser.es5.js:2791)
    at createElement (core.es5.js:9172)
    at createViewNodes (core.es5.js:12146)
    at createRootView (core.es5.js:12075)
    at Object.createProdRootView [as createRootView] (core.es5.js:12760)
    at ComponentFactory_.create (core.es5.js:9858)
    at ComponentFactoryBoundToModule.create (core.es5.js:3333)
    at ApplicationRef_.bootstrap (core.es5.js:4763)
    at core.es5.js:4546
    at Array.forEach (<anonymous>)
defaultErrorLogger @ core.es5.js:1020
zone.js:654 Unhandled Promise rejection: The selector "app-root" did not match any elements ; Zone: <root> ; Task: Promise.then ; Value: Error: The selector "app-root" did not match any elements
    at DefaultDomRenderer2.selectRootElement (platform-browser.es5.js:2791)
    at createElement (core.es5.js:9172)
    at createViewNodes (core.es5.js:12146)
    at createRootView (core.es5.js:12075)
    at Object.createProdRootView [as createRootView] (core.es5.js:12760)
    at ComponentFactory_.create (core.es5.js:9858)
    at ComponentFactoryBoundToModule.create (core.es5.js:3333)
    at ApplicationRef_.bootstrap (core.es5.js:4763)
    at core.es5.js:4546
    at Array.forEach (<anonymous>) Error: The selector "app-root" did not match any elements
    at DefaultDomRenderer2.selectRootElement

以上错误出现在控制台上，其他 JSP 页面保持正常工作，并且此背景错误不会影响它们。

这个错误不会出现在我调用根组件的 JSP 页面上，即我的新 jsp 正文页面。

我在底部的外部 body 标记之外包含了 angualr2 JS 文件。

有什么建议可以从控制台中删除此错误以及此设置是否正常？

我们将设置一个自动化流程来构建文件并将文件从 Angualr2 UI 项目复制到 Spring MVC 项目，并且只有那些最终的 JS 文件将与 app.js 一起部署。

它是一个第一次加载页面的 Spring MVC 控制器 - 一个 JSP 。

【问题讨论】：

该错误仅表示您告诉 Angular 使用 <app-root> 组件启动应用程序，但页面中没有此类元素，因此 Angular 无法引导应用程序。您不应尝试在与此 Angular 应用程序无关的页面上启动 Angular 应用程序。
在那些页面（JSP 代码）上，我没有使用任何 angular 标签（我相信这意味着我没有尝试在这些页面上启动 angular），只包含脚本文件。那么我该怎么做呢？我也在 body 之外包含了脚本文件，在底部。
这正是您收到该错误的原因：您包含的脚本文件包含 JavaScript 代码，该代码试图通过使用元素 app-root 引导来启动 Angular 应用程序。但是这个元素不在页面上。所以它失败了。不要包含那些脚本。
好的，所以我需要将那些脚本包含在不常见的布局中，而只包含在我的 body jsp 中。会尝试的。谢谢。
在我的 body jsp 中，首先我调用了 root component ，<app-root>Loading...</app-root> 然后包含了 angular2 js 文件......并且没有错误。如果 js 文件包含在根标记之前，则会出现错误。 @JBNizet：如果你愿意，你可以给出一个我会接受的答案。

标签： angularjs angular jsp spring-mvc

【解决方案1】：

使用来自 cmets 的 JB Nizet 的输入，我能够通过从常见的应用程序布局 JSP 中删除 angular js 包含并将其放入 body jsp 文件中来解决问题，如下所示。

<app-root>Loading...</app-root>

<!--  For Angular 2 -->
<script type="text/javascript" src="inline.bundle.js" ></script>
<script type="text/javascript" src="polyfills.bundle.js" ></script>
<script type="text/javascript" src="styles.bundle.js" ></script>
<script type="text/javascript" src="vendor.bundle.js" ></script>
<script type="text/javascript" src="main.bundle.js" > </script>

我正在构建应用程序 - ng build --env=prod --output-hashing none

如果我在调用根组件之前进行 JS 包含，则会发生错误。

【讨论】：