From 1c1584074fd1567bc13cfe874061681b29c5e50c Mon Sep 17 00:00:00 2001 From: Marc Ruiz Date: Wed, 13 Jul 2022 17:19:01 +0200 Subject: [PATCH 1/2] feat: update to angular 14 and fix angular breaking changes --- README.md | 27 ++++++------ angular.json | 3 +- package.json | 28 ++++++------- .../tsconfig.lib.json | 2 +- .../src/lib/localize-router.module.ts | 4 +- .../src/lib/localize-router.parser.ts | 33 ++++++++------- .../src/lib/localize-router.service.ts | 3 +- .../src/lib/localized-router.ts | 12 ++++-- .../ngx-translate-router/tsconfig.lib.json | 2 +- src/app/app.module.ts | 42 ++++++++++--------- src/polyfills.ts | 2 +- tsconfig.json | 2 +- 12 files changed, 84 insertions(+), 76 deletions(-) diff --git a/README.md b/README.md index 3dfbf04..c44e977 100644 --- a/README.md +++ b/README.md @@ -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 index bc3892f..b522796 100644 --- a/angular.json +++ b/angular.json @@ -189,6 +189,5 @@ } } } - }, - "defaultProject": "ngx-translate-router-demo" + } } diff --git a/package.json b/package.json index 23dfefd..ad25b80 100644 --- 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" } -} +} \ No newline at end of file diff --git a/projects/ngx-translate-router-http-loader/tsconfig.lib.json b/projects/ngx-translate-router-http-loader/tsconfig.lib.json index f0da790..048b3fe 100644 --- 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/src/lib/localize-router.module.ts b/projects/ngx-translate-router/src/lib/localize-router.module.ts index 831fac0..96ed7c8 100755 --- 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(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 index d52fc9e..266f8ea 100755 --- 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 && (route)._loadedConfig) { - this._translateRouteTree((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 && (route)._loadedRoutes?.length) { + this._translateRouteTree((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 index 974737e..d043c1b 100755 --- 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 index bd7a298..798ebe7 100644 --- 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>; - if (t instanceof NgModuleFactory) { + let compiled: Observable | Array>; + if (t instanceof NgModuleFactory || Array.isArray(t)) { compiled = of(t); } else { compiled = from(compiler.compileModuleAsync(t)) as Observable>; } 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 index f0da790..048b3fe 100644 --- 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 index 123494b..853d421 100644 --- 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 index 4e29486..ca75641 100644 --- 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 index 47ca84c..2bb4233 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,7 @@ "emitDecoratorMetadata": true, "experimentalDecorators": true, "importHelpers": true, - "target": "es5", + "target": "es2020", "typeRoots": [ "node_modules/@types" ], From 0b8db6d2f9877e97f00a9b5d4dbb73bc7728eb4c Mon Sep 17 00:00:00 2001 From: Marc Ruiz Date: Wed, 13 Jul 2022 17:26:38 +0200 Subject: [PATCH 2/2] chore: update readme and package version --- README.md | 2 +- projects/ngx-translate-router/package.json | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index c44e977..9c6b25c 100644 --- 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`. diff --git a/projects/ngx-translate-router/package.json b/projects/ngx-translate-router/package.json index aeb8a27..62e69be 100644 --- 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" } }