如何将一个角度实例部署到多个客户端答案

【问题标题】：how to deploy one instance of angular to multiple clients如何将一个角度实例部署到多个客户端
【发布时间】：2021-02-16 09:35:30
【问题描述】：

我正在开发一个 Angular 应用程序，它是一种产品并部署到多个客户端。每个客户端在后端都有自己的数据库，因此每个客户端都有自己的 api。例如，如果客户一种类型http://url1.com我应该使用他的api1和他的logo1，如果客户两种类型http://url2.com我应该使用他的api2和他的logo2等等。我正在寻找一个配置文件，或者让我为每个需要我的应用程序的客户添加 url、api 和徽标的东西。

【问题讨论】：

标签： angular typescript nginx deployment web-applications

【解决方案1】：

我建议使用包管理器来执行此操作。例如 yarn 或 npm 将是一个不错的选择。默认情况下，npm 可能已经安装在您的本地计算机上。在 angular.json 文件中，您可以为每个生产系统添加不同的配置。 You can read the details in this article

简而言之：您需要复制 environment.prod.ts 文件，正确命名它们，通过添加新环境和构建新环境来更改 angular.json 文件每个 URL 的站点，您需要使用 --configuration url1 命令行参数。

这里是 angular.json 中的一个小快照（我删除了一些项目以使其更短）：

{
  "$schema":"./node_modules/@angular/cli/lib/config/schema.json",
  "version":1,
  "cli":{
    "packageManager":"npm"
  },
  "newProjectRoot":"projects",
  "projects":{
    "safe-trace-tx-ui":{
      "root":"",
      "sourceRoot":"src",
      "projectType":"application",
      "architect":{
        "build":{
          "configurations":{
            "production":{
              "budgets":[
                {
                  "type":"anyComponentStyle",
                  "maximumWarning":"20kb"
                }
              ],
              "optimization":true,
              "outputHashing":"all",
              "sourceMap":false,
              "extractCss":true,
              "namedChunks":false,
              "aot":true,
              "extractLicenses":true,
              "vendorChunk":false,
              "buildOptimizer":true,
              "fileReplacements":[
                {
                  "replace":"src/environments/environment.ts",
                  "with":"src/environments/environment.prod.ts"
                }
              ]
            },
            "local":{
              "sourceMap":true,
              "budgets":[
                {
                  "type":"initial",
                  "maximumWarning":"2mb"
                }
              ]
            },
            "locales5":{
              "sourceMap":true,
              "budgets":[
                {
                  "type":"initial",
                  "maximumWarning":"2mb"
                }
              ],
              "tsConfig":"src/tsconfig.app.es5.json"
            }
          }
        }
      }
    }
  },
  "defaultProject":"safe-trace-tx-ui",
  "schematics":{
    "@schematics/angular:component":{
      "prefix":"app",
      "style":"scss"
    },
    "@schematics/angular:directive":{
      "prefix":"app"
    }
  }
}

environment.ts 的示例（您需要将其重命名为 environment.url1.ts）：

export const environment = {
    endpoints: {/* endpoint will go here */},
    production: false,
    apiBaseUrl: 'http://url1.com',
}

仅供参考：最好在 package.json 文件中创建定义明确的命令，这样以后为每个环境运行命令会更容易。例如：npm run build-url1。这个命令在你的 package.json 文件中应该是这样的：

"build:url1": "ng build --prod --configuration:url1"

对于 logo1、logo2，请同时使用 environment.ts 文件。您可以在项目 src 文件夹中创建徽标。引用 environment.ts 文件中的每个徽标。路径应该类似于：'/assets/favicons/favicon.ico' 然后组件应该访问环境文件，为其创建一个单独的组件级变量。因此，您可以在组件 html 中使用此变量。即：

<link rel="shortcut icon" href="{{ logoPath }}">

请大量搜索此解决方案。这篇文章只是帮助您开始，在 stackoverflow 中，我们帮助解决特定问题，而不是为您创建通用解决方案。如果您在此处遇到没有答案的问题，请随时为它创建一个问题。

【讨论】：