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

回答

相關問題