Spartacus:访问Spartacus.configuration.module.ts文件中NgModule上的Oc

Question

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

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

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

我还尝试创建一个新的类并将其导入到这里，这样我就可以创建一个实例，但也不能这样做，因为它需要变量/方法是静态的，这样我才能在NgModule中访问它。

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并以此为基础进行工作。这在本地上非常有效，但一旦您将其部署到服务器，就会显示未找到引用窗口/未找到引用位置。我们试图在NgModule之前，在spartacus-configuration.module.ts 内部做到这一点

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

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

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

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

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