Angular-cli构建文件夹结构

时间:2017-02-28 10:39:22

标签: angular typescript angular-cli

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

1 个答案:

答案 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

以下是我制作此结构的步骤:

  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.jspindex.html指向<%@include file="dist/index.html"%>
  4. 为路径/dist/*/assets/*添加默认servlet(静态资产)的servlet映射。
  5. 通过http://tuckey.org/urlrewrite/^/assets/(.*)$的网址映射添加到/dist/assets/$1(或通过httpd,nginx等)。这是必要的,因为上面给出了--deploy-url不能用于其他资产的捕获。
  6. (可选)将^/dist/index.html$的301或302重定向添加到根上下文路径,以防止用户通过dist URI访问该应用。
  7. 在生成的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)。