我们可以在不通过 CLI 环境开发或生产构建项目的情况下更改 Angular 8 中的根 APIURL吗

Question

我们是否需要使用 prod 和development 构建两次项目，或者是否有其他方法可以更改指向不同服务器的 API 的根 URL，并且无需构建项目即可更改根 URL。

Answer 1

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

我们确实有一种非常简单的方法来实现这一点，有趣的是，Angular 官方文档和一个演示中也提到了这一点。这是摘要。

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

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

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

interface AppConfig {
    apiBaseUrl: string;
}

现在您需要将此Injectable文件拉入浏览器。创建一个服务app-config.service.ts（我建议使用 CLi 命令ng g service AppConfig，它将创建一个app-config.service.ts带有类名的文件AppConfigService）。这是亮点。

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()现在我们需要一种在应用程序第一次加载时调用的方法。

进入APP_INITIALIZER。Angular将其定义为

一种 DI 令牌，可用于提供一个或多个初始化函数。

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

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

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