Angular5:将 Angular 应用程序部署到多个客户端 [英] Angular5: Deploying Angular application to multiple clients

问题描述

我正在开发一个 Angular 应用程序，它是一个产品并部署到多个客户端.客户端将使用这个 Angular 应用程序并将其托管在他们的服务器中.因此，服务的 url 对客户端来说会有所不同.我见过讨论开发、生产的解决方案.但这不适用于这种情况.我正在寻找一个类似于 .net 配置文件的配置文件.我创建了一个单独的 app.config.ts 文件，但是当我执行 ng build 时它会被构建.我正在寻找一种解决方案，我可以将应用部署到任何客户端，无需他们重新构建.

I am developing an angular application which is a product and deployed to multiple clients. Clients will take this angular application and host it in their servers. So the Services' url will be different for the clients. I have seen solutions that talk about dev, prod. But that will not be applicable in this case. I am looking for a config file that is similar to .net config file. I have created a separate app.config.ts file but that gets built when I do ng build. I am looking for a solution where I can deploy the app to any client with out them to build it again.

import { InjectionToken } from "@angular/core";

export let APP_CONFIG = new InjectionToken("app.config");

export interface IAppConfig {
    apiEndpoint: string;
}

export const AppConfig: IAppConfig = {    
    apiEndpoint: "http://88.87.86.999/"
};

推荐答案

你可以做什么 将 json 格式的配置文件托管在 assets 文件夹中并动态检索它.您需要确保在应用程序启动之前检索它，这样它就可以在需要时在组件/服务中可用.为此，您可以使用 APP_INITIALIZER 令牌

What you can do it host the config file in json format in the assets folder and retrieve it dynamically. You need to make sure that you retrieve it before the app starts, that way it can be available in components/services when they need it. For that, you can use the APP_INITIALIZER Token

步骤 #1:将你的 json 配置文件放在 src/assets/config/conf.json(json 格式，不是 ts 格式，因为在 prod 模式下没有 TS 编译器)

Step #1: put your json configuration files under src/assets/config/conf.json (json format, not ts format since there is no TS compiler in prod mode)

第 2 步:添加新的配置服务

import {Inject, Injectable} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from 'rxjs/Rx';
import {environment} from "../../environments/environment";

/**
 * Declaration of config class
 */
export class AppConfig
{
//Your properties here
  readonly apiEndpoint: string;
}

/**
 * Global variable containing actual config to use. Initialised via ajax call
 */
export let APP_CONFIG: AppConfig;

/**
 * Service in charge of dynamically initialising configuration
 */
@Injectable()
export class AppConfigService
{

  constructor(private http: HttpClient)
  {
  }

  public load()
  {
    return new Promise((resolve, reject) => {

      this.http.get('/assets/config/config.json').catch((error: any): any => {
        reject(true);
        return Observable.throw('Server error');
      }).subscribe((envResponse :any) => {
        let t = new AppConfig();
        //Modify envResponse here if needed (e.g. to ajust parameters for https,...)
        APP_CONFIG = Object.assign(t, envResponse);
        resolve(true);
      });

    });
  }
}

第 3 步:在主模块中，在声明模块之前添加此内容

Step #3: In your main module, add this before declaring the module

/**
* Exported function so that it works with AOT
* @param {AppConfigService} configService
* @returns {Function}
*/
export function loadConfigService(configService: AppConfigService): Function 

{
  return () => { return configService.load() }; 
}

第 4 步:修改模块提供程序以添加此内容

Step #4: Modify the module providers to add this

providers: [
  …

  AppConfigService,
  { provide: APP_INITIALIZER, useFactory: loadConfigService , deps: [AppConfigService], multi: true },


],

第 5 步:在您的代码中，使用配置

Step 5: In your code, use the config

import {APP_CONFIG} from "../services/app-config.service";

//…
return APP_CONFIG.configXXX;

现在，您可以将应用交付给多个客户；每个客户端只需要在 conf.json 文件中有他们的特定参数

Now, you can ship the app to multiple clients; each client just need to have theyr specific parameter in conf.json file

这篇关于Angular5:将 Angular 应用程序部署到多个客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！