Merge pull request #114 from luca-peruzzo/master

Update to last i18next version and Angular v-17

.github/workflows/static.yml

@@ -29,7 +29,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.13.x]
+        node-version: [18.13.x]
     steps:
       - name: Checkout
         uses: actions/checkout@v3

.gitignore

@@ -39,3 +39,5 @@ testem.log
 Thumbs.db
 
 .angular
+
+.nx/cache

.prettierignore

@@ -2,3 +2,5 @@
 
 /dist
 /coverage
+
+/.nx/cache

apps/angular-i18next-demo-e2e/project.json

@@ -17,7 +17,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/angular-i18next-demo-e2e/**/*.{js,ts}"]

apps/angular-i18next-demo/project.json

@@ -60,22 +60,22 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "angular-i18next-demo:build:production"
+          "buildTarget": "angular-i18next-demo:build:production"
         },
         "development": {
-          "browserTarget": "angular-i18next-demo:build:development"
+          "buildTarget": "angular-i18next-demo:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "angular-i18next-demo:build"
+        "buildTarget": "angular-i18next-demo:build"
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "lintFilePatterns": [
           "apps/angular-i18next-demo/**/*.ts",
@@ -85,7 +85,7 @@
     },
     "test": {
       "executor": "@nx/jest:jest",
-      "outputs": ["coverage/apps/angular-i18next-demo"],
+      "outputs": ["{workspaceRoot}/coverage/apps/angular-i18next-demo"],
       "options": {
         "jestConfig": "apps/angular-i18next-demo/jest.config.ts",
         "passWithNoTests": true
@@ -118,7 +118,7 @@
       "defaultConfiguration": "production"
     },
     "serve-ssr": {
-      "executor": "@nguniversal/builders:ssr-dev-server",
+      "executor": "@angular-devkit/build-angular:ssr-dev-server",
       "configurations": {
         "development": {
           "browserTarget": "angular-i18next-demo:build:development",

apps/angular-i18next-demo/server.ts

@@ -1,30 +1,27 @@
-import 'zone.js/dist/zone-node';
+import 'zone.js/node';
 
 import { APP_BASE_HREF } from '@angular/common';
-import { ngExpressEngine } from '@nguniversal/express-engine';
+import { CommonEngine } from '@angular/ssr';
 import * as express from 'express';
-import { existsSync } from 'fs';
-import { join } from 'path';
-
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { REQUEST, RESPONSE } from './src/express.tokens';
 import i18next from 'i18next';
-import ChainedBackend from 'i18next-chained-backend';
+import ChainedBackend, { ChainedBackendOptions } from 'i18next-chained-backend';
 import HttpApi from 'i18next-http-backend';
-import middleware from 'i18next-http-middleware';
+import * as middleware from 'i18next-http-middleware';
 import resourcesToBackend from "i18next-resources-to-backend";
-
-import { i18nextOptions } from './src/app/i18next.options';
 import { AppServerModule } from './src/main.server';
 
-const PORT = process.env['PORT'] || 4000;
+import { i18nextOptions } from './src/app/i18next.options';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export async function app(): Promise<express.Express> {
   const server = express();
-
   await i18next
     .use(ChainedBackend)
     .use(middleware.LanguageDetector)
-    .init({
+    .init<ChainedBackendOptions>({
       ...i18nextOptions,
       backend: {
         backends: [
@@ -40,51 +37,61 @@ export async function app(): Promise<express.Express> {
         }]
       }
   })
-
   server.use(
     middleware.handle(i18next, {
       // ignoreRoutes: ['/foo'] // or function(req, res, options, i18next) { /* return true to ignore */ }
     })
   )
-
   const distFolder = join(process.cwd(), 'dist/angular-i18next-demo/browser');
+  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
+    ? join(distFolder, 'index.original.html')
+    : join(distFolder, 'index.html');
 
-  const indexHtml = existsSync(join(distFolder, 'index.html')) ? 'index.html' : 'index';
-
-  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
-  server.engine('html', ngExpressEngine({
-    bootstrap: AppServerModule,
-  }));
+  const commonEngine = new CommonEngine();
 
   server.set('view engine', 'html');
   server.set('views', distFolder);
 
   // Example Express Rest API endpoints
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser
-  server.get('*.*', express.static(distFolder, {
-    maxAge: '1y'
-  }));
-
-  // All regular routes use the Universal engine
-  server.get('*', (req, res) => {
-    res.render(indexHtml, { req,
-      providers: [
-        { provide: APP_BASE_HREF, useValue: req.baseUrl }
-      ]
-    });
+  server.get(
+    '*.*',
+    express.static(distFolder, {
+      maxAge: '1y',
+    })
+  );
+
+  // All regular routes use the Angular engine
+  server.get('*', (req, res, next) => {
+    const { protocol, originalUrl, baseUrl, headers } = req;
+
+    commonEngine
+      .render({
+        bootstrap: AppServerModule,
+        documentFilePath: indexHtml,
+        url: `${protocol}://${headers.host}${originalUrl}`,
+        publicPath: distFolder,
+        providers: [
+          { provide: APP_BASE_HREF, useValue: baseUrl },
+          { provide: RESPONSE, useValue: res },
+          { provide: REQUEST, useValue: req },
+        ],
+      })
+      .then((html) => res.send(html))
+      .catch((err) => next(err));
   });
 
   return server;
 }
 
 async function run(): Promise<void> {
-
+  const port = process.env['PORT'] || 4000;
 
   // Start up the Node server
   const server = await app();
-  server.listen(PORT, () => {
-    console.log(`Node Express server listening on http://localhost:${PORT}`);
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
   });
 }
 
@@ -93,10 +100,9 @@ async function run(): Promise<void> {
 // The below code is to ensure that the server is run only when not requiring the bundle.
 declare const __non_webpack_require__: NodeRequire;
 const mainModule = __non_webpack_require__.main;
-const moduleFilename = mainModule && mainModule.filename || '';
+const moduleFilename = (mainModule && mainModule.filename) || '';
 if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
   run();
 }
 
 export * from './src/main.server';
-

apps/angular-i18next-demo/server.ts.bak

@@ -0,0 +1,102 @@
+import 'zone.js/dist/zone-node';
+
+import { APP_BASE_HREF } from '@angular/common';
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import * as express from 'express';
+import { existsSync } from 'fs';
+import { join } from 'path';
+
+import i18next from 'i18next';
+import ChainedBackend from 'i18next-chained-backend';
+import HttpApi from 'i18next-http-backend';
+import middleware from 'i18next-http-middleware';
+import resourcesToBackend from "i18next-resources-to-backend";
+
+import { i18nextOptions } from './src/app/i18next.options';
+import { AppServerModule } from './src/main.server';
+
+const PORT = process.env['PORT'] || 4000;
+
+// The Express app is exported so that it can be used by serverless Functions.
+export async function app(): Promise<express.Express> {
+  const server = express();
+
+  await i18next
+    .use(ChainedBackend)
+    .use(middleware.LanguageDetector)
+    .init({
+      ...i18nextOptions,
+      backend: {
+        backends: [
+          HttpApi,
+          resourcesToBackend((lng, ns, clb) => {
+            import(`./src/locales/${lng}.${ns}.json`)
+                  .then((resources) => clb(null, resources))
+                  .catch((r)=> clb(r,null))
+          })
+        ],
+        backendOptions: [{
+          loadPath: '/locales/{{lng}}.{{ns}}.json'
+        }]
+      }
+  })
+
+  server.use(
+    middleware.handle(i18next, {
+      // ignoreRoutes: ['/foo'] // or function(req, res, options, i18next) { /* return true to ignore */ }
+    })
+  )
+
+  const distFolder = join(process.cwd(), 'dist/angular-i18next-demo/browser');
+
+  const indexHtml = existsSync(join(distFolder, 'index.html')) ? 'index.html' : 'index';
+
+  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
+  server.engine('html', ngExpressEngine({
+    bootstrap: AppServerModule,
+  }));
+
+  server.set('view engine', 'html');
+  server.set('views', distFolder);
+
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
+  }));
+
+  // All regular routes use the Universal engine
+  server.get('*', (req, res) => {
+    res.render(indexHtml, { req,
+      providers: [
+        { provide: APP_BASE_HREF, useValue: req.baseUrl }
+      ]
+    });
+  });
+
+  return server;
+}
+
+async function run(): Promise<void> {
+
+
+  // Start up the Node server
+  const server = await app();
+  server.listen(PORT, () => {
+    console.log(`Node Express server listening on http://localhost:${PORT}`);
+  });
+}
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+const moduleFilename = mainModule && mainModule.filename || '';
+if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
+  run();
+}
+
+export * from './src/main.server';
+

apps/angular-i18next-demo/src/app/app.server.module.ts

@@ -1,30 +1,24 @@
 import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
-import { REQUEST } from '@nguniversal/express-engine/tokens';
+import { REQUEST } from '../express.tokens';
 import { I18NEXT_INSTANCE } from 'angular-i18next';
 import type { Request } from 'express';
 import { I18NextRequest } from 'i18next-http-middleware';
 
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
 
-
 @NgModule({
-  imports: [
-    AppModule,
-    ServerModule,
-  ],
+  imports: [AppModule, ServerModule],
   bootstrap: [AppComponent],
   providers: [
     {
       provide: I18NEXT_INSTANCE,
       useFactory: (req: Request & I18NextRequest) => {
-          return req.i18n;
+        return req.i18n;
       },
-      deps: [
-        REQUEST
-      ]
-    }
-  ]
+      deps: [REQUEST],
+    },
+  ],
 })
 export class AppServerModule {}

apps/angular-i18next-demo/src/app/i18next.options.ts

@@ -1,9 +1,9 @@
 import { defaultInterpolationFormat, I18NextModule } from "angular-i18next";
 
 import * as i18n from 'i18next';
-import { BackendOptions } from "i18next-http-backend";
+import { HttpBackendOptions } from "i18next-http-backend";
 
-export const i18nextOptions: i18n.InitOptions & { backend: BackendOptions} = {
+export const i18nextOptions: i18n.InitOptions & { backend: HttpBackendOptions} = {
   supportedLngs:['en', 'ru'],
   fallbackLng: 'en',
   debug: true, // set debug?

apps/angular-i18next-demo/src/express.tokens.ts

@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+import { Request, Response } from 'express';
+
+export const REQUEST = new InjectionToken<Request>('REQUEST');
+export const RESPONSE = new InjectionToken<Response>('RESPONSE');

libs/angular-i18next/package.json

@@ -49,13 +49,13 @@
     "tslib": "^2.2.0"
   },
   "peerDependencies": {
-    "@angular/common": ">=16.0.0 <17.0.0",
-    "@angular/core": ">=16.0.0 <17.0.0",
-    "@angular/platform-browser": ">=16.0.0 <17.0.0",
-    "i18next": ">=22.0.8 <23.0.0",
+    "@angular/common": ">=17.0.0 < 18.0.0",
+    "@angular/core": ">=17.0.0 < 18.0.0",
+    "@angular/platform-browser": ">=17.0.0 < 18.0.0",
+    "i18next": ">=23.0.0 <24.0.0",
     "rxjs": ">=6.6.0 <8.0.0"
   },
   "devDependencies": {
-    "@angular/platform-browser-dynamic": ">=16.0.0 <17.0.0"
+    "@angular/platform-browser-dynamic": ">=17.0.0 < 18.0.0"
   }
 }