This repo demonstrates the use of Angular Universal Server-side Rendering applied to a multilanguage and multisite application Starting from a simple application codebase it automatically generates two parallel sites with differents assets and contens and translated version of them using i18n and xliffmerge. The express server is configured to serve each site in a different port (4000 and 4001)
A minimal Angular starter for Universal JavaScript using the Angular CLI If you're looking for the Angular Universal repo go to angular/universal
This demo is built following the Angular CLI Wiki guide
We're utilizing packages from the Angular Universal @nguniversal repo, such as ng-module-map-ngfactory-loader to enable Lazy Loading.
This repo demonstrates the use of Server-side Rendering.
Server-side Rendering (SSR)
- Happens at runtime
- Uses
ngExpressEngineto render your application on the fly at the requested url.
npm installoryarn
- run
npm run start:site1which will startng servefor site 1 configuration - run
npm run start:site2which will startng servefor site 2 configuration
npm run build:ssr && npm run serve:ssr - Compiles your application and spins up a Node Express to serve your Universal application:
- the site 1 wil be served on
http://localhost:4000 - the site 2 wil be served on
http://localhost:4001
npm run extract-i18n - extract all the i18n ready to translate strings and put its into to messages.xlf files located in src/locale
After a succesfull production build language specific static versions of the application will be placed in dist/site1/en dist/site1/it ecc..
The site 1 translated application will be served on : http://localhost:4000/en http://localhost:4000/it http://localhost:4000/fr
The site 2 translated application will be served on : http://localhost:4001/en http://localhost:4001/it http://localhost:4001/fr
Note: To deploy your static site to a static hosting platform you will have to deploy the dist/site1 or dist/site2 folder, rather than the usual dist
