window.location.origin 在 Angular 模块中为 null

Question

我有一个应用程序和一个库，两个独立的存储库。我的应用程序使用我的库，我的库包含一个执行 http 请求的服务。

我的应用程序部署到多个环境，我使用 Angular 的 environment.ts 文件来定义外部服务所在的位置。所有应用程序都通过网关提供服务，并位于同一个 window.location.origin 上。

ivy 被禁用，aot 被启用。

我的图书馆公开了一个 forRoot 如下：

  declarations: [
    ToggleDirective
  ],
  providers: [
    ToggleService,
    ToggleServiceConfig
  ],
  exports: [
    ToggleDirective
  ]
})
export class ToggleModule {
  static forRoot(config: ToggleServiceConfig): ModuleWithProviders<ToggleModule> {
    return {
      ngModule: ToggleModule,
      providers: [
        {provide: ToggleServiceConfig, useValue: config }
      ]
    };
  }
}

我的应用程序的 environment.ts 看起来像这样：

export const environment = {
   ...
   togglesUrl: window.location.origin + '/release-toggling',
   ...
};

在我的 App 的 app.module 中，我是这样配置的：

...

const releaseToggleServiceConfig: ToggleServiceConfig = {
    togglesUrl: environment.togglesUrl
};

...

@NgModule({
    declarations: [AppComponent],
    imports: [
        CoreModule,
        SharedModule,
        ...
        ToggleModule.forRoot(releaseToggleServiceConfig)
    ],
    ...
})
export class AppModule {}

如果我对 window.location.origin 进行硬编码（在本地，为 'localhost:4200'），那么它工作正常。显然，这个窗口在这个阶段还不存在。这可能与 aot 有关，但不幸的是，禁用 aot 不是一种选择。

正确传递 window.location.origin 的最佳模式/实践是什么。从技术上讲，在应用调用我的外部服务之前不需要它。

我对您的解决方案或建议感兴趣。这可能很容易解决，很多人以前都遇到过。

Answer 1

所有应用程序均通过网关提供服务并位于同一 window.location.origin 上。

如果两个应用程序都位于同一网关上，并且域也相同，那么也许您可以跳过environment.ts中的window.location.origin：

export const environment = {
   ...
   togglesUrl: '/release-toggling',
   ...
};