feat(TranslateModule): adding forChild method to use in lazy loaded m…

…odules
ngx-translate · Jan 28, 2017 · ac7b201 · ac7b201
1 parent de2d56c
commit ac7b201
Show file tree

Hide file tree

Showing 6 changed files with 193 additions and 57 deletions.
diff --git a/index.ts b/index.ts
@@ -1,13 +1,11 @@
 import {NgModule, ModuleWithProviders, Provider} from "@angular/core";
-import {TranslateStore} from "./src/translate.store";
 import {TranslateLoader, TranslateFakeLoader} from "./src/translate.loader";
 import {TranslateService} from "./src/translate.service";
 import {MissingTranslationHandler, FakeMissingTranslationHandler} from "./src/missing-translation-handler";
 import {TranslateParser, TranslateDefaultParser} from "./src/translate.parser";
 import {TranslateDirective} from "./src/translate.directive";
 import {TranslatePipe} from "./src/translate.pipe";
 
-export * from "./src/translate.store";
 export * from "./src/translate.loader";
 export * from "./src/translate.service";
 export * from "./src/missing-translation-handler";
@@ -38,9 +36,15 @@ export class TranslateModule {
      * @returns {ModuleWithProviders}
      */
     static forRoot(config: TranslateModuleConfig = {}): ModuleWithProviders {
-        let baseConfig = this.forChild(config);
-        Array.prototype.push.call(baseConfig.providers, TranslateStore);
-        return baseConfig;
+        return {
+            ngModule: TranslateModule,
+            providers: [
+                config.loader || {provide: TranslateLoader, useClass: TranslateFakeLoader},
+                config.parser || {provide: TranslateParser, useClass: TranslateDefaultParser},
+                config.missingTranslationHandler || {provide: MissingTranslationHandler, useClass: FakeMissingTranslationHandler},
+                TranslateService
+            ]
+        };
     }
 
     /**
@@ -49,19 +53,12 @@ export class TranslateModule {
      * @returns {ModuleWithProviders}
      */
     static forChild(config: TranslateModuleConfig = {}): ModuleWithProviders {
-        let optionalProviders: Provider[] = [];
-        if(config.missingTranslationHandler) {
-            Array.prototype.push.call(optionalProviders, config.missingTranslationHandler);
-        }
-
         return {
             ngModule: TranslateModule,
             providers: [
                 config.loader || {provide: TranslateLoader, useClass: TranslateFakeLoader},
                 config.parser || {provide: TranslateParser, useClass: TranslateDefaultParser},
-                config.missingTranslationHandler || {provide: MissingTranslationHandler, useClass: FakeMissingTranslationHandler},
-                ...optionalProviders,
-                TranslateService
+                config.missingTranslationHandler || {provide: MissingTranslationHandler, useClass: FakeMissingTranslationHandler}
             ]
         };
     }

diff --git a/package.json b/package.json
@@ -32,16 +32,17 @@
     "@angular/core": "^2.3.0"
   },
   "devDependencies": {
-    "@angular/common": "2.4.3",
-    "@angular/compiler": "2.4.3",
-    "@angular/compiler-cli": "2.4.3",
-    "@angular/core": "2.4.3",
-    "@angular/platform-browser": "2.4.3",
-    "@angular/platform-browser-dynamic": "2.4.3",
-    "@angular/platform-server": "2.4.3",
-    "@types/hammerjs": "2.0.33",
-    "@types/jasmine": "2.5.38",
-    "@types/node": "6.0.53",
+    "@angular/common": "2.4.5",
+    "@angular/compiler": "2.4.5",
+    "@angular/compiler-cli": "2.4.5",
+    "@angular/core": "2.4.5",
+    "@angular/platform-browser": "2.4.5",
+    "@angular/platform-browser-dynamic": "2.4.5",
+    "@angular/platform-server": "2.4.5",
+    "@angular/router": "3.4.5",
+    "@types/hammerjs": "2.0.34",
+    "@types/jasmine": "2.5.41",
+    "@types/node": "7.0.4",
     "awesome-typescript-loader": "3.0.0-beta.18",
     "clean-webpack-plugin": "0.1.15",
     "codelyzer": "2.0.0-beta.4",

diff --git a/src/translate.store.ts b/src/translate.store.ts
diff --git a/tests/translate.module.spec.ts b/tests/translate.module.spec.ts
@@ -0,0 +1,131 @@
+import {Component, NgModuleFactoryLoader, NgModule, ModuleWithProviders} from "@angular/core";
+import {Location} from '@angular/common';
+import {Router, RouterModule} from "@angular/router";
+import {SpyNgModuleFactoryLoader, RouterTestingModule} from "@angular/router/testing";
+import {ComponentFixture, TestBed, tick, inject, fakeAsync, getTestBed} from "@angular/core/testing";
+import {TranslateModule, TranslateService} from "../index";
+
+@Component({
+    selector: 'root-cmp',
+    template: `
+        <router-outlet></router-outlet>`
+})
+class RootCmp {
+    constructor(public translate: TranslateService) {
+        translate.setTranslation('en', {"TEST": "Root"});
+        translate.use('en');
+    }
+}
+
+@Component({
+    selector: 'lazy',
+    template: 'lazy-loaded-parent [<router-outlet></router-outlet>]'
+})
+class ParentLazyLoadedComponent {
+}
+
+function getLazyLoadedModule(importedModule: ModuleWithProviders) {
+    @Component({selector: 'lazy', template: 'lazy-loaded-child'})
+    class ChildLazyLoadedComponent {
+        constructor(public translate: TranslateService) {
+            translate.setTranslation('en', {"TEST": "Lazy"});
+            translate.use('en');
+            expect(translate.instant('TEST')).toEqual('Lazy');
+        }
+    }
+
+    @NgModule({
+        declarations: [ParentLazyLoadedComponent, ChildLazyLoadedComponent],
+        imports: [
+            RouterModule.forChild([{
+                path: 'loaded',
+                component: ParentLazyLoadedComponent,
+                children: [{path: 'child', component: ChildLazyLoadedComponent}]
+            }]),
+            importedModule
+        ]
+    })
+    class LoadedModule {
+    }
+
+    return LoadedModule;
+}
+
+function advance(fixture: ComponentFixture<any>): void {
+    tick();
+    fixture.detectChanges();
+}
+
+function createRoot(router: Router, type: any): ComponentFixture<any> {
+    const f = TestBed.createComponent(type);
+    advance(f);
+    router.initialNavigation();
+    advance(f);
+    return f;
+}
+
+describe("module", () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                RouterTestingModule,
+                TranslateModule.forRoot(),
+            ],
+            declarations: [RootCmp]
+        });
+    });
+
+    it("should work when lazy loaded using forChild", fakeAsync(inject(
+        [Router, Location, NgModuleFactoryLoader],
+        (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+            let LoadedModule = getLazyLoadedModule(TranslateModule.forChild());
+
+            loader.stubbedModules = {expected: LoadedModule};
+
+            const fixture = createRoot(router, RootCmp),
+                injector = getTestBed(),
+                translate = injector.get(TranslateService);
+
+            expect(translate.instant('TEST')).toEqual('Root');
+
+            router.resetConfig([{path: 'lazy', loadChildren: 'expected'}]);
+
+            router.navigateByUrl('/lazy/loaded/child');
+            advance(fixture);
+
+            expect(location.path()).toEqual('/lazy/loaded/child');
+
+            // since the root module imports the TranslateModule with forRoot and the lazy loaded module with forChild
+            // the translate service is shared between both modules
+            // the constructor of the ChildLazyLoadedComponent overwrote the "TEST" key of the root TranslateService
+            expect(translate.instant('TEST')).toEqual('Lazy');
+        }))
+    );
+
+    it("should create 2 instances of the service when lazy loaded using forRoot", fakeAsync(inject(
+        [Router, Location, NgModuleFactoryLoader],
+        (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
+            let LoadedModule = getLazyLoadedModule(TranslateModule.forRoot());
+
+            loader.stubbedModules = {expected: LoadedModule};
+
+            const fixture = createRoot(router, RootCmp),
+                injector = getTestBed(),
+                translate = injector.get(TranslateService);
+
+            expect(translate.instant('TEST')).toEqual('Root');
+
+            router.resetConfig([{path: 'lazy', loadChildren: 'expected'}]);
+
+            router.navigateByUrl('/lazy/loaded/child');
+            advance(fixture);
+
+            expect(location.path()).toEqual('/lazy/loaded/child');
+
+            // since both the root module and the lazy loaded module use forRoot to define the TranslateModule
+            // the translate service is NOT shared, and 2 instances co-exist
+            // the constructor of the ChildLazyLoadedComponent didn't overwrote the "TEST" key of the root TranslateService
+            expect(translate.instant('TEST')).toEqual('Root');
+        }))
+    );
+});
diff --git a/tests/translate.store.spec.ts b/tests/translate.store.spec.ts
diff --git a/yarn.lock b/yarn.lock
@@ -2,40 +2,44 @@
 # yarn lockfile v1
 
 
-"@angular/[email protected].3":
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-2.4.3.tgz#78d96bd2f8a1a105f635cd25e362ba5704b47f56"
+"@angular/[email protected].5":
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-2.4.5.tgz#ada1a22b7ba01d1fdeb300115584478e031e9a4f"
 
-"@angular/[email protected].3":
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-2.4.3.tgz#8339c2f428d29df3ea0eac17f08d296fc87eb160"
+"@angular/[email protected].5":
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-2.4.5.tgz#efabbe10558b233dcdfe985af2bd2e84f1414c97"
   dependencies:
     "@angular/tsc-wrapped" "0.5.1"
     minimist "^1.2.0"
     reflect-metadata "^0.1.2"
 
-"@angular/[email protected].3":
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-2.4.3.tgz#76a41916f90eda66643107740c4a9ae45cb7a6c1"
+"@angular/[email protected].5":
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-2.4.5.tgz#521da325e2e002398e8f9de52cfb03d303729e72"
 
-"@angular/[email protected].3":
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-2.4.3.tgz#a72a13bb9f01659b8388558cd6e3a570a8434b1c"
+"@angular/[email protected].5":
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-2.4.5.tgz#8b05156398afde9636e65527ffb61fc74236af5a"
 
-"@angular/[email protected].3":
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-2.4.3.tgz#d65cc9bc4487e2a86e2c6f6641c711fccfa90c5a"
+"@angular/[email protected].5":
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-2.4.5.tgz#36fa975a8ee2dfe3f60bab561143974e6bdb1eff"
 
-"@angular/[email protected].3":
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-2.4.3.tgz#eba8588d2fffc39d0b85a9180c297d9ca2f1f3a4"
+"@angular/[email protected].5":
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-2.4.5.tgz#fa1bc891b1309bca83845787b9a08db36a787fee"
 
-"@angular/[email protected].3":
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-2.4.3.tgz#207af33919733696976b29bfc03c265a551dd05f"
+"@angular/[email protected].5":
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-2.4.5.tgz#4322d6a3609603edf34101f286d47db8762a08bc"
   dependencies:
     parse5 "^2.2.1"
 
+"@angular/[email protected]":
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/@angular/router/-/router-3.4.5.tgz#5a471a4e49a7eba6a460761129c0684a4b730a1a"
+
 "@angular/[email protected]":
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-0.5.1.tgz#7a69bec999eef41903dddaaccdc862cfcface52c"
@@ -75,17 +79,17 @@
     conventional-changelog "0.0.17"
     github-url-from-git "^1.4.0"
 
-"@types/[email protected].33":
-  version "2.0.33"
-  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.33.tgz#45f57352474181425bb4b65f7313a60426d54bab"
+"@types/[email protected].34":
+  version "2.0.34"
+  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.34.tgz#9cbac4f41cb039436141785e1be50b3ab10a04a9"
 
-"@types/[email protected].38":
-  version "2.5.38"
-  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.38.tgz#a4379124c4921d4e21de54ec74669c9e9b356717"
+"@types/[email protected].41":
+  version "2.5.41"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.41.tgz#d5e86161a0af80d52062b310a33ed65b051a0713"
 
-"@types/node@6.0.53":
-  version "6.0.53"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.53.tgz#8c300ca8ba51f80f98f3525b932ff47c6efd6be1"
+"@types/node@7.0.4":
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-7.0.4.tgz#9aabc135979ded383325749f508894c662948c8b"
 
 abbrev@1, [email protected]:
   version "1.0.9"
@@ -142,6 +146,12 @@ [email protected], amdefine@>=0.0.4:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.0.tgz#fd17474700cb5cc9c2b709f0be9d23ce3c198c33"
 
+[email protected]:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/angular2-router-loader/-/angular2-router-loader-0.3.4.tgz#bb458f233d30d66d58ae2648ad52b8ea1f433dec"
+  dependencies:
+    loader-utils "^0.2.15"
+
 ansi-align@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-1.1.0.tgz#2f0c1658829739add5ebb15e6b0c6e3423f016ba"
@@ -2202,7 +2212,7 @@ loader-runner@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.2.0.tgz#824c1b699c4e7a2b6501b85902d5b862bf45b3fa"
 
-[email protected], [email protected], loader-utils@^0.2.16, loader-utils@^0.2.5, loader-utils@^0.2.7, loader-utils@~0.2.2:
+[email protected], [email protected], loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.5, loader-utils@^0.2.7, loader-utils@~0.2.2:
   version "0.2.16"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
   dependencies: