Spartacus：访问 Spartacus.configuration.module.ts 文件内 NgModule 上的 Occ url

Question

我有 Jquery 方面的经验，但 Angular 对我来说很新，斯巴达克斯也是如此。我一直在尝试将我们的斯巴达克斯配置为在多个环境中使用。我能找到的唯一解决方案是在 index.html 上使用元标记，然后根据 janwidmer 和 CarlEricLavoie 提到的 url 获取配置。不过，我确实对这两个解决方案做了一些细微的更改，那就是使用环境。{env}.ts 文件而不是新的后端服务或将配置保留在同一文件的映射中。

我面临的问题是 spartacus.cofniguration.module.ts 文件需要 @NgModule 中的这些值，并且我已经尝试了我能想到的一切，但无法使用 this.config.backend 的值？ NgModule 内的 occ?.baseUrl，我需要在其中给出基本 URL 和基本站点的值。

以下是我正在尝试做的事情。我已经编写了逻辑，该逻辑将根据我在环境中收到的 OCC 基本 url 公开正确的配置对象。现在在这里，构造函数内的控制台日志打印了一个包含我需要的所有属性的正确对象，但随后 @NgModule 之前的 conf 对象打印了 undefined 并且 NgModule 内的值也未定义。

我还尝试创建一个新类并将其导入到此处，这样我也许可以创建一个实例，但也无法这样做，因为它需要变量/方法是静态的，以便我能够在内部访问它Ng 模块。

import { Injectable, NgModule } from '@angular/core'; 
import { FacetChangedEvent, FeaturesConfig, I18nConfig, OccConfig, provideConfig, SiteContextConfig } from "@spartacus/core";
import { environment } from '../../environments/environment';
import { defaultB2bCheckoutConfig, defaultB2bOccConfig } from "@spartacus/setup";
import { defaultCmsContentProviders, layoutConfig, mediaConfig } from "@spartacus/storefront";
import { translations } from 'src/assets/i18n-translations/translations';
import { translationChunksConfig } from 'src/assets/i18n-translations/translation-chunks-config';
import { CdcConfig, CdcRootModule, CDC_FEATURE } from '@spartacus/cdc/root';
import { EnvironmentConfigurationModule } from "../../environments/environment-configuration.module"
import { environment  as envdev} from '../../environments/environment';
import { environment as envstag} from '../../environments/environment.stage';
import { environment as envprod} from '../../environments/environment.prod';

let conf : any;
console.log("before ng");
console.log(conf);

@NgModule({
  declarations: [],
  imports: [
  ],
  providers: [provideConfig(layoutConfig), provideConfig(mediaConfig), ...defaultCmsContentProviders, provideConfig(<OccConfig><unknown>{
    
      backend: {
        occ: {
          baseUrl: environment.baseUrl,
        }
      },
    }), provideConfig(<SiteContextConfig>{
    context: {
      urlParameters: ['baseSite', 'language', 'currency'],
      baseSite: [environment?.baseSite],
      currency: ['USD', 'GBP',]
    },
  }),
  provideConfig(<I18nConfig>{
    i18n: {
      backend:{
        loadPath:'assets/i18n-translations/{{lng}}/{{ns}}.ts',
      },
      resources: translations,
      chunks: translationChunksConfig
      ,fallbackLang: 'en'
    },
  }
  ), provideConfig(<FeaturesConfig>{
    features: {
      level: '4.2'
    }
  }), 
  provideConfig(defaultB2bOccConfig), provideConfig(defaultB2bCheckoutConfig), 
]
})
export class SpartacusConfigurationModule { 
  urlValue : string | undefined; 
  env: any;

  constructor(private config: OccConfig) {
        
    this.urlValue = this.config.backend?.occ?.baseUrl;
    
    console.log("baseurl : " + this.config.backend?.occ?.baseUrl);
    
    if(this.urlValue?.includes('s1'))
    { 
      this.env=envstag;   
    }
    else if(this.urlValue?.includes('p1'))
    {
      this.env=envprod; 
    }
    else{
      this.env=envdev; 
    } 
    conf = this.env;
    console.log("conf");
    console.log(conf);
    }

  getConfig() {
   return conf;
  }
}

除了这些解决方案之外，我们还尝试使用 window.location 和 location.href 来查找基本 url 并基于此进行工作。这在本地效果很好，但是一旦将其部署到服务器，它就会说找不到参考窗口/找不到参考位置。我们尝试在 spartacus-configuration.module.ts 内的 NgModule 之前执行此操作

import { environment as envDev } from "../../environments/environment";
import { environment as envStage } from "../../environments/environment.stage";
import { environment as envProd } from "../../environments/environment.prod";
 
let loc=location.hostname;
let env;
if(loc.includes('s1'))
{ 
  env=envStage;   
}
else if(loc.includes('p1'))
{
  env=envProd; 
}
else{
  env=envDev; 
}  
console.log("before ng===>>>",loc); 

Answer 1

通过环境导入，您的标准构建配置将在部署之前将 environment.ts 变量替换为服务器环境（例如 process.env）设置的变量。因此，您应该只从代码中的 environment.ts 导入，并让服务器处理覆盖临时环境变量。

对于位置和窗口对象，它们无法在构建的服务器端访问，因为 Angular Universal 最初出于 SEO 目的提供了机器人可读的预渲染页面（通常仅是 html）。此实例中不存在位置和窗口对象。在 Angular 中，window 和 location 对象应该导入到您的类中。

使用窗口：https://stackoverflow.com/a/52620181/12566149

使用位置：https://stackoverflow.com/a/43093554/12566149