Can we change root APIURL in angular 8 without building project with environment development or production from CLI

问题

Do we need to build project two times with prod and development, or is there any other way to change the root URL of API pointed on different server and root url change without building the project.

回答1:

We can create a config.json file in project directory and in app.component.ts read the new configuration setting without rebuilding the project. I got solution here https://github.com/angular/angular-cli/issues/12442

回答2:

I don't understand why a lot of people keep their API URL root in environment.ts files! What if I want to deploy my production build in multiple staging/testing environments? What if I want to distribute the applications to clients so that they can install this locally?

We DO have a very easy way to achieve this and interestingly this is also mentioned in the Angular official docs and in one of the demos. Here is the summary.

Create a json file in your assets folder. The folder assets is chosen only because, by default Angular is configured to serve files from there. You can keep the config file anywhere as long as you make a corresponding change in angular.json as well. I call it app.config.json and this is its content.

{
    "apiBaseUrl": "https://localhost:5001"
}

I prefer to create a typed object to keep our configuration data, although it is optional. if you want a typed object, create app.config.ts with the following contents.

interface AppConfig {
    apiBaseUrl: string;
}

Now you need an Injectable to pull this file into browser. Create a service app-config.service.ts (I recommend using the CLi command ng g service AppConfig and it will create a file app-config.service.ts with a class name AppConfigService). Here is the highlights.

appConfig: AppConfig;
constructor(private http: HttpClient) {}

loadAppConfig() {
    this.http
        .get<AppConfig>("/assets/app.config.json")
        .pipe(
            retry(2), // Retry 3 times, if fails
        )
        .subscribe(
            (data: AppConfig) => {
                 // Success
                this.appConfig = { ...data };
                console.log("client config loadded", this.appConfig);
            },
            (error) => {
                // Failure
                console.log(error);
            }
        );
}

You basically request the JSON file and keep the settings in the local variable appConfig. Now we need a way to call loadAppConfig() when the application loads for the first time.

Enter APP_INITIALIZER. Angular defines it as

A DI token that you can use to provide one or more initialization functions.

You can hook it up in your app.module.ts in the providers section like below.

providers: [
    {
        provide: APP_INITIALIZER,
        multi: true,
        deps: [AppConfigService],
        useFactory: (appConfigService: AppConfigService) => {
            return () => {                    
                return appConfigService.loadAppConfig();
            };
        },
    },
],
bootstrap: [AppComponent],

Now that your service and its loadAppConfig() method are guaranteed to be called at startup, we can start injecting this in to any of our components/services. Just call the service instance and we have our appConfig object available.

来源：https://stackoverflow.com/questions/58972187/can-we-change-root-apiurl-in-angular-8-without-building-project-with-environment

标签

angular

angular8