从 app.module 中的本地 json 文件读取 api url

Question

我正在做一个 Angular 项目。 这个项目将建立在不同的地址。 而且每个api链接都会不同。 我想通过将这些地址保存在 json 文件中来在本地使用它，而不是在 app.module 中为每个更改和构建 apiUrl 提供程序。

我在 app.module.ts 中的当前代码；

providers: [
   { provide: 'apiUrl', useValue: 'http://api.xxxx' },
   { provide: 'imgUrl', useValue: 'http://img.xxxx' },
   ...
]

由于这些地址在每个项目中会有所不同，我将这些地址保存在本地json文件中，如下所示；

资产/数据/links.json；

{
  "apiUrl": "http://api.xxxx",
  "imgUrl": "http://img.xxxx",
}

我尝试使用 APP_INITIALIZER 执行此操作，但没有成功。 因为在读取此 json 文件中的值后，我无法将其传递给 app.module.ts 中的 apiUrl 和 imgUrl 提供程序。

这个问题有方法解决吗？ 或者如何通过本地文件使用这些链接？

谢谢。

Answer 1

为此，您可以使用位于环境文件夹中的环境文件。

假设您需要为 dev 和 prod 构建具有不同 api url 的项目，在这种情况下，您可以创建一个如下所示的环境文件。

---environment.prod.ts---
export const environment = {
  production: true,
  apiUrl: 'https://api.prod.com',
  imgUrl: 'https://img.prod.com'
};

---environment.dev.ts---
export const environment = {
  production: false,
  apiUrl: 'https://api.dev.com',
  imgUrl: 'https://img.dev.com'
};

注意：对于 local ，默认情况下，属性将由environment.ts读取

创建上述文件后，您可以在 angular.json 中定义它们以进行如下构建。

在配置下添加记录如下...

"configurations": {
        "dev": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev.ts"
            }
          ]
        },
        "prod": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ]
        }

出于服务目的，您可以在服务下添加配置，如下所示，

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "movenow:build"
          },
          "configurations": {
            "dev": {
              "browserTarget": "movenow:build:dev"
            },
            "prod": {
              "browserTarget": "movenow:build:prod"
            }
          }
        }

您可以按如下方式访问环境变量。

import {environment} from '../../environments/environment';

export component Component1 {

       apiUrl = environment.apiUrl;
       imgUrl = environment.imgUrl;
}

希望这可以帮助。