Angular-cli构建文件夹结构

Question

默认的angular-cli构建生成具有非常扁平结构的dist文件夹 - assets文件夹和js,html文件.有没有办法创造fe.脚本文件夹并在构建过程中将所有js文件放入其中？

Answer 1

CLI尚不完全支持此功能，但确实提供了一些有用的工具来帮助您了解更多信息。我需要这样做来与WAR一起部署我的Angular应用程序，同时尝试最小化通过servlet映射添加的复杂性。这个问题没有特别提到J2EE，但是我认为可以从各种环境中共享该解决方案的原理。

相关ng build参数：

• --deploy-url：将应用于资源的路径映射。这可能与Angular-CLI当前与您要查找的内容接近。
• --output-path：为Angular构建指定输出目录（特别是，我使用此目录为不同的环境指定了唯一的输出目录，因为该应用程序已部署到具有不同配置的多个目标上）。
• --base-href：应用程序的根URI。例如，/angular-app/对于http://localhost:4200/angular-app/。这将设置<base href="<uri>">head标签，这对于非哈希路由是必需的。其他事情也可能有必要。

最适合您的是--deploy-url。/dist/例如，如果将部署URL设置为，则在构建的应用程序中对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

这些是我生成此结构所采取的步骤：

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/*和的默认Servlet（静态资产）添加Servlet映射/assets/*。
5. 添加通过URL映射http://tuckey.org/urlrewrite/用于^/assets/(.*)$到/dist/assets/$1（或通过httpd的，nginx的，等等）。这是必需的，因为上面给出了--deploy-url不使用其他资产的捕获量。
6. （可选）将301或302重定向添加^/dist/index.html$到根上下文路径，以防止用户通过distURI 访问应用。

在生成的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>，透明地解析为所请求的资产。

关于这个解决方案的好处是，我们可以不必把部署在根上下文的角度应用程序的一切是ng build建立在根WAR路径。这特别好，因为我们不想*.js在可以避免的情况下添加全局servlet映射（例如）。