Angular-cli構建文件夾結構

Question

默認的angular-cli構建生成具有非常扁平結構的dist文件夾 - assets文件夾和js，html文件。有沒有辦法創建fe。腳本文件夾，並在構建過程中把所有的js文件？

Answer 1

CLI尚未完全支持這一點，但它確實提供了一些有用的工具，可以幫助您實現這一目標。我需要這個來部署我的Angular應用程序和WAR，同時儘量減少通過servlet映射添加的複雜度。這個問題沒有具體提到J2EE，但我認爲這個解決方案的原理可以在各種環境中共享。

---

相關ng build參數：

• --deploy-url：其將被應用到資源的路徑映射。 這可能與Angular-CLI目前所獲得的內容相近。
• --output-path：爲Angular構建指定一個輸出目錄（特別是，我用它爲不同環境指定了唯一的輸出目錄，因爲應用程序正在部署到具有不同配置的多個目標上）。
• --base-href：應用程序的根URI。例如，對於http://localhost:4200/angular-app/，/angular-app/。這設置了<base href="<uri>">頭標記，並且對於非哈希路由是必需的。對其他事情也可能是必要的。

對你來說最有趣的一個可能是--deploy-url。例如，如果您設置了一個部署URL /dist/，那麼在您構建的應用程序中對JS文件的引用將以/dist/爲前綴。

---

兩個大漁獲這種方法：

• --deploy-url不會改變的JS文件輸出路徑。它只會改變對JS文件的引用。這些文件本身仍將放在根目錄中。您必須在構建過程中添加一個步驟來手動修復此問題。
• --deploy-url似乎不適用於任何其他資產。我將所有其他資產放在assets/目錄中，並且構建的輸出仍然通過assets/<path>（而不是dist/assets/<path>根據需要）引用資產。您可以通過提供虛擬目錄或URL重寫來解決此問題。

---

以供參考，在這裏是爲戰爭我生成的目錄結構：

app/ 
    dist/ <-- Deployed Angular application 
     assets/ 
      (images, CSS, etc) 
     *.js 
     (other assets pulled into the root path, e.g. *.(svg|eot|woff|woff2|ttf) from Font Awesome) 
     index.html 
    WEB-INF/ 
    ... 
    index.jsp 

這些都是我主動產生這種結構的步驟：

1. ng build -pr false --prod --output-path build/node-prod --base-href /angular-app/ --deploy-url /angular-app/dist/。
2. 通過gradle任務將build/node-prod的內容複製到WAR構建目錄的app/dist。
3. 點index.jsp至index.html通過內容<%@include file="dist/index.html"%>。
4. 爲路徑/dist/*和/assets/*的默認servlet（靜態資產）添加servlet映射。
5. 通過http://tuckey.org/urlrewrite/爲^/assets/(.*)$添加URL映射到/dist/assets/$1（或通過httpd，nginx等）。由於上面給出的--deploy-url不適用於其他資產，因此這是必需的。
6. （可選）將^/dist/index.html$的301或302重定向添加到根上下文路徑，以防止用戶通過dist URI訪問應用程序。

在生成的webapp中，http://localhost/angular-app/是我的應用程序的唯一有效端點。該端點指向index.jsp，其中包含index.html的內容，該內容通過<script src="/angular-app/dist/<some-file>.js"></script>標籤加載相關JS。

當需要其他資源時，例如徽標圖像，頁面向assets/<file-name>發出請求，服務器端通過Tuckey將其重寫爲dist/assets/<file-name>，透明地解析請求的資產。

這個解決方案的好處在於我們能夠在根上下文中部署Angular應用程序，而不必將內部的ng build內置到根WAR路徑中。這是非常好的，因爲我們不希望在可以避免的情況下添加全局servlet映射（例如，*.js）。