feat(i18n): add more config to use transloco

C0ZEN · C0ZEN · commit 198a6ea109b4 · 2020-02-23T20:34:14.000+01:00
diff --git a/angular.json b/angular.json
@@ -208,6 +208,42 @@
               "devServerTarget": "dark-heresy:serve:development"
             }
           }
+        },
+        "server": {
+          "builder": "@angular-builders/custom-webpack:server",
+          "options": {
+            "customWebpackConfig": {
+              "path": "./scripts/webpack/custom-webpack-server.config.js",
+              "replaceDuplicatePlugins": false
+            },
+            "outputPath": "dist/server",
+            "main": "src/main.server.ts",
+            "tsConfig": "src/tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/server/environment-server.production.ts"
+                },
+                {
+                  "replace": "src/manifest.json",
+                  "with": "src/manifests/manifest.production.json"
+                },
+                {
+                  "replace": "src/robots.txt",
+                  "with": "src/seo/robots/robots.production.txt"
+                }
+              ],
+              "bundleDependencies": "all",
+              "sourceMap": false,
+              "optimization": {
+                "scripts": false,
+                "styles": true
+              }
+            }
+          }
         }
       }
     }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,14 +3,19 @@
   "version": "0.0.0",
   "scripts": {
     "\n# LOCAL DEV SCRIPTS:": "",
-    "start": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve -c development",
+    "start": "npm run i18n:cache-busting && node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve -c development",
+    "start:ssr": "node dist/server",
     "\n# BUILD SCRIPTS:": "",
-    "build": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build",
-    "build:stats": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod --configuration stats",
-    "build:browser:production": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod --configuration production",
+    "build": "npm run transloco:optimize && npm run i18n:cache-busting && node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build",
+    "build:stats": "npm run transloco:optimize && npm run i18n:cache-busting && node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod --configuration stats",
+    "build:browser:production": "npm run transloco:optimize && npm run i18n:cache-busting && node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod --configuration production",
+    "build:server:production": "ng run dark-heresy:server:production",
+    "build:client-and-server-bundles:production": "concurrently \"npm run build:browser:production\" \"npm run build:server:production\"",
+    "build:ssr:production": "concurrently \"npm run build:client-and-server-bundles:production\" \"npm run compile:server\"",
+    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
     "\n# TEST SCRIPTS:": "",
     "test": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng test dark-heresy",
-    "test:ci": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng test dark-heresy --karmaConfig=./src/karma.conf.ci.js",
+    "test:ci": "npm run i18n:cache-busting && node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng test dark-heresy --karmaConfig=./src/karma.conf.ci.js",
     "e2e": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng e2e",
     "\n# LINT SCRIPTS:": "",
     "lint": "concurrently \"npm run stylelint\" \"npm run tslint\"",
@@ -19,10 +24,13 @@
     "\n# UTILS SCRIPTS:": "",
     "ng": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng",
     "cz": "git add . && git-cz && git push-upstream",
+    "akita": "akita",
     "semver": "npx semantic-release",
     "analyze:stats": "npm run build:stats && webpack-bundle-analyzer dist/browser/stats.json",
     "clean": "rimraf coverage dist",
     "circular-dependencies-check": "npx madge ./src/ --circular --extensions ts,js --image ./dist/dependencies-graph.svg --warning",
+    "transloco:optimize": "transloco-optimize dist/browser/assets/i18n",
+    "i18n:cache-busting": "node ./scripts/node/i18n-cache-busting.js",
     "generate-certificate": "openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout ssl/dark-heresy.key -days 3560 -out ssl/dark-heresy.crt -config ssl/certificate.cnf"
   },
   "config": {
@@ -76,7 +84,6 @@
     "@datorama/akita-cli": "~6.1.0",
     "@datorama/akita-ngdevtools": "~3.0.2",
     "@ngneat/transloco-optimize": "~1.0.1",
-    "@ngneat/transloco-scoped-libs": "~1.2.0",
     "@semantic-release/changelog": "~5.0.0",
     "@semantic-release/git": "~9.0.0",
     "@types/core-js": "~2.5.3",
@@ -90,6 +97,7 @@
     "concurrently": "~5.1.0",
     "cz-customizable": "~6.2.0",
     "fibers": "~4.0.2",
+    "fs-extra": "~8.1.0",
     "glob": "~7.1.6",
     "graphviz": "0.0.9",
     "http-server": "~0.12.1",
diff --git a/scripts/node/i18n-cache-busting.js b/scripts/node/i18n-cache-busting.js
@@ -0,0 +1,23 @@
+const crypto = require('crypto');
+const fs = require('fs-extra');
+const glob = require('glob');
+
+function generateChecksum(str, algorithm, encoding) {
+  return crypto
+    .createHash(algorithm || 'md5')
+    .update(str, 'utf8')
+    .digest(encoding || 'hex');
+}
+
+const result = {};
+
+glob.sync(`src/assets/i18n/**/*.json`).forEach(path => {
+  const [ _, lang ] = path.split('src/assets/i18n/');
+  const content = fs.readFileSync(path, {
+    encoding: 'utf-8'
+  });
+
+  result[ lang.replace('.json', '') ] = generateChecksum(content);
+});
+
+fs.writeFileSync('./src/assets/i18n-cache-busting.json', JSON.stringify(result));
diff --git a/scripts/webpack/custom-webpack-server.config.js b/scripts/webpack/custom-webpack-server.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: []
+};
diff --git a/server.ts b/server.ts
@@ -0,0 +1,53 @@
+import { enableProdMode } from '@angular/core';
+import * as express from 'express';
+import _ from 'lodash';
+import { join } from 'path';
+import 'zone.js/dist/zone-node';
+import * as mainServer from './dist/server/main';
+
+enableProdMode();
+
+const app = express();
+const PORT = 6888;
+const DIST_FOLDER = join(process.cwd(), 'dist');
+const DIST_BROWSER_FOLDER = join(DIST_FOLDER, 'browser');
+
+const { AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap }: any = mainServer;
+
+app.engine('html', ngExpressEngine({
+  bootstrap: AppServerModuleNgFactory,
+  providers: [
+    provideModuleMap(LAZY_MODULE_MAP)
+  ]
+}));
+
+app.set('view engine', 'html');
+app.set('views', DIST_BROWSER_FOLDER);
+
+app.get('*.*', express.static(DIST_BROWSER_FOLDER, {
+  maxAge: '1y'
+}));
+
+app.get('app/*', (req: any, res: any) => {
+  res.type('html');
+
+  res.render('index', {
+    req
+  }, (_err: any, html: any) => {
+    res.send(_.unescape(html));
+  });
+});
+
+app.get('*', (req: any, res: any) => {
+  res.type('html');
+
+  res.render('index', {
+    req
+  }, (_err: any, html: any) => {
+    res.send(_.unescape(html));
+  });
+});
+
+app.listen(PORT, () => {
+  console.log(`Node Express server listening on http://localhost:${PORT}`);
+});
diff --git a/src/app/functions/scripts/create-script.ts b/src/app/functions/scripts/create-script.ts
@@ -0,0 +1,8 @@
+export function createScript(scriptSource: Readonly<string>): HTMLScriptElement {
+  const scriptElement: HTMLScriptElement = document.createElement('script');
+
+  scriptElement.src = scriptSource;
+  scriptElement.type = 'text/javascript';
+
+  return scriptElement;
+}
diff --git a/src/app/functions/scripts/load-script.ts b/src/app/functions/scripts/load-script.ts
@@ -0,0 +1,3 @@
+export function loadScript(script: Readonly<HTMLScriptElement>): void {
+  document.body.appendChild(script);
+}
diff --git a/src/assets/i18n/app/fr.json b/src/assets/i18n/app/fr.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/src/index.html b/src/index.html
@@ -38,13 +38,13 @@
           property="og:title">
     <meta content="L'application pour le jeu de rôle Dark Heresy"
           property="og:description">
-    <meta content="https://customer-portal:4202"
+    <meta content="https://dark-heresy:6666"
           property="og:url">
-    <meta content="http://customer-portal:4202/assets/images/seo/home.jpg"
+    <meta content="/assets/images/seo/home.jpg"
           property="og:image">
-    <meta content="http://customer-portal:4202/assets/images/seo/home.jpg"
+    <meta content="/assets/images/seo/home.jpg"
           property="og:image:url">
-    <meta content="https://customer-portal:4202/assets/images/seo/home.jpg"
+    <meta content="/assets/images/seo/home.jpg"
           property="og:image:secure_url">
     <meta content="1200"
           property="og:image:width">
@@ -68,7 +68,7 @@
           name="twitter:title">
     <meta content="L'application pour le jeu de rôle Dark Heresy"
           name="twitter:description">
-    <meta content="http://customer-portal:4202/assets/images/seo/home.jpg"
+    <meta content="/assets/images/seo/home.jpg"
           name="twitter:image">
     <meta content="Pilotes Dark Heresy"
           name="twitter:image:alt">
@@ -78,7 +78,7 @@
           itemprop="name">
     <meta content="L'application pour le jeu de rôle Dark Heresy"
           itemprop="description">
-    <meta content="http://customer-portal:4202/assets/images/seo/home.jpg"
+    <meta content="/assets/images/seo/home.jpg"
           itemprop="image">
 
     <!-- Robots -->
diff --git a/src/main.ts b/src/main.ts
@@ -5,6 +5,8 @@ import {
 } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { ENVIRONMENT } from '@app/environments/environment';
+import { createScript } from '@app/functions/scripts/create-script';
+import { loadScript } from '@app/functions/scripts/load-script';
 import { AppModule } from '@app/module';
 import {
   akitaConfig,
@@ -20,6 +22,10 @@ import { HMR_BOOTSTRAP } from './hmr';
 if (ENVIRONMENT.isProduction) {
   enableProdMode();
   enableAkitaProdMode();
+} else {
+  const script: HTMLScriptElement = createScript('lazy-styles.js');
+
+  loadScript(script);
 }
 
 const akitaLocalForage: LocalForage = localForage.createInstance({
diff --git a/transloco.config.js b/transloco.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  rootTranslationsPath: 'src/assets/i18n/',
+  langs: [
+    'fr'
+  ],
+  keysManager: {}
+};
diff --git a/tsconfig.json b/tsconfig.json
@@ -52,6 +52,9 @@
       "@app/routing-module": [
         "src/app/app-routing.module.ts"
       ],
+      "@app/functions/*": [
+        "src/app/functions/*"
+      ],
       "@app/environments/*": [
         "src/environments/*"
       ]
diff --git a/webpack.server.config.js b/webpack.server.config.js
@@ -0,0 +1,59 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  mode: 'none',
+  entry: {
+    // This is our Express server for Dynamic universal
+    server: './server.ts'
+  },
+  externals: {
+    './dist/server/main': 'require("./server/main")'
+  },
+  target: 'node',
+  resolve: {
+    extensions: [
+      '.ts',
+      '.js'
+    ]
+  },
+  optimization: {
+    minimize: false
+  },
+  output: {
+    // Puts the output at the root of the dist folder
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js'
+  },
+  module: {
+    noParse: /polyfills-.*\.js/,
+    rules: [
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader'
+      },
+      {
+        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
+        // Removing this will cause deprecation warnings to appear.
+        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
+        parser: {
+          system: true
+        }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.ContextReplacementPlugin(
+      // fixes WARNING Critical dependency: the request of a dependency is an expression
+      /(.+)?angular(\\|\/)core(.+)?/,
+      path.join(__dirname, 'src'), // location of your src
+      {} // a map of your routes
+    ),
+    new webpack.ContextReplacementPlugin(
+      // fixes WARNING Critical dependency: the request of a dependency is an expression
+      /(.+)?express(\\|\/)(.+)?/,
+      path.join(__dirname, 'src'),
+      {}
+    )
+  ]
+};

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ plugins: []`
	`3`	`+};`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function loadScript(script: Readonly<HTMLScriptElement>): void {`
	`2`	`+ document.body.appendChild(script);`
	`3`	`+}`