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

问题描述

我正在开发一个有角度的应用程序，它是一种产品，并已部署到多个客户.客户端将采用这个有角度的应用程序并将其托管在他们的服务器中.因此，服务的URL对于客户端而言将是不同的.我已经看到了有关dev，prod的解决方案.但这在这种情况下将不适用.我正在寻找类似于.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文件中有theyr特定的参数

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屋！