refactor(router): take advantage of the new way of configuring modules

modules/@angular/router/index.ts

@@ -14,7 +14,7 @@ export {RouterLinkActive} from './src/directives/router_link_active';
 export {RouterOutlet} from './src/directives/router_outlet';
 export {CanActivate, CanActivateChild, CanDeactivate, CanLoad, Resolve} from './src/interfaces';
 export {Event, NavigationCancel, NavigationEnd, NavigationError, NavigationExtras, NavigationStart, Router, RoutesRecognized} from './src/router';
-export {ROUTER_DIRECTIVES, RouterModule, RouterModuleWithoutProviders} from './src/router_module';
+export {ROUTER_DIRECTIVES, RouterModule} from './src/router_module';
 export {RouterOutletMap} from './src/router_outlet_map';
 export {provideRouter} from './src/router_providers';
 export {ActivatedRoute, ActivatedRouteSnapshot, RouterState, RouterStateSnapshot} from './src/router_state';

modules/@angular/router/src/common_router_providers.ts

@@ -21,7 +21,10 @@ export const ROUTER_CONFIGURATION = new OpaqueToken('ROUTER_CONFIGURATION');
 /**
  * @experimental
  */
-export interface ExtraOptions { enableTracing?: boolean; }
+export interface ExtraOptions {
+  enableTracing?: boolean;
+  useHash?: boolean;
+}
 
 export function setupRouter(
     ref: ApplicationRef, resolver: ComponentResolver, urlSerializer: UrlSerializer,
@@ -126,7 +129,7 @@ export function provideRouter(routes: Routes, config: ExtraOptions): any[] {
  * }
  * ```
  *
- * @experimental
+ * @deprecated
  */
 export function provideRoutes(routes: Routes): any {
   return [
@@ -149,7 +152,7 @@ export function provideRoutes(routes: Routes): any {
  * }
  * ```
  *
- * @experimental
+ * @deprecated
  */
 export function provideRouterConfig(config: ExtraOptions): any {
   return {provide: ROUTER_CONFIGURATION, useValue: config};

modules/@angular/router/src/directives/router_link.ts

@@ -130,9 +130,6 @@ export class RouterLinkWithHref implements OnChanges, OnDestroy {
 
   urlTree: UrlTree;
 
-  /**
-   * @internal
-   */
   constructor(
       private router: Router, private route: ActivatedRoute,
       private locationStrategy: LocationStrategy) {

modules/@angular/router/src/router_module.ts

@@ -6,10 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
+import {HashLocationStrategy, Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
-import {ApplicationRef, ComponentResolver, Injector, NgModule, NgModuleFactoryLoader, OpaqueToken, SystemJsNgModuleLoader} from '@angular/core';
+import {ApplicationRef, ComponentResolver, Injector, ModuleWithProviders, NgModule, NgModuleFactoryLoader, OpaqueToken, SystemJsNgModuleLoader} from '@angular/core';
 
-import {ROUTER_CONFIGURATION, rootRoute, setupRouter} from './common_router_providers';
+import {ExtraOptions, ROUTER_CONFIGURATION, provideRouterConfig, provideRoutes, rootRoute, setupRouter} from './common_router_providers';
+import {Routes} from './config';
 import {RouterLink, RouterLinkWithHref} from './directives/router_link';
 import {RouterLinkActive} from './directives/router_link_active';
 import {RouterOutlet} from './directives/router_outlet';
@@ -26,9 +27,17 @@ import {DefaultUrlSerializer, UrlSerializer} from './url_tree';
  */
 export const ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkWithHref, RouterLinkActive];
 
+const pathLocationStrategy = {
+  provide: LocationStrategy,
+  useClass: PathLocationStrategy
+};
+const hashLocationStrategy = {
+  provide: LocationStrategy,
+  useClass: HashLocationStrategy
+};
+
 export const ROUTER_PROVIDERS: any[] = [
-  Location, {provide: LocationStrategy, useClass: PathLocationStrategy},
+  Location, {provide: UrlSerializer, useClass: DefaultUrlSerializer}, {
-  {provide: UrlSerializer, useClass: DefaultUrlSerializer}, {
     provide: Router,
     useFactory: setupRouter,
     deps: [
@@ -41,41 +50,36 @@ export const ROUTER_PROVIDERS: any[] = [
   {provide: ROUTER_CONFIGURATION, useValue: {enableTracing: false}}
 ];
 
-
 /**
- * Router module to be used for lazy loaded parts.
+ * Router module.
+ *
+ * When registered at the root, it should be used as follows:
+ *
+ * ### Example
+ *
+ * ```
+ * bootstrap(AppCmp, {imports: [RouterModule.forRoot(ROUTES)]});
+ * ```
+ *
+ * For lazy loaded modules it should be used as follows:
  *
  * ### Example
  *
  * ```
  * @NgModule({
- *   imports: [RouterModuleWithoutProviders]
+ *   imports: [RouterModule.forChild(CHILD_ROUTES)]
  * })
- * class TeamsModule {}
+ * class Lazy {}
- * ```
- *
- * @experimental We will soon have a way for the `RouterModule` to be imported with and without a
- * provider,
- * and then this module will be removed.
- */
-@NgModule({declarations: ROUTER_DIRECTIVES, exports: ROUTER_DIRECTIVES})
-export class RouterModuleWithoutProviders {
-}
-
-/**
- * Router module.
- *
- * ### Example
- *
- * ```
- * bootstrap(AppCmp, {modules: [RouterModule]});
  * ```
  *
  * @experimental
  */
-@NgModule({exports: [RouterModuleWithoutProviders], providers: ROUTER_PROVIDERS})
+@NgModule({declarations: ROUTER_DIRECTIVES, exports: ROUTER_DIRECTIVES})
 export class RouterModule {
   constructor(private injector: Injector) {
+    // do the initialization only once
+    if ((<any>injector).parent.get(RouterModule, null)) return;
+
     setTimeout(() => {
       const appRef = injector.get(ApplicationRef);
       if (appRef.componentTypes.length == 0) {
@@ -85,4 +89,18 @@ export class RouterModule {
       }
     }, 0);
   }
+
+  static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders {
+    return {
+      ngModule: RouterModule,
+      providers: [
+        ROUTER_PROVIDERS, provideRoutes(routes), config ? provideRouterConfig(config) : [],
+        config.useHash ? hashLocationStrategy : pathLocationStrategy
+      ]
+    };
+  }
+
+  static forChild(routes: Routes): ModuleWithProviders {
+    return {ngModule: RouterModule, providers: [provideRoutes(routes)]};
+  }
 }

modules/@angular/router/test/router.spec.ts

@@ -15,7 +15,7 @@ import {expect} from '@angular/platform-browser/testing/matchers';
 import {Observable} from 'rxjs/Observable';
 import {of } from 'rxjs/observable/of';
 
-import {ActivatedRoute, ActivatedRouteSnapshot, CanActivate, CanDeactivate, Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Params, ROUTER_DIRECTIVES, Resolve, Router, RouterModuleWithoutProviders, RouterStateSnapshot, RoutesRecognized, provideRoutes} from '../index';
+import {ActivatedRoute, ActivatedRouteSnapshot, CanActivate, CanDeactivate, Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Params, ROUTER_DIRECTIVES, Resolve, Router, RouterModule, RouterStateSnapshot, RoutesRecognized, provideRoutes} from '../index';
 import {RouterTestingModule, SpyNgModuleFactoryLoader} from '../testing';
 
 describe('Integration', () => {
@@ -1202,8 +1202,8 @@ describe('Integration', () => {
 
                  @NgModule({
                    declarations: [LazyLoadedComponent],
-                   providers: [provideRoutes([{path: 'loaded', component: LazyLoadedComponent}])],
+                   imports:
-                   imports: [RouterModuleWithoutProviders],
+                       [RouterModule.forChild([{path: 'loaded', component: LazyLoadedComponent}])],
                    entryComponents: [LazyLoadedComponent]
                  })
                  class LoadedModule {
@@ -1388,12 +1388,11 @@ describe('Integration', () => {
 
                       @NgModule({
                         declarations: [ParentLazyLoadedComponent, ChildLazyLoadedComponent],
-                        providers: [provideRoutes([{
+                        imports: [RouterModule.forChild([{
                           path: 'loaded',
                           component: ParentLazyLoadedComponent,
                           children: [{path: 'child', component: ChildLazyLoadedComponent}]
                         }])],
-                        imports: [RouterModuleWithoutProviders],
                         entryComponents: [ParentLazyLoadedComponent, ChildLazyLoadedComponent]
                       })
                       class LoadedModule {
@@ -1429,15 +1428,12 @@ describe('Integration', () => {
              @NgModule({
                entryComponents: [LazyLoadedComponent],
                declarations: [LazyLoadedComponent],
-               imports: [RouterModuleWithoutProviders],
+               imports: [RouterModule.forChild([{
-               providers: [
-                 LazyLoadedService, provideRoutes([{
                  path: '',
                  canActivate: ['alwaysTrue'],
                  children: [{path: 'loaded', component: LazyLoadedComponent}]
-                 }]),
+               }])],
-                 {provide: 'alwaysTrue', useValue: () => true}
+               providers: [LazyLoadedService, {provide: 'alwaysTrue', useValue: () => true}]
-               ]
              })
              class LoadedModule {
              }

modules/@angular/router/testing/router_testing_module.ts

@@ -12,7 +12,7 @@ import {Compiler, ComponentResolver, Injectable, Injector, NgModule, NgModuleFac
 
 import {Router, RouterOutletMap, Routes, UrlSerializer} from '../index';
 import {ROUTES} from '../src/router_config_loader';
-import {RouterModule} from '../src/router_module';
+import {ROUTER_PROVIDERS, RouterModule} from '../src/router_module';
 
 
 
@@ -64,6 +64,7 @@ function setupTestingRouter(
 @NgModule({
   exports: [RouterModule],
   providers: [
+    ROUTER_PROVIDERS,
     {provide: Location, useClass: SpyLocation},
     {provide: LocationStrategy, useClass: MockLocationStrategy},
     {provide: NgModuleFactoryLoader, useClass: SpyNgModuleFactoryLoader},

modules/playground/src/routing/app/inbox-app.ts

@@ -7,7 +7,7 @@
  */
 
 import {Component, Injectable} from '@angular/core';
-import {ROUTER_DIRECTIVES, ActivatedRoute, Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import * as db from './data';
 import {Location} from '@angular/common';
 import {PromiseWrapper, PromiseCompleter} from '@angular/core/src/facade/async';
@@ -89,7 +89,7 @@ export class DbService {
   }
 }
 
-@Component({selector: 'inbox', templateUrl: 'app/inbox.html', directives: ROUTER_DIRECTIVES})
+@Component({selector: 'inbox', templateUrl: 'app/inbox.html'})
 export class InboxCmp {
   private items: InboxRecord[] = [];
   private ready: boolean = false;
@@ -116,7 +116,7 @@ export class InboxCmp {
 }
 
 
-@Component({selector: 'drafts', templateUrl: 'app/drafts.html', directives: ROUTER_DIRECTIVES})
+@Component({selector: 'drafts', templateUrl: 'app/drafts.html'})
 export class DraftsCmp {
   private items: InboxRecord[] = [];
   private ready: boolean = false;
@@ -138,8 +138,6 @@ export const ROUTER_CONFIG = [
 
 @Component({
   selector: 'inbox-app',
-  viewProviders: [DbService],
+  templateUrl: 'app/inbox-app.html'
-  templateUrl: 'app/inbox-app.html',
-  directives: ROUTER_DIRECTIVES
 })
 export class InboxApp {}

modules/playground/src/routing/app/inbox-detail.ts

@@ -7,12 +7,12 @@
  */
 
 import {Component, NgModule} from '@angular/core';
-import {ROUTER_DIRECTIVES, ActivatedRoute, provideRoutes} from '@angular/router';
+import {ActivatedRoute, RouterModule} from '@angular/router';
 import {PromiseWrapper} from '@angular/core/src/facade/async';
 import {InboxRecord, DbService} from './inbox-app';
 
 @Component(
-    {selector: 'inbox-detail', directives: ROUTER_DIRECTIVES, templateUrl: 'app/inbox-detail.html'})
+    {selector: 'inbox-detail', templateUrl: 'app/inbox-detail.html'})
 export class InboxDetailCmp {
   private record: InboxRecord = new InboxRecord();
   private ready: boolean = false;
@@ -26,6 +26,6 @@ export class InboxDetailCmp {
 
 @NgModule({
   declarations: [InboxDetailCmp],
-  providers: [provideRoutes([{path: ':id', component: InboxDetailCmp}])]
+  imports: [RouterModule.forChild([{path: ':id', component: InboxDetailCmp}])]
 })
 export default class InboxDetailModule {}

modules/playground/src/routing/index.ts

@@ -6,18 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InboxApp, InboxCmp, DraftsCmp, ROUTER_CONFIG} from './app/inbox-app';
+import {InboxApp, InboxCmp, DraftsCmp, DbService, ROUTER_CONFIG} from './app/inbox-app';
 import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HashLocationStrategy, LocationStrategy} from '@angular/common';
-import {provideRoutes, RouterModule} from '@angular/router';
+import {RouterModule} from '@angular/router';
 
 export function main() {
   bootstrap(InboxApp, {
     providers: [
-      provideRoutes(ROUTER_CONFIG),
+      DbService
-      {provide: LocationStrategy, useClass: HashLocationStrategy}
     ],
     declarations: [InboxCmp, DraftsCmp],
-    imports: [RouterModule]
+    imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true})]
   });
 }

modules/playground/src/web_workers/router/index_common.ts

@@ -29,8 +29,8 @@ export const ROUTES = [
 ];
 
 @NgModule({
-  imports: [WorkerAppModule, RouterModule],
+  imports: [WorkerAppModule, RouterModule.forRoot(ROUTES, {useHash: true})],
-  providers: [provideRoutes(ROUTES), WORKER_APP_LOCATION_PROVIDERS, {provide: LocationStrategy, useClass: HashLocationStrategy}],
+  providers: [WORKER_APP_LOCATION_PROVIDERS],
   entryComponents: [App],
   declarations: [App, Start, Contact, About]
 })

tools/public_api_guard/router/index.d.ts

@@ -56,6 +56,7 @@ export declare type Event = NavigationStart | NavigationEnd | NavigationCancel |
 /** @experimental */
 export interface ExtraOptions {
     enableTracing?: boolean;
+    useHash?: boolean;
 }
 
 /** @stable */
@@ -112,10 +113,10 @@ export declare const PRIMARY_OUTLET: string;
 /** @experimental */
 export declare function provideRouter(config: Routes, opts?: ExtraOptions): any[];
 
-/** @experimental */
+/** @deprecated */
 export declare function provideRouterConfig(config: ExtraOptions): any;
 
-/** @experimental */
+/** @deprecated */
 export declare function provideRoutes(routes: Routes): any;
 
 /** @experimental */
@@ -198,6 +199,7 @@ export declare class RouterLinkWithHref implements OnChanges, OnDestroy {
     };
     target: string;
     urlTree: UrlTree;
+    constructor(router: Router, route: ActivatedRoute, locationStrategy: LocationStrategy);
     ngOnChanges(changes: {}): any;
     ngOnDestroy(): any;
     onClick(button: number, ctrlKey: boolean, metaKey: boolean): boolean;
@@ -206,10 +208,8 @@ export declare class RouterLinkWithHref implements OnChanges, OnDestroy {
 /** @experimental */
 export declare class RouterModule {
     constructor(injector: Injector);
-}
+    static forChild(routes: Routes): ModuleWithProviders;
-
+    static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders;
-/** @experimental */
-export declare class RouterModuleWithoutProviders {
 }
 
 /** @stable */