fix(router): routing services should be provided in forRoot only

Author: vakrilov

Diff for: nativescript-angular/router/router.module.ts

@@ -19,32 +19,41 @@ export { NSEmptyOutletComponent } from "./ns-empty-outlet.component";
 
 export type LocationState = LocationState;
 
+const ROUTER_DIRECTIVES = [NSRouterLink, NSRouterLinkActive, PageRouterOutlet, NSEmptyOutletComponent];
+
+const NS_ROUTER_PROVIDERS = [
+    {
+        provide: NSLocationStrategy,
+        useFactory: provideLocationStrategy,
+        deps: [[NSLocationStrategy, new Optional(), new SkipSelf()], FrameService],
+    },
+    { provide: LocationStrategy, useExisting: NSLocationStrategy },
+    NativescriptPlatformLocation,
+    { provide: PlatformLocation, useClass: NativescriptPlatformLocation },
+    RouterExtensions,
+    NSRouteReuseStrategy,
+    { provide: RouteReuseStrategy, useExisting: NSRouteReuseStrategy },
+];
+
 @NgModule({
-    declarations: [NSRouterLink, NSRouterLinkActive, PageRouterOutlet, NSEmptyOutletComponent],
-    providers: [
-        {
-            provide: NSLocationStrategy,
-            useFactory: provideLocationStrategy,
-            deps: [[NSLocationStrategy, new Optional(), new SkipSelf()], FrameService],
-        },
-        { provide: LocationStrategy, useExisting: NSLocationStrategy },
-        NativescriptPlatformLocation,
-        { provide: PlatformLocation, useClass: NativescriptPlatformLocation },
-        RouterExtensions,
-        NSRouteReuseStrategy,
-        { provide: RouteReuseStrategy, useExisting: NSRouteReuseStrategy },
-    ],
+    declarations: ROUTER_DIRECTIVES,
+    entryComponents: [NSEmptyOutletComponent],
     imports: [RouterModule, NativeScriptCommonModule],
-    exports: [RouterModule, NSRouterLink, NSRouterLinkActive, PageRouterOutlet, NSEmptyOutletComponent],
+    exports: [RouterModule, ...ROUTER_DIRECTIVES],
     schemas: [NO_ERRORS_SCHEMA],
 })
 export class NativeScriptRouterModule {
-    static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders {
-        return RouterModule.forRoot(routes, config);
+    static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders<NativeScriptRouterModule> {
+        const ngForRoot: ModuleWithProviders = RouterModule.forRoot(routes, config);
+        return {
+            ngModule: NativeScriptRouterModule,
+            providers: [...ngForRoot.providers, ...NS_ROUTER_PROVIDERS]
+        };
     }
 
-    static forChild(routes: Routes): ModuleWithProviders {
-        return RouterModule.forChild(routes);
+    static forChild(routes: Routes): ModuleWithProviders<NativeScriptRouterModule> {
+        const ngForChild: ModuleWithProviders = RouterModule.forChild(routes);
+        return { ngModule: NativeScriptRouterModule, providers: ngForChild.providers };
     }
 }
 

Diff for: tests/app/tests/router-module-tests.ts

@@ -0,0 +1,77 @@
+// make sure you import mocha-config before @angular/core
+import { Component, ViewChild } from "@angular/core";
+import { nsTestBedAfterEach, nsTestBedBeforeEach, nsTestBedRender } from "nativescript-angular/testing";
+import { NativeScriptRouterModule, RouterExtensions } from "nativescript-angular/router";
+import { NSRouterLink } from "nativescript-angular/router/ns-router-link";
+import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
+import { assert } from "~/tests/test-config";
+import { ActivatedRoute, Router, RouteReuseStrategy } from "@angular/router";
+import { LocationStrategy, PlatformLocation } from "@angular/common";
+import { NSRouteReuseStrategy } from "nativescript-angular/router/ns-route-reuse-strategy";
+
+@Component({
+    template: `<StackLayout><Label nsRouterLink text="COMPONENT"></Label></StackLayout>`
+})
+class RouterTestComponent {
+    @ViewChild(NSRouterLink)
+    nsRouterLink: NSRouterLink;
+}
+
+describe("NativeScriptRouterModule.forRoot", () => {
+    beforeEach(nsTestBedBeforeEach(
+        [RouterTestComponent],
+        [],
+        [NativeScriptRouterModule.forRoot([])],
+        []));
+
+    afterEach(nsTestBedAfterEach());
+
+    it("should provide nativescript routing services", () => {
+        return nsTestBedRender(RouterTestComponent).then((fixture) => {
+            const injector = fixture.componentRef.injector
+            let ls = injector.get(LocationStrategy, null);
+            console.log("----> ls: " + typeof ls);
+            console.dir(ls);
+
+            assert.instanceOf(injector.get(LocationStrategy, null), NSLocationStrategy);
+            assert.instanceOf(injector.get(RouterExtensions, null), RouterExtensions);
+            assert.instanceOf(injector.get(RouteReuseStrategy, null), NSRouteReuseStrategy);
+        });
+    });
+
+    it("should provide nativescript routing directives", () => {
+        return nsTestBedRender(RouterTestComponent).then((fixture) => {
+            const linkDirective = fixture.componentRef.instance.nsRouterLink;
+            assert.instanceOf(linkDirective, NSRouterLink);
+        });
+    });
+});
+
+describe("NativeScriptRouterModule.forChild", () => {
+    beforeEach(nsTestBedBeforeEach(
+        [RouterTestComponent],
+        [
+            { provide: Router, useValue: {} },
+            { provide: RouterExtensions, useValue: {} },
+            { provide: ActivatedRoute, useValue: {} },
+        ],
+        [NativeScriptRouterModule.forChild([])],
+        []));
+    afterEach(nsTestBedAfterEach());
+
+    it("should not provide nativescript routing services", () => {
+        return nsTestBedRender(RouterTestComponent).then((fixture) => {
+            const injector = fixture.componentRef.injector
+            assert.isNull(injector.get(LocationStrategy, null));
+            assert.isNull(injector.get(RouteReuseStrategy, null));
+        });
+    });
+
+    it("should provide nativescript routing directives", () => {
+        return nsTestBedRender(RouterTestComponent).then((fixture) => {
+            const linkDirective = fixture.componentRef.instance.nsRouterLink;
+            assert.instanceOf(linkDirective, NSRouterLink);
+        });
+    });
+});
+

Diff for: tests/package.json

@@ -35,7 +35,7 @@
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
-    "nativescript-angular": "../nativescript-angular",
+    "nativescript-angular": "file:../nativescript-angular/nativescript-angular-7.3.0.tgz",
     "nativescript-unit-test-runner": "^0.3.4",
     "rxjs": "~6.3.3",
     "tns-core-modules": "next",