Angular 17 外部配置

Question

我正在构建一个独立的 Angular 17 应用程序，并且我想要一个外部配置文件，例如我可以在其中放置 Rest API URL。我在网上搜索并找到了一种使用 APP_INITIALIZER 令牌的方法并尝试了它，但它的行为不符合预期。当我使用“ng build”导出项目并将其放置到 nginx 服务器时，配置已成功加载。问题是，如果我想更改 config.json 中的值，则什么也不会发生。即使我重新启动 nginx 服务器，这些值仍然是第一次启动时的值。这就像初始化仅在应用程序第一次启动时起作用，然后以某种方式缓存或存储。我在网上找到的所有现有资源都对旧版 Angular 版本使用 @NgModule 装饰器，但在 Angular 17 中我认为我不需要一个？ Angular 中还有其他更好的外部配置方法吗？

这是一些代码：

main.ts

bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

app.config.ts

function initConfigService(configService: ConfigService): () => Observable<any> {
  return () => configService.loadConfig();
}

export const provideConfigService = (): Provider => {
  const provider: (Provider) =
  {
    provide: APP_INITIALIZER,
    deps: [ConfigService],
    useFactory: initConfigService,
    multi: true
  };
  return provider;
};

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration(), provideAnimationsAsync(), provideHttpClient(
    withInterceptors([authInterceptor]), withFetch()
  ), provideConfigService()]
};

configService.ts

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
  _apiUrl: string = '';
  _enableFeatureX: boolean = false;

  constructor(private httpClient: HttpClient) {
  }

  loadConfig(): Observable<any> {
    return this.httpClient.get("../assets/config.json").pipe(
      tap((data: any) => {
        this._apiUrl = data.apiUrl;
        this._enableFeatureX = data.enableFeatureX;
      })
    );
  }

  getApiURL(): string {
    return this._apiUrl;
  }

  getEnableFeatureX(): boolean {
    return this._enableFeatureX;
  }
}

Answer 1

只是一个疯狂的猜测，但你可以像这样缓存资产文件！

缓存清除

server

/

browser

或

service worker

可能会缓存文件并导致问题！

  loadConfig(): Observable<any> {
    return this.httpClient.get(`../assets/config.json?v=${Math.random().toString().substring(2)}`).pipe(
      tap((data: any) => {
        this._apiUrl = data.apiUrl;
        this._enableFeatureX = data.enableFeatureX;
      })
    );
  }