angular - System.import 构建后不搜索文件(Angular2)

Question

目前我正在使用 system.import 在运行时动态加载文件以更改我的环境变量。

当我只使用 ng serve 时这很好用。我转到该文件，在那里更改我的环境变量，刷新页面后它更改了我的 API 网址。

现在我正在尝试将它与 tomcat 一起使用。我构建我的应用程序并将其部署到 tomcat。它找到了文件并构建得很好，但是当我稍后更改文件时，它不再像我在本地使用 ng serve 那样更新。

我的代码:

app.component.ts

ngOnInit()
{
    this.loadApiLinks();
}

loadApiLinks() {
    System.import('../../../deployment.ts').then(deployment=>{
        environment.API_ROOT = deployment.getApiRoot();
        environment.API_ENDPOINT = deployment.getApiEndpoint();
        this.isDataAvailable = true;
        console.log(environment.API_ROOT);
    });
}

我加载的文件:

export enum Environment {
PRODUCTION,
ACCEPTANCE,
DEVELOPMENT,
LOCAL}
// Edit this variable to change the working environment
let environment: Environment = Environment.DEVELOPMENT;

let API_ROOT_ACC: string = "https://hi02549:8080/campus_acceptance";
let API_ENDPOINT_ACC: string = "https://hi02549:8080/campus_acceptance/api/";

let API_ROOT_DEV: string = "https://hi02549:8080/campus";
let API_ENDPOINT_DEV: string = "https://hi02549:8080/campus/api/";

let API_ROOT_LOCAL: string = "http://localhost:8080/campus";
let API_ENDPOINT_LOCAL: string = "http://localhost:8080/campus/api/";

export function getApiRoot() {
    switch(environment) {
        case Environment.ACCEPTANCE:
            return API_ROOT_ACC;
        case Environment.DEVELOPMENT:
            return API_ROOT_DEV;
        case Environment.LOCAL:
            return API_ROOT_LOCAL;
        default:
            return null;
    }
}

export function getApiEndpoint() {
    switch(environment) {
        case Environment.ACCEPTANCE:
            return API_ENDPOINT_ACC;
        case Environment.DEVELOPMENT:
            return API_ENDPOINT_DEV;
        case Environment.LOCAL:
            return API_ENDPOINT_LOCAL;
        default:
            return null;
    }
}

System.import 的工作方式与我想象的不同吗？或者我做错了什么？ 我已经尝试将文件粘贴到所有可能的位置。

Answer 1

我想你应该明白 ng-serve 运行一个开发构建服务器，内置文件观察器，所以它会在文件更改时更新构建。

但是，当您在生产环境中运行应用程序或在任何网络服务器上部署应用程序时，它不会自动再次构建 bundle 。您通常必须使用 JSON 文件进行配置，并且作为引导过程的一部分，对该 JSON 进行 Ajax 调用并使用配置。