Angular-cli 构建文件夹结构

Question

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

Answer 1

CLI 还不完全支持这一点，但它确实提供了一些有用的工具来帮助您完成大部分工作。我需要它来部署我的 Angular 应用程序和 WAR，同时尽量减少通过 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 .如果您将部署 URL 设置为 /dist/ ，例如，那么在您构建的应用程序中对 JS 文件的引用将以 /dist/ 为前缀.

---

此方法的两大收获:

• --deploy-url不会更改 JS 文件的输出 路径。它只更改对 JS 文件的引用。文件本身仍将放在根构建目录中。您必须在构建过程中添加一个步骤才能手动修复此问题。
• --deploy-url似乎不适用于任何其他 Assets 。我将所有其他 Assets 放在 assets/ 中目录，构建的输出仍然通过 assets/<path> 引用 Assets (而不是根据需要 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. 复制 build/node-prod 的内容到 WAR 构建目录的 app/dist通过 gradle 任务。
3. 点index.jsp至 index.html通过内容<%@include file="dist/index.html"%> .
4. 为路径 /dist/* 添加默认 servlet(静态 Assets )的 servlet 映射和 /assets/* .
5. 通过 http://tuckey.org/urlrewrite/ 添加 URL 映射对于 ^/assets/(.*)$至 /dist/assets/$1 (或通过 httpd、nginx 等)。这是必需的，因为上面给出了 --deploy-url 的问题。不为其他 Assets 工作。
6. (可选)为 ^/dist/index.html$ 添加 301 或 302 重定向到根上下文路径以防止用户通过 dist 访问应用程序网址。

在生成的 webapp 中，http://localhost/angular-app/是我的应用程序的唯一有效端点。此端点指向 index.jsp , 其中包括 index.html 的内容, 它通过 <script src="/angular-app/dist/<some-file>.js"></script> 加载相关的 JS标签。

当需要一些其他 Assets 时，例如 Logo 图像，页面会向 assets/<file-name> 发出请求，通过 Tuckey 在服务器端重写为 dist/assets/<file-name> ，透明地解析请求的 Assets 。

这个解决方案的好处是我们能够在根上下文中部署 Angular 应用程序，而不必将 所有 ng build内置到根 WAR 路径中。这特别好，因为我们不想添加可以避免的全局 servlet 映射(例如 *.js)。