Merge pull request #127 from ruizmarc/master

Update to angular 14 and fix angular breaking changes
gilsdav · Jul 25, 2022 · adaf3fa · adaf3fa
2 parents 1f1f4eb + 0b8db6d
commit adaf3fa
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ Based on and extension of [ngx-translate](https://github.com/ngx-translate/core)
 | 8               | 2.2.3            | 1.1.0       | legacy |
 | 8 - 12          | 3.1.9            | 1.1.2       | active |
 | 13              | 4.0.1            | 2.0.0       | active |
-
+| 14              | 5.0.0            | 2.0.0       | active |
 
 Demo project can be found under sub folder `src`.
 
@@ -521,20 +521,21 @@ Usage example:
 export const appInitializerFactory = (injector: Injector) => {
   return () => {
     const localize = injector.get(LocalizeRouterService);
-    return localize.hooks.initialized
-      .pipe(
-        tap(() => {
-          const router = injector.get(Router);
-          router.events.pipe(
-            filter(url => url instanceof NavigationEnd),
-            first()
-          ).subscribe((route: NavigationEnd) => {
-            console.log(router.url, route.url);
-            router.navigate(['/fr/accueil']);
-          });
-        })
+    return firstValueFrom(
+      localize.hooks.initialized
+        .pipe(
+          tap(() => {
+            const router = injector.get(Router);
+            router.events.pipe(
+              filter(url => url instanceof NavigationEnd),
+              first()
+            ).subscribe((route: NavigationEnd) => {
+              console.log(router.url, route.url);
+              router.navigate(['/fr/accueil']);
+            });
+          })
+        )
       )
-      .toPromise();
   }
 };
 ```

diff --git a/angular.json b/angular.json
@@ -189,6 +189,5 @@
         }
       }
     }
-  },
-  "defaultProject": "ngx-translate-router-demo"
+  }
 }
diff --git a/package.json b/package.json
@@ -14,13 +14,13 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^13.1.0",
-    "@angular/common": "^13.1.0",
-    "@angular/compiler": "^13.1.0",
-    "@angular/core": "^13.1.0",
-    "@angular/platform-browser": "^13.1.0",
-    "@angular/platform-browser-dynamic": "^13.1.0",
-    "@angular/router": "^13.1.0",
+    "@angular/animations": "^14.0.5",
+    "@angular/common": "^14.0.5",
+    "@angular/compiler": "^14.0.5",
+    "@angular/core": "^14.0.5",
+    "@angular/platform-browser": "^14.0.5",
+    "@angular/platform-browser-dynamic": "^14.0.5",
+    "@angular/router": "^14.0.5",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
     "@scullyio/scully": "0.0.102",
@@ -29,11 +29,11 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^13.1.0",
-    "@angular-devkit/build-angular": "^13.1.0",
-    "@angular/cli": "^13.1.0",
-    "@angular/language-service": "^13.1.0",
-    "ng-packagr": "^13.1.0",
+    "@angular/compiler-cli": "^14.0.5",
+    "@angular-devkit/build-angular": "^14.0.5",
+    "@angular/cli": "^14.0.5",
+    "@angular/language-service": "^14.0.5",
+    "ng-packagr": "^14.0.3",
     "@types/node": "^16.11.6",
     "@types/jasmine": "~3.10.2",
     "@types/jasminewd2": "~2.0.8",
@@ -47,6 +47,6 @@
     "karma-jasmine-html-reporter": "^1.7.0",
     "protractor": "~7.0.0",
     "ts-node": "~10.4.0",
-    "typescript": "~4.4.4"
+    "typescript": "~4.7.4"
   }
-}
+}
diff --git a/projects/ngx-translate-router-http-loader/tsconfig.lib.json b/projects/ngx-translate-router-http-loader/tsconfig.lib.json
@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
-    "target": "es2015",
+    "target": "es2020",
     "module": "es2015",
     "moduleResolution": "node",
     "declaration": true,

diff --git a/projects/ngx-translate-router/package.json b/projects/ngx-translate-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gilsdav/ngx-translate-router",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "homepage": "https://github.com/gilsdav/ngx-translate-router#readme",
   "license" : "MIT",
   "author": {
@@ -9,9 +9,9 @@
     "url": "https://github.com/gilsdav"
   },
   "peerDependencies": {
-    "@angular/common": ">=13.0.0",
-    "@angular/core": ">=13.0.0",
-    "@angular/router": ">=13.0.0",
+    "@angular/common": ">=14.0.0",
+    "@angular/core": ">=14.0.0",
+    "@angular/router": ">=14.0.0",
     "@ngx-translate/core": ">=11.0.1"
   }
 }
diff --git a/projects/ngx-translate-router/src/lib/localize-router.module.ts b/projects/ngx-translate-router/src/lib/localize-router.module.ts
@@ -45,10 +45,10 @@ export class ParserInitializer {
       if (settings.initialNavigation) {
         return new Promise<void>(resolve => {
           // @ts-ignore
-          const oldAfterPreactivation = router.hooks.afterPreactivation;
+          const oldAfterPreactivation = router.afterPreactivation;
           let firstInit = true;
           // @ts-ignore
-          router.hooks.afterPreactivation = () => {
+          router.afterPreactivation = () => {
             if (firstInit) {
               resolve();
               firstInit = false;

diff --git a/projects/ngx-translate-router/src/lib/localize-router.parser.ts b/projects/ngx-translate-router/src/lib/localize-router.parser.ts
@@ -1,6 +1,6 @@
 import { Routes, Route, NavigationExtras, Params } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable, Observer } from 'rxjs';
+import { firstValueFrom, Observable, Observer } from 'rxjs';
 import { Location } from '@angular/common';
 import { CacheMechanism, LocalizeRouterSettings } from './localize-router.config';
 import { Inject, Injectable } from '@angular/core';
@@ -83,7 +83,7 @@ export abstract class LocalizeParser {
     let children: Routes = [];
     /** if set prefix is enforced */
     if (this.settings.alwaysSetPrefix) {
-      const baseRoute = { path: '', redirectTo: this.defaultLang, pathMatch: 'full' };
+      const baseRoute: Route = { path: '', redirectTo: this.defaultLang, pathMatch: 'full' };
 
       /** extract potential wildcard route */
       const wildcardIndex = routes.findIndex((route: Route) => route.path === '**');
@@ -123,8 +123,9 @@ export abstract class LocalizeParser {
     }
 
     /** translate routes */
-    const res = this.translateRoutes(selectedLanguage);
-    return res.toPromise();
+    return firstValueFrom(
+      this.translateRoutes(selectedLanguage)
+    );
   }
 
   initChildRoutes(routes: Routes) {
@@ -169,23 +170,25 @@ export abstract class LocalizeParser {
    */
   private _translateRouteTree(routes: Routes): void {
     routes.forEach((route: Route) => {
-      const skipRouteLocalization = (route.data && route.data['skipRouteLocalization']);
+      const skipRouteLocalization = (route.data && route.data['skipRouteLocalization']);
       const localizeRedirection = !skipRouteLocalization || skipRouteLocalization['localizeRedirectTo'];
 
       if (route.redirectTo && localizeRedirection) {
         this._translateProperty(route, 'redirectTo', !route.redirectTo.indexOf('/'));
       }
 
-      if (!skipRouteLocalization) {
-        if (route.path !== null && route.path !== undefined/* && route.path !== '**'*/) {
-          this._translateProperty(route, 'path');
-        }
-        if (route.children) {
-          this._translateRouteTree(route.children);
-        }
-        if (route.loadChildren && (<any>route)._loadedConfig) {
-          this._translateRouteTree((<any>route)._loadedConfig.routes);
-        }
+      if (skipRouteLocalization) {
+        return;
+      }
+
+      if (route.path !== null && route.path !== undefined/* && route.path !== '**'*/) {
+        this._translateProperty(route, 'path');
+      }
+      if (route.children) {
+        this._translateRouteTree(route.children);
+      }
+      if (route.loadChildren && (<any>route)._loadedRoutes?.length) {
+        this._translateRouteTree((<any>route)._loadedRoutes);
       }
     });
   }

diff --git a/projects/ngx-translate-router/src/lib/localize-router.service.ts b/projects/ngx-translate-router/src/lib/localize-router.service.ts
@@ -131,7 +131,6 @@ export class LocalizeRouterService {
    * Traverses through the tree to assemble new translated url
    */
   private traverseRouteSnapshot(snapshot: ActivatedRouteSnapshot): string {
-
     if (snapshot.firstChild && snapshot.routeConfig) {
       return `${this.parseSegmentValue(snapshot)}/${this.traverseRouteSnapshot(snapshot.firstChild)}`;
     } else if (snapshot.firstChild) {
@@ -242,7 +241,7 @@ export class LocalizeRouterService {
             this.applyConfigToRouter(this.parser.routes);
             // Clear global extras
             this.lastExtras = undefined;
-            // Init new navigation with same url to take new congif in consideration
+            // Init new navigation with same url to take new config in consideration
             this.router.navigateByUrl(currentEvent.url, lastExtras);
             // Fire route change event
             this.routerEvents.next(currentLang);

diff --git a/projects/ngx-translate-router/src/lib/localized-router.ts b/projects/ngx-translate-router/src/lib/localized-router.ts
@@ -25,16 +25,20 @@ export class LocalizedRouter extends Router {
     const isBrowser = isPlatformBrowser(platformId);
     // __proto__ is needed for preloaded modules be doesn't work with SSR
     // @ts-ignore
-    const configLoader = isBrowser ? this.configLoader.__proto__ : this.configLoader;
-    configLoader.loadModuleFactory = (loadChildren: LoadChildren) => {
+    const configLoader = (isBrowser ? this.configLoader.__proto__ : this.configLoader);
+
+    configLoader.loadModuleFactoryOrRoutes = (loadChildren: LoadChildren) => {
       return wrapIntoObservable(loadChildren()).pipe(mergeMap((t: any) => {
-        let compiled: Observable<NgModuleFactory<any>>;
-        if (t instanceof NgModuleFactory) {
+        let compiled: Observable<NgModuleFactory<any> | Array<any>>;
+        if (t instanceof NgModuleFactory || Array.isArray(t)) {
           compiled = of(t);
         } else {
           compiled = from(compiler.compileModuleAsync(t)) as Observable<NgModuleFactory<any>>;
         }
         return compiled.pipe(map(factory => {
+          if (Array.isArray(factory)) {
+            return factory;
+          }
           return {
             moduleType: factory.moduleType,
             create: (parentInjector: Injector) => {

diff --git a/projects/ngx-translate-router/tsconfig.lib.json b/projects/ngx-translate-router/tsconfig.lib.json
@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
-    "target": "es2015",
+    "target": "es2020",
     "module": "es2015",
     "moduleResolution": "node",
     "declaration": true,

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -10,6 +10,7 @@ import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
 import { AppRoutingModule } from './app-routing.module';
 import { NotFoundComponent } from './not-found/not-found.component';
+import { firstValueFrom } from 'rxjs';
 import { filter, first, tap } from 'rxjs/operators';
 import { NavigationEnd, Router } from '@angular/router';
 
@@ -20,20 +21,21 @@ export function createTranslateLoader(http: HttpClient) {
 export const appInitializerFactory = (injector: Injector) => {
   return () => {
     const localize = injector.get(LocalizeRouterService);
-    return localize.hooks.initialized
-      .pipe(
-        tap(() => {
-          const router = injector.get(Router);
-          router.events.pipe(
-            filter(url => url instanceof NavigationEnd),
-            first()
-          ).subscribe((route: NavigationEnd) => {
-            console.log(router.url, route.url);
-            router.navigate(['/fr/testounet/bobie']);
-          });
-        })
-      )
-      .toPromise();
+    return firstValueFrom(
+      localize.hooks.initialized
+        .pipe(
+          tap(() => {
+            const router = injector.get(Router);
+            router.events.pipe(
+              filter(url => url instanceof NavigationEnd),
+              first()
+            ).subscribe((route: NavigationEnd) => {
+              console.log(router.url, route.url);
+              router.navigate(['/fr/testounet/bobie']);
+            });
+          })
+        )
+    );
   }
 };
 
@@ -48,11 +50,11 @@ export const appInitializerFactory = (injector: Injector) => {
     HttpClientModule,
     AppRoutingModule,
     TranslateModule.forRoot({
-        loader: {
-            provide: TranslateLoader,
-            useFactory: (createTranslateLoader),
-            deps: [HttpClient]
-        }
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      }
     })
   ],
   // providers: [
@@ -65,4 +67,4 @@ export const appInitializerFactory = (injector: Injector) => {
   // ],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }
diff --git a/src/polyfills.ts b/src/polyfills.ts
@@ -40,7 +40,7 @@
 
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es/reflect';
+// import 'core-js/es/reflect';
 
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents

diff --git a/tsconfig.json b/tsconfig.json
@@ -10,7 +10,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es5",
+    "target": "es2020",
     "typeRoots": [
       "node_modules/@types"
     ],
-Original file line number
+Diff line change
@@ Expand Up / @@ -189,6 +189,5 @@ @@
             }
           }
         }
-      },
-      "defaultProject": "ngx-translate-router-demo"
+      }
     }