SSR with i18n with Angular 9 not working

[joshribb]

🐞 Bug report

What modules are related to this issue?

• aspnetcore-engine
• builders
• common
• express-engine
• hapi-engine
• module-map-ngfactory-loader

Is this a regression?

No, localize is new to Angular 9.

Description

The distFolder is hardcoded in ./server.ts. When the browser server assets are built with localize: true, the assets are placed in a subfolder with the locale name (eg: dist/{appName}/browser/{locale}/ and dist/{appName}/server/{locale}). Now the server can no longer find the correct directory for the browser assets and fails to render.

Is there any way server.ts can know location of the browser assets without hardcoding the path?

Thanks.

🔬 Minimal Reproduction

ng new ng-sample
ng add @angular/localize@next
ng add @nguniversal/express-engine@next

add localize: true to the options of the build and server architect

ng build --prod
ng run ng-sample:server:production
node dist/ng-sample/server/en-US/main.js

browser to http://localhost:4000

🔥 Exception or Error

Error: Failed to lookup view "index" in views directory "/code/ng-sample/dist/ng-sample/browser"
    at Function.render (/code/ng-sample/dist/ng-sample/server/en-US/main.js:1:1122933)
    at ServerResponse.render (/code/ng-sample/dist/ng-sample/server/en-US/main.js:1:1398756)
    at server.get (/code/ng-sample/dist/ng-sample/server/en-US/main.js:1:2259271)
    at Layer.handle [as handle_request] (/code/ng-sample/dist/ng-sample/server/en-US/main.js:1:1144375)
    at next (/code/ng-sample/dist/ng-sample/server/en-US/main.js:1:1131913)
    at Route.dispatch (/code/ng-sample/dist/ng-sample/server/en-US/main.js:1:1131942)
    at Layer.handle [as handle_request] (/code/ng-sample/dist/ng-sample/server/en-US/main.js:1:1144375)
    at /code/ng-sample/dist/ng-sample/server/en-US/main.js:1:2473361
    at param (/code/ng-sample/dist/ng-sample/server/en-US/main.js:1:2474870)
    at param (/code/ng-sample/dist/ng-sample/server/en-US/main.js:1:2475277)

🌍 Your Environment

Angular CLI: 9.0.0-rc.9
Node: 10.16.0
OS: darwin x64

Angular: 9.0.0-rc.9
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.9
@angular-devkit/build-angular     0.900.0-rc.9
@angular-devkit/build-optimizer   0.900.0-rc.9
@angular-devkit/build-webpack     0.900.0-rc.9
@angular-devkit/core              9.0.0-rc.9
@angular-devkit/schematics        9.0.0-rc.9
@ngtools/webpack                  9.0.0-rc.9
@nguniversal/builders             9.0.0-rc.0
@nguniversal/common               9.0.0-rc.0
@nguniversal/express-engine       9.0.0-rc.0
@schematics/angular               9.0.0-rc.9
@schematics/update                0.900.0-rc.9
rxjs                              6.5.4
typescript                        3.6.4
webpack                           4.41.2

[keserwan]

I updated my answer on angular/universal#1497

[keserwan]

I made it work with 2 node apps working on the server.
If anybody can come up with 1 node app serving all locales that would be perfect as we were doing it with webpack.server.config previously.

[MarcusRiemer]

I am in the same boat: Previously I could import multiple bundles and load them dynamically based on the URL that was requested. Now I need to run one server for each language, this is quite tedious.

[ymlsam]

Same here. I adopted same setup for my production site as mentioned by @keserwan in angular/universal#1497, which is now broken.

Besides, look like this block of code is wrong. "req.baseUrl" causes app routing on server side to fail:

server.get('*', (req, res) => {
	res.render(indexHtml, {req, providers: [{provide: APP_BASE_HREF, useValue: req.baseUrl}]});
\});

I changed it as follows, and the routing works again:

const baseHref = '/en/';
server.get(baseHref + '*', (req, res) => {
	res.render(indexHtml, {req, providers: [{provide: APP_BASE_HREF, useValue: baseHref}]});
});

[squelix]

Any update about this ?

[ftanrisevdi]

Hi,
Is there any progress about this issue?

[piotrbrzuska]

I add args to my server.ts :
server.ts:

var args = process.argv.splice(process.execArgv.length + 2);
var local = args[0];
const distFolder = join(__dirname, '../../browser', local);

and run it with:

    "serve:ssr:pl": "node dist/app/server/pl/main.js pl",

but I have a problem with build configuration in angular.json. What is a proper way to build ssr with many configurations at once - production and some locale
?