Question

应用程序：我的角度应用程序托管在Nginx服务器上。该应用程序使用两个不同的API服务器，它们都托管在NodeJS / express上。

问题：这两个API服务器的主机名和端口都是在我的REST服务的Angular应用程序中静态定义的。

Canvas

应用程序设计的方式是，两个API服务器都可以具有不同的主机名和端口名，这可以与Nginx服务器本身的主机名不同。

期望的：使用from tkinter import * from tkinter import ttk Main_window = Tk() # Make only one Tk main window Main_window.geometry('300x150') Main_window.title("Get Shirts (Buy 1 get 1 Free)") def small(): s = Toplevel() # For secondary window use Toplevel s.title('Small Preset Shirt (Not fit to scale)') canvas = Canvas(s, width = 800, height = 100) canvas.pack() b1=ttk.Button(s,text='Click to Start', command = None) b1.pack() photo = PhotoImage(file = 'logo.png') b1.img_ref = photo # Create a reference b1.config(image=photo,compound=RIGHT) # s.mainloop() # Don't use mainloop more than once def stripes(): stripes = Toplevel() # For secondary window use Toplevel stripes.title('Black Shirt with Stripes') canvas = Canvas(stripes, width = 800, height = 100) canvas.pack() b2=ttk.Button(stripes,text='Click to See Final Price', command = None) b2.pack() photo = PhotoImage(file = 'logo.png') b2.img_ref = photo # Sometimes images in functions becomes garbage value. b2.config(image=photo,compound=RIGHT) # stripes.mainloop() # Using two of these will do nothnig. Category_Lb = Label(Main_window, text='Category', font=('',25)) Category_Lb.pack() Cate_1 = ttk.Button(Main_window, text='Small Preset Shirt', command=small) Cate_1.pack() Cate_2 = ttk.Button(Main_window, text='Black Shirt with Stripes', command=stripes) Cate_2.pack() Main_window.mainloop()构建angular应用程序并将生成的文件放置在nginx服务器的html文件夹中之后，应该有一个选项可以动态配置所使用的主机名和端口根据爱好。

我想找到使用外部json文件动态配置此内容的最佳方法。

我尝试直接在nginx服务器中放置一个export class AppREST { primary_api_server_hostname: string = "https://hostname_1:port_1" secondary_api_server_hostname: string = "https://hostname_2:port_2" //using the above hosts for API }文件，该文件在初始化REST api之前被读取。

这很好用，但只能视为变通方法，因为使用角度CLI ng build --prod开发应用程序变得一团糟。

Angular团队有什么建议的解决方案吗？

Answer 1

因此，您想创建一个服务，该服务在Angular应用程序引导时初始化并从JSON文件加载变量。

您需要创建一个加载配置并在应用程序引导时运行的服务：

import { Injectable, Injector } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class AppConfigService {
    private appConfig;

    constructor (private injector: Injector) { }

    loadAppConfig() {
        let http = this.injector.get(HttpClient);

        return http.get('/assets/app-config.json')
        .toPromise()
        .then(data => {
            this.appConfig = data;
        })
    }

    get config() {
        return this.appConfig;
    }
}

积分：How To Use Run-Time Environment Variables In Angular

在Angular应用程序中加载远程配置文件

1 个答案: