Search code examples
sap-commerce-cloudspartacus-storefront

Spartacus 3.1 new installation shows blank page


I have followed below steps to create Spartacus storefront,

  1. ng new spartacus3
  2. cd spartacus3
  3. ng add @spartacus/schematics --baseUrl https://spartacus-demo.eastus.cloudapp.azure.com:8443/ --baseSite=electronics-spa --ssr
  4. yarn install
  5. yarn start

It installs Angular 10.2.4 and Spartacus 3.1.

It compiles without error.

But am getting blank screen when I'm opening same in browser using URL http://localhost:4200/ I verified network tab in browser it have valid response. Here is network tab screenshot - screenshot - 1, screenshot 2

But no one elements are getting added in DOM. Here is elements tab screenshot - elements tab screenshot

But in console I have below info,

spartacus-storefront.js:17341 No component implementation found for the CMS component type 'ProfileTagScriptComponent'.Make sure you implement a component and register it in the mapper .

Console tab screenshot

I followed below link, https://sap.github.io/spartacus-docs/schematics/#adding-spartacus-core-libraries-and-features-to-your-angular-project

Please help me to get working Spartacus app in my local.

Below is my app.module.ts code,

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { translations, translationChunksConfig } from '@spartacus/assets';
import { B2cStorefrontModule } from '@spartacus/storefront';
import { StoreFinderRootModule } from '@spartacus/storefinder/root';
import { provideConfig } from '@spartacus/core';
import { storeFinderTranslations } from '@spartacus/storefinder/assets';
import { storeFinderTranslationChunksConfig } from '@spartacus/storefinder/assets';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    B2cStorefrontModule.withConfig({
      featureModules: {
        storeFinder: {
          module: () => import('@spartacus/storefinder').then(
            (m) => m.StoreFinderModule
          ),
        },
      },
      backend: {
        occ: {
          baseUrl: 'https://spartacus-demo.eastus.cloudapp.azure.com:8443',
          prefix: '/occ/v2/'
        }
      },
      context: {
        currency: ['USD'],
        language: ['en'],
      },
      i18n: {
        resources: translations,
        chunks: translationChunksConfig,
        fallbackLang: 'en'
      },
      features: {
        level: '3.0'
      }
    }),
    StoreFinderRootModule
  ],
  providers: [
    provideConfig({
      i18n: {
        resources: storeFinderTranslations,
        chunks: storeFinderTranslationChunksConfig,
      },
    })],
  bootstrap: [AppComponent]
})
export class AppModule { }

Solution

  • Once added below config in app.module, then app works fine,

    {
      provide: ROUTER_CONFIGURATION,
      useValue: {
        scrollPositionRestoration: 'enabled',
      }
    }
    

    This code snip is not required for Spartacus version above/= 3.2 as the app have new structure.