With angular ssr: Work in dev but don't work in product

[lelelethu]

My version:
Angular: 16.1.3
Transloco: 4.2.2
Nodejs:18.17
@nguniversal/express-engine: 16.1.1

In dev environment, it works (but have one issue, but i will ask late).
But in prod environment, it seems don't work.
I open dev tool of browser, open network tab, find html file and see:
< div> _ngcontent-ng-c355592718 class="guide-content">**[Nothing here] **< / div>

I think if working find, so content translated send with html file in network tab.
I checked logs then see:
ERROR Error: When using the default fallback, a fallback language must be provided in the config!
at DefaultFallbackStrategy2.getNextLangs (C:\inetpub\WebTool\main.js:1:2814670)
at TranslocoService2.handleFailure (C:\inetpub\WebTool\main.js:1:2825636)
at C:\inetpub\WebTool\main.js:1:2819339
at C:\inetpub\WebTool\main.js:1:827504
at OperatorSubscriber2._this._error (C:\inetpub\WebTool\main.js:1:816145)
at Subscriber2.error (C:\inetpub\WebTool\main.js:1:769725)
at C:\inetpub\WebTool\main.js:1:894838
at OperatorSubscriber2._this._error (C:\inetpub\WebTool\main.js:1:816145)
at Subscriber2.error (C:\inetpub\WebTool\main.js:1:769725)
at C:\inetpub\WebTool\main.js:1:875844

Is there a version problem? Or where am I going wrong?

[shaharkazaz]

Can you try upgrading to v5 and share a reproduction?

[lelelethu]

Thanks @shaharkazaz . I will upgrade and feedback in 1 day.

[lelelethu]

@shaharkazaz
I downloaded v5 and nothing changed.
I don't know reason by transloco or @nguniversal/express-engine or my fault?
Do you have experience in implementing angular with ng universal?
I add information about my system:

• I used iis to run prod
• I copy dist/my_name_project/browser and dist/my_name_project/server as the root directory
• I copy main.js file from server folder on the same level as dist folder
• I create web.config and place at root folder.
• Struct folder: https://imgur.com/rett6tp
• I point iis to the root directory
  This is web.config:

`<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <handlers>
     <add name="iisnode" path="main.js" verb="*" modules="iisnode" />
   </handlers>
   <rewrite>
     <rules>
       <rule name="DynamicContent">
         <match url="/*" />
         <action type="Rewrite" url="main.js"/>
       </rule>
       <rule name="StaticContent" stopProcessing="true">
         <match url="([\S]+[.](jpg|jpeg|gif|css|png|js|ts|cscc|less|ico|html|map|svg))" />
         <action type="None" />
       </rule>
     </rules>
   </rewrite>
   <staticContent>
     <clientCache cacheControlMode="UseMaxAge" />
     <remove fileExtension=".svg" />
     <remove fileExtension=".eot" />
     <remove fileExtension=".ttf" />
     <remove fileExtension=".woff" />
     <remove fileExtension=".woff2" />
     <remove fileExtension=".otf" />
     <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
     <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
     <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
     <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
     <mimeMap fileExtension=".woff2" mimeType="application/x-woff" />
     <mimeMap fileExtension=".otf" mimeType="application/otf" />
   </staticContent>
 </system.webServer>
</configuration>`

[lelelethu]

One more thing: I created a fresh project, then run: ng add @ngneat/transloco
An error occurs: Collection "xxx\test\my-angular-app\node_modules\@ngneat\transloco\schematics\src\collection.json" cannot be resolved.

[shaharkazaz]

I fixed it in 5.0.2, was a build issue

[lelelethu]

Thanks @shaharkazaz , build good now.
But when i use: {{ 'title' | transloco }} so error: "No pipe found with name 'transloco'.ngtsc(-998004)"
(https://imgur.com/VSdXnDe)

In your guide: "You should import the TranslocoRootModule once in your root module, and use TranslocoModule in any other module."
Maybe i missing something.

[shaharkazaz]

The docs haven't been updated to standalone yet. You need to import the pipe/module in your component if this is a standalone app.

[lelelethu]

Yes it is my fault, i miss import TranslocoRootModule to app.module.

[shaharkazaz]

Glad you figured it out 🙂

[lelelethu]

I reset and work fine in prod.
But there is a small issue:
My app haves 3 languages: vi, en, jp.
I store user's language in localStorage.
When user choose vi as default languages, i change router to: https://xxx.com/vi/_feature_name.

Whenever accessing the link https://xxx.com/vi/_feature_name, the server always returns the html file with default English.
@shaharkazaz How can I translate content when rendering on the server? Any idea for issue?

https://xxx.com/vi/_feature_name : html content is vietnames language
https://xxx.com/en/_feature_name : html content is english language

[shaharkazaz]

Are you setting the active language based on the route path?