Fix: Preserve query parameters (#62)

Author: meeroslav

README.md

@@ -105,7 +105,7 @@ Apart from providing routes which are mandatory, and parser loader you can provi
    LocalizeRouterModule.forRoot(routes, {
        parser: {
            provide: LocalizeParser,
-           useFactory: (translate, location, settigns) =>
+           useFactory: (translate, location, settings) =>
                new ManualParserLoader(translate, location, settings, ['en','de',...], 'YOUR_PREFIX'),
            deps: [TranslateService, Location, LocalizeRouterSettings]
        }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "localize-router",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-rc.0",
   "description": "An implementation of routes localization for Angular 2",
   "scripts": {
     "test": "karma start",

src/localize-router.parser.ts

@@ -213,10 +213,17 @@ export abstract class LocalizeParser {
    * @returns {string}
    */
   translateRoute(path: string): string {
-    let pathSegments = path.split('/');
+    let queryParts = path.split('?');
+    if (queryParts.length > 2) {
+      throw 'There should be only one query parameter block in the URL';
+    }
+    let pathSegments = queryParts[0].split('/');
 
     /** collect observables  */
-    return pathSegments.map((part: string) => part.length ? this.translateText(part) : part).join('/');
+    return pathSegments
+      .map((part: string) => part.length ? this.translateText(part) : part)
+      .join('/') +
+      (queryParts.length > 1 ? `?${queryParts[1]}` : '');
   }
 
   /**

src/localize-router.service.ts

@@ -86,7 +86,7 @@ export class LocalizeRouterService {
     let result: any[] = [];
     (path as Array<any>).forEach((segment: any, index: number) => {
       if (typeof segment === 'string') {
-        let res = this.parser.translateRoute(segment);
+        const res = this.parser.translateRoute(segment);
         if (!index && !segment.indexOf('/')) {
           result.push(`/${this.parser.urlPrefix}${res}`);
         } else {

tests/localize-router.parser.spec.ts

@@ -490,4 +490,30 @@ describe('LocalizeParser', () => {
     expect(routes[2]).toEqual({ path: 'about', data: { skipRouteLocalization: true } });
   }));
 
+  it('should translate route', fakeAsync(() => {
+    loader = new ManualParserLoader(translate, location, settings, locales, prefix);
+    spyOn(loader, 'translateRoutes').and.callThrough();
+    localStorage.setItem('LOCALIZE_DEFAULT_LANGUAGE', 'en');
+
+    routes = [{ path: 'home', component: DummyComponent }];
+    loader.load(routes);
+    tick();
+
+    expect(routes[0].children[0].path).toEqual('home_en');
+    expect(loader.translateRoute('home/whatever')).toEqual('home_en/whatever');
+  }));
+  it('should keep query params while translate route', fakeAsync(() => {
+    loader = new ManualParserLoader(translate, location, settings, locales, prefix);
+    spyOn(loader, 'translateRoutes').and.callThrough();
+    localStorage.setItem('LOCALIZE_DEFAULT_LANGUAGE', 'en');
+
+    routes = [{ path: 'home', component: DummyComponent }];
+    loader.load(routes);
+    tick();
+
+    expect(routes[0].children[0].path).toEqual('home_en');
+    expect(loader.translateRoute('home/whatever?test=123')).toEqual('home_en/whatever?test=123');
+    expect(loader.translateRoute('home?test=123')).toEqual('home_en?test=123');
+    expect(() => loader.translateRoute('home?test=123?test=123')).toThrow();
+  }));
 });

tests/localize-router.service.spec.ts

@@ -1,7 +1,4 @@
 import { Injector } from '@angular/core';
-import {
-  BaseRequestOptions, ConnectionBackend, Http, HttpModule, RequestOptions, XHRBackend
-} from '@angular/http';
 import { LocalizeRouterService } from '../src/localize-router.service';
 import { LocalizeParser } from '../src/localize-router.parser';
 import { LocalizeRouterModule } from '../src/localize-router.module';
@@ -11,7 +8,6 @@ import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
 import { TranslateService } from '@ngx-translate/core';
 import { CommonModule, Location } from '@angular/common';
-import { MockBackend, MockConnection } from '@angular/http/testing';
 
 class FakeTranslateService {
   defLang: string;
@@ -25,11 +21,8 @@ class FakeTranslateService {
   };
 
   setDefaultLang = (lang: string) => { this.defLang = lang; };
-
   use = (lang: string) => { this.currentLang = lang; };
-
   get = (input: string) => Observable.of(this.content[input] || input);
-
   getBrowserLang = () => this.browserLang;
 }
 
@@ -60,37 +53,28 @@ describe('LocalizeRouterService', () => {
   let localizeRouterService: LocalizeRouterService;
   let routes: Routes;
 
-  let backend: any;
-  let connection: MockConnection;
-
   beforeEach(() => {
-    routes = [{ path: '', component: DummyComponent }];
+    routes = [
+      { path: 'home', component: DummyComponent },
+      { path: 'home/about', component: DummyComponent }
+    ];
 
     TestBed.configureTestingModule({
-      imports: [HttpModule, CommonModule, LocalizeRouterModule.forRoot(routes)],
+      imports: [CommonModule, LocalizeRouterModule.forRoot(routes)],
       providers: [
         { provide: Router, useClass: FakeRouter },
         { provide: TranslateService, useClass: FakeTranslateService },
         { provide: Location, useClass: FakeLocation },
-        { provide: XHRBackend, useClass: MockBackend },
-        { provide: ConnectionBackend, useClass: MockBackend },
-        { provide: RequestOptions, useClass: BaseRequestOptions },
-        Http
       ]
     });
     injector = getTestBed();
     parser = injector.get(LocalizeParser);
     router = injector.get(Router);
-
-    backend = injector.get(XHRBackend);
-    backend.connections.subscribe((c: MockConnection) => connection = c);
   });
 
   afterEach(() => {
     injector = void 0;
     localizeRouterService = void 0;
-    backend = void 0;
-    connection = void 0;
   });
 
   it('is defined', () => {
@@ -102,9 +86,6 @@ describe('LocalizeRouterService', () => {
 
   it('should initialize routerEvents', () => {
     localizeRouterService = new LocalizeRouterService(parser, router);
-
-    // mockBackendResponse(connection, '{"TEST": "This is a test", "TEST2": "This is another test"}');
-
     expect(localizeRouterService.routerEvents).toBeDefined();
   });