Angular2在JSP（Spring MVC中）

我的问题是相似的，即this existing question Web项目已使用 - Spring MVC的+ Angular1.x + JSP + JavaScript的等Angular2在JSP（Spring MVC中）

页面布局已经设计了瓷砖的技术和我必须开发一个样本页面 - 只有身体部分，即我必须继续使用瓷砖进行布局，并且必须重复使用 - 页眉，页脚，左侧导航等。

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

在我的新身体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主体页面。

我已经将angualr2 JS文件包含在身体标记外部的底部。

任何建议，从控制台中删除此错误，如果这种设置看起来不错？

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

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

来源

2017-08-17 Sabir Khan

这个错误仅仅意味着您要使用''组件来启动应用程序，但页面中没有这样的元素，所以Angular无法引导应用程序。您不应该尝试在与此角度应用无关的页面上启动角度应用。 –

在这些页面上（JSP代码），我没有使用任何角标记（我相信这意味着我不想在这些页面上开始角），只包含脚本文件。那我该怎么做？我也在脚本文件的底部包含了脚本文件。 –

这就是您为什么会遇到这种错误的原因：您正在包含包含JavaScript代码的脚本文件，该代码尝试通过使用元素“app-root”引导它来启动角度应用程序。但是这个元素不在页面上。所以它失败了。不要包含这些脚本。 –

从JB Nizet的注释输入中，我可以通过从通用应用程序布局JSP中删除角度js包含并将其放入正文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夹杂物，会出现误差。

来源

2017-08-18 03:46:25

Angular2在JSP（Spring MVC中）

回答

相关问题