Question

我正在寻找一种构建生产角度并能够更改所使用的api网址的方法。

例如，具有api和有角网的第一台服务器的网址为http://test.com。

在另一台服务器上，我将对api和angular web使用相同的代码，但其网址为http://test2.com。我知道如何解决此问题而无需重新构建api。

但是使用Angular，我只有在更改url然后为第二台服务器重建代码时才知道该怎么做。

有没有办法例如设置文件？

Answer 1

首先，您必须创建一个服务来管理外部配置。我们稍后会讨论现在，让我们进入您的 app.module.ts 。

在这里您应该首先导入服务（我将其称为AppConfigService）

...

import { AppConfigService } from './services/app-config.service';

...

然后，在@NgModule之前，必须导出一个将初始化所有配置的函数：

export function initializeConfig( config: AppConfigService ) {
    return () => config.load();
}

现在，我们将其添加到NgModule提供程序中：

...
@NgModule({
    declarations: [ ... ],
    imports: [ ... ],
    providers: [
        ...
        AppConfigService, {
            provide: APP_INITIALIZER,
            useFactory: initializeConfig,
            deps: [ AppConfigService ],
            multi: true
        },
        ...
    ],
    bootstrap: [AppComponent]
})
...

现在让我们看一下我们之前讨论的服务：

import {Injectable} from '@angular/core';
import {HttpClient, HttpErrorResponse} from "@angular/common/http";
import {Observable, throwError} from "rxjs";

@Injectable({
    providedIn: 'root'
})
export class AppConfigService {
    private config: Object;

    constructor(
        private _http: HttpClient
    ) {
        this.config = {};
    }

    public getParam(key: any) {
        // Returns a specific parameter

        if (this.config[key]) {
            return this.config[key];
        } else if (!key) {
            return this.config;
        }

        return false;
    }

    public load(): Promise<any> {
        // This will load all the parameters
        const confFile = 'path-to-your-json-file';

        return new Promise((resolve, reject) => {
            this._http.get(confFile).subscribe(
                res => {
                    this.config = res;
                    resolve(true);
                },
                err => {
                    this.config = {};
                    reject(err);
                }
            )
        });
    }
}

最后一部分可以做很多改进，这只是一个简单的例子。

最后，我们像这样从您的组件中获取数据：

import {AppConfigService} from './services/app-config.service';

...

export class YourComponent {

    public url: string;

    constructor ( private _config: AppConfigService ) {
        this.url = this._config.getParam('url1');
    }
}

编辑：现在，您可以拥有一个配置了应用程序的json文件，一旦投入生产，数据仍将从该文件中获取，因此即使在生产后也可以对其进行更改

多个服务器上的Angular 2+

1 个答案: