默认的angular-cli构建生成具有非常扁平结构的dist文件夹 - assets文件夹和js,html文件。有没有办法创造fe。脚本文件夹并在构建过程中将所有js文件放入其中?
答案 0 :(得分:4)
CLI尚未完全支持这一点,但它确实提供了一些有用的工具来帮助您完成大部分工作。我需要这个来部署我的Angular应用程序和WAR,同时尽量减少通过servlet-mappings添加的复杂程度。这个问题没有具体提到J2EE,但我认为这个解决方案的原则可以在各种环境中共享。
相关的ng build
参数:
--deploy-url
:将应用于资源的路径映射。 这可能与Angular-CLI目前接近您正在寻找的内容一样接近。 --output-path
:指定Angular构建的输出目录(特别是,我使用它来为不同的环境指定唯一的输出目录,因为应用程序正在部署到具有不同配置的多个目标)。--base-href
:应用程序的根URI。例如/angular-app/
http://localhost:4200/angular-app/
。这将设置<base href="<uri>">
头标记,并且是非哈希路由所必需的。对其他事情也许是必要的。最有趣的一个可能是--deploy-url
。例如,如果您将部署URL设置为/dist/
,则构建的应用程序中对JS文件的引用将以/dist/
为前缀。
这种方法的两大抓点:
--deploy-url
不会更改JS文件的输出路径。它只更改对JS文件的引用。文件本身仍将放在根构建目录中。您必须在构建过程中添加一个步骤来手动修复此问题。--deploy-url
似乎不适用于任何其他资产。我将所有其他资源放在assets/
目录中,而构建的输出仍然通过assets/<path>
(而非dist/assets/<path>
根据需要引用资产)。您可以通过提供虚拟目录或URL重写来解决此问题。作为参考,这是我生成的WAR目录结构:
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
以下是我制作此结构的步骤:
ng build -pr false --prod --output-path build/node-prod --base-href /angular-app/ --deploy-url /angular-app/dist/
。build/node-prod
的内容复制到WAR构建目录的app/dist
。index.jsp
将index.html
指向<%@include file="dist/index.html"%>
。/dist/*
和/assets/*
添加默认servlet(静态资产)的servlet映射。^/assets/(.*)$
的网址映射添加到/dist/assets/$1
(或通过httpd,nginx等)。这是必要的,因为上面给出了--deploy-url
不能用于其他资产的捕获。^/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应用程序,而无需将{em>所有 ng build
内置到根WAR路径中。这特别好,因为我们不想在可以避免的情况下添加全局servlet映射(例如,*.js
)。