CODEWITHSUNDEEP
angulartomcattypescriptsystem
RoyalSausage
RoyalSausage

Reputation: 273

System.import does not search for file after build (Angular2)

Currently I'm using system.import to dynamically load a file at runtime to change my environment variables.

This works fine when I'm just using ng serve. I go to the file, change my environment variable there and after refreshing the page it has changed my API urls.

Now I'm trying to use it together with tomcat. I build my app and deploy it 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 with ng serve.

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 that gets loaded:

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 paste the file everywhere I could.

Upvotes: 3

Views: 55

Answers (1)

Rahat Khanna
Rahat Khanna

Reputation: 4672

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

But, when you are running your application in production or deploying on any web server, it won't automatically build the bundle again. You have to generally use a JSON file for configurations and as a part of the bootstrap process make an Ajax call to this JSON and use the configuration.

Upvotes: 2

Related Questions