System.import doesn't look for file after build (Angular2)

I am currently using system.import to dynamically load a file at runtime to change environment variables.

This works great when I just use the ng service. I go to the file, change my environment variable here, and after refreshing the page, it changed my API urls.

Now I am trying to use it together with tomcat. I am creating an application and deploying to tomcat. It finds the file and builds fine, but when I change the file later, it doesn't update anymore, like when I did it locally using the ng service.

my code:

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);
    });
}

      

My file is loading:

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;
    }
}

      

Does System.import work differently than I thought? Or what am I doing wrong? I've already tried to insert the file wherever I could.

+3


source to share


1 answer


I think you should understand that ng-serve runs the development build server with a built in file watcher, so it will update the build whenever the file changes.



But, when you run your application in production or deployment on any web server, it won't automatically build the package automatically. Typically you should use a JSON file for configurations and as part of the bootstrap process, make an Ajax call to that JSON and use the configuration.

+2


source







All Articles