Angular-cli构建文件夹结构

CLI尚未完全支持这一点,但它确实提供了一些有用的工具来帮助您完成大部分工作.我需要这个来部署我的Angular应用程序和WAR,同时尽量减少通过servlet-mappings添加的复杂程度.这个问题没有具体提到J2EE,但我认为这个解决方案的原则可以在各种环境中共享.

相关的ng构建参数：

> –deploy-url：将应用于资源的路径映射.这可能与Angular-CLI目前接近您正在寻找的内容一样接近.
> –output-path：指定Angular构建的输出目录(特别是,我使用它来为不同的环境指定唯一的输出目录,因为应用程序正在部署到具有不同配置的多个目标).
> –base-href：应用程序的根URI.例如,/ angular-app / for 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 /.
>通过gradle任务将build / node-prod的内容复制到WAR构建目录的app / dist.
>通过内容<％@ include file =“dist / index.html”％>将index.jsp指向index.html.
>为路径/ dist / *和/ assets / *添加默认servlet(静态资产)的servlet映射.
>通过http://tuckey.org/urlrewrite/为^ / assets /(.*)$添加URL映射到/ dist / assets / $1(或通过httpd,nginx等).这是必需的,因为上面给出的catch-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”>< /加载相关的JS脚本>标签. 当需要其他资产时,例如徽标图像,页面向资产/<文件名>发出请求,通过Tuckey将服务器端重写为dist / assets /< file-name>,透明地解析到所请求的资产.

这个解决方案的好处是我们能够在根上下文中部署Angular应用程序,而不必将构建的所有内容都放在根WAR路径中.这是特别好的,因为我们不希望在可以避免的情况下添加全局servlet映射(例如,* .js).