nginx Angular 中的动态BASE_HREF

bpzcxfmw 于 2022-11-02 发布在 Nginx

关注(0)|答案(1)|浏览(173)

因此，使用Angular 14，我想在给定的路径上提供应用程序，这可能会因环境而异。这些环境事先并不知道，因此无法使用额外的配置更新angular.json，也无法在构建阶段使用--base-href选项。
为了缓解这个问题，我使用envsubst读取docker的环境变量，并在创建容器时将它们注入到应用程序配置（将给定值加载到窗口对象中的javascript文件）中。然后，我使用这个值通过注入令牌APP_BASE_HREF提供base href。
Angular应用程序部署在带有ngingx映像的Docker容器中，Traefik用于将流量路由到该容器。
但是，这种配置只适用于第一级路径。例如，在这种配置下，/和/profile这样的路径可以正常工作，但是，当我试图直接加载路径/admin/panel时，/admin部分被添加到base href中，并试图在/basepath/admin中查找脚本，尽管admin不是基本路径的一部分。此外，资产也不能正常工作。
我的问题是，什么是正确的Angular 14方法来准备应用程序在任何给定的基础上工作？
我的最小代码为这个问题：
环境管理系统：

(function (window) {
    window["env"] = window["env"] || {};

    window["environment"]["appBase"] = "$APPBASE";
})(this);

您可以在此查看更多信息。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <script src="assets/environment.js"></script>
    <body>
        <app-root></app-root>
    </body>
</html>

来源/环境产品：

export const environment = {
  production: true,
  appBase: window["environment"]["appBase"]
}

源代码/应用程序/应用程序模块.ts：

export function AppBaseHrefFactory(): string {
    return environment.appBase;
}

...
providers: [
  { provide: APP_BASE_HREF, useFactory: AppBaseHrefFactory },
],
...

entrypoint.sh （Docker容器入口点）：


# !/bin/sh

envsubst < /usr/share/nginx/html/apps/my-app/assets/environment.template.js > /usr/share/nginx/html/apps/my-app/assets/environment.js

exec nginx -g 'daemon off;'

nginx

来源：https://stackoverflow.com/questions/74067932/dynamic-base-href-in-angular