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）。