时间戳

首页 > 解决方案 > Angular 无法从 configuration.js 加载 app.module.ts 中的变量

angular - Angular 无法从 configuration.js 加载 app.module.ts 中的变量

问题描述

在我的 app.module.ts 中，我正在从资产文件夹中的 config/production.json 加载配置变量，以便在构建部署到 iis 服务器后进行更改

本地代码运行良好，它正在从 configuration.json 获取变量，但是有一次构建已经部署，它没有从配置文件中获取变量这是我的角度代码

我的 production.json 文件

{
     "production": true,
     "LogInapiUrl": "https://keenucfrs_public.keenu.pk/Develop/API/Vouchers/LogIn",
     "RecaptchaKey":"6LcNeewZAAAAAA3prujTXoskl05x0qLYwFGzUDas",
     "VoucherByChannelIdAPI":"https://keenucfrs_public.keenu.pk/Develop/API/Vouchers/GetVouchersByChannelId/",
     "ChannelAPI": "https://keenucfrs_public.keenu.pk/Develop/API/Vouchers/GetChannels",
     "PortalPath":"/Develop/Portal/ClientApp/"
}

用于获取所有配置变量的 Configservice

import { Injectable, APP_INITIALIZER } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/Rx';

@Injectable()
export class ConfigServiceService {

    private _config: Object
    private _env: string;

    constructor(private _http: Http) { }
    load() {
        return new Promise((resolve, reject) => {
            this._env = 'production';
            this._http.get('./assets/config/' + this._env + '.json')
                .map(res => res.json())
                .subscribe((data) => {
                    this._config = data;
                    resolve(true);
                },
                (error: any) => {
                    console.error(error);
                    return Observable.throw(error.json().error || 'Server error');
                });
        });
    }
    // Is app in the development mode?
    isDevmode() {
        return this._env === 'development';
    }
    // Gets API route based on the provided key
    getApi(key: string): string {
        return this._config["API_ENDPOINTS"][key];
    }
    // Gets a value of specified property in the configuration file
    get(key: any) {
        return this._config[key];
    }
}

export function ConfigFactory(config: ConfigServiceService) {
    return () => config.load();
}

export function init() {
    return {
        provide: APP_INITIALIZER,
        useFactory: ConfigFactory,
        deps: [ConfigServiceService],
        multi: true
    }
}

const ConfigModule = {
    init: init
}

export { ConfigModule };

在我的不同组件中，它工作正常

private  ChannelsAPI=this._configService.get("ChannelAPI");

 constructor(private httpClient: HttpClient,private _configService:ConfigServiceService ) {}

但是在 app.module.ts 文件上

Providers 是在上课之前声明的，所以不能在 Angular 10 中使用它

标签： angular

解决方案

实际上，我从一位同事那里得到了一些帮助，他为正在工作的 Recaptcha Key 提出了以下建议。

他在查看 APP_INITIALIZER 时弹出以下工具提示：

*一个注入令牌，允许您提供一个或多个初始化函数。这些函数在应用程序启动时注入并在应用程序初始化期间执行。如果这些函数中的任何一个返回 Promise，则在解决 Promise 之前初始化不会完成。

例如，您可以创建一个加载语言数据或外部配置的工厂函数，并将该函数提供给 APP_INITIALIZER 令牌。这样，该函数在应用程序引导过程中执行，并且所需的数据在启动时可用。*

APP_INITIALIZER 可以作为依赖项传递，您尝试运行的函数将在初始化之前执行。

我尝试使用上面的代码来展示提供者将如何寻找初始化服务然后提取 Recaptcha Key。

      providers: [
        ConfigServiceService,
        {
          provide: APP_INITIALIZER,
          deps: [ConfigServiceService],
          useFactory: (configService: ConfigServiceService) => {
            return () => {
              //Make sure to return a promise!
              return configService.load();
            };
          },
          multi: true,
        },
        {
          provide: RECAPTCHA_V3_SITE_KEY,
          deps: [ConfigServiceService, APP_INITIALIZER],
          useFactory: (configService: ConfigServiceService) =>
            configService?.get("RecaptchaKey"),
        },
      ]

推荐阅读