我们可以在不使用环境开发或CLI生产项目的情况下，在角度8中更改根APIURL吗?

问题描述

我们是否需要使用产品和开发来两次构建项目，或者是否有其他方法可以更改指向不同服务器的API的根URL，并且可以在不构建项目的情况下更改根URL.

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.

推荐答案

我不明白为什么很多人将他们的API URL根目录保存在 environment.ts 文件中！如果我想在多个阶段/测试环境中部署生产版本怎么办?如果我想将应用程序分发给客户端，以便他们可以在本地安装该怎么办?

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?

我们确实有一个非常简单的方法来实现这一点，有趣的是，Angular官方文档并在演示.这是摘要.

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.

在资产文件夹中创建一个json文件.选择文件夹 assets 的唯一原因是，默认情况下，Angular配置为从此处提供文件.只要您在 angular.json 中进行相应的更改，就可以将配置文件保存在任何地方.我称之为 app.config.json ，这就是它的内容.

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

我更喜欢创建一个类型化的对象来保留我们的配置数据，尽管它是可选的.如果需要类型化的对象，请创建具有以下内容的 app.config.ts .

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

现在，您需要一个 Injectable 才能将此文件拉入浏览器.创建服务 app-config.service.ts (我建议使用CLi命令 ng g service AppConfig ，它将创建文件 app-config.service.ts (其类名为 AppConfigService ).这是亮点.

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

您基本上可以请求JSON文件，并将设置保留在本地变量 appConfig 中.现在，我们需要一种在应用程序首次加载时调用 loadAppConfig()的方法.

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.

输入 APP_INITIALIZER .Angular 将其定义为

Enter APP_INITIALIZER. Angular defines it as

您可以将其挂接到 providers 部分的 app.module.ts 中，如下所示.

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],

现在确保可以在启动时调用您的服务及其 loadAppConfig()方法，我们可以开始将其注入到我们的任何组件/服务中.只需调用服务实例，我们就可以使用我们的 appConfig 对象.

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.

这篇关于我们可以在不使用环境开发或CLI生产项目的情况下，在角度8中更改根APIURL吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！