search

SAP / spartacus

Spartacus is a lean, Angular-based JavaScript storefront for SAP Commerce Cloud that communicates exclusively through the Commerce REST API.
Apache License 2.0
744 stars 389 forks source link

Spartacus not loading translations from local JSON files when using SSR #6307

Closed arminh closed 4 years ago

arminh commented 4 years ago

Environment Details

Steps to Reproduce

  1. Create a new Angular application
  2. Install Spartacus from the libraries using the schematic and the --ssr flag
  3. Add config for loading translations from local files to the app.module 
    i18n: {
backend: {
loadPath: 'assets/translations/{{lng}}/{{ns}}.json',
},
chunks: translationChunksConfig,
fallbackLang: 'en'
},
  4. Build an run the SSR application using yarn build:ssr and yarn serve:ssr
  5. Deactivate Javascript in the browser to see what is rendered on the server
  6. Access a server-side rendered page(e.g.: Product Detail Page)

Observed Results

The translations are not loaded by the Node application: image

Expected Results

Translations should be loaded from JSON files also on initial server-side rendered page.

tobi-or-not-tobi commented 4 years ago

according to the feedback on stackoverflow, this still occurs on the 1.4 final.

Platonn commented 4 years ago

The cause of problem

The problem is caused by the Angular Universal which doesn't allow for relative URLs in SSR (in HttpClient). See angular's issues:

Temporary workaround

Pass to the loadPath the an absolute path containing the host and the path.

Proposed solution

Only in SSR: identify the server request's host. Then prepend this host to the relative path of loadPath. We should ensure that it's working also when having a reverse proxy (on a different host).

Platonn commented 4 years ago

QA steps:

The same as here: https://github.com/SAP/cloud-commerce-spartacus-storefront/issues/6030#issuecomment-573036540 Please make sure to disable Javascript in your browser to see only the result of the SSR.

Expected: translations are displayed on http://localhost:4200/electronics-spa/en/USD/product/300938/Photosmart%20E317%20Digital%20Camera (i.e. Add to cart button)

image