feat(router): add RouteConfigLoadStart and RouteConfigLoadEnd events

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

@@ -15,7 +15,6 @@ import {RouterStateSnapshot} from './router_state';
  * @stable
  */
 export class NavigationStart {
-  // TODO: vsavkin: make internal
   constructor(
       /** @docsNotRequired */
       public id: number,
@@ -32,7 +31,6 @@ export class NavigationStart {
  * @stable
  */
 export class NavigationEnd {
-  // TODO: vsavkin: make internal
   constructor(
       /** @docsNotRequired */
       public id: number,
@@ -53,7 +51,6 @@ export class NavigationEnd {
  * @stable
  */
 export class NavigationCancel {
-  // TODO: vsavkin: make internal
   constructor(
       /** @docsNotRequired */
       public id: number,
@@ -72,7 +69,6 @@ export class NavigationCancel {
  * @stable
  */
 export class NavigationError {
-  // TODO: vsavkin: make internal
   constructor(
       /** @docsNotRequired */
       public id: number,
@@ -93,7 +89,6 @@ export class NavigationError {
  * @stable
  */
 export class RoutesRecognized {
-  // TODO: vsavkin: make internal
   constructor(
       /** @docsNotRequired */
       public id: number,
@@ -111,23 +106,40 @@ export class RoutesRecognized {
 }
 
 /**
- * @whatItDoes Represents an event triggered when route is lazy loaded.
+ * @whatItDoes Represents an event triggered before lazy loading a route config.
  *
  * @experimental
  */
-export class RouteConfigLoaded {
+export class RouteConfigLoadStart {
   constructor(public route: Route) {}
 
-  toString(): string { return `RouteConfigLoaded(path: ${this.route.path})`; }
+  toString(): string { return `RouteConfigLoadStart(path: ${this.route.path})`; }
+}
+
+/**
+ * @whatItDoes Represents an event triggered when a route has been lazy loaded.
+ *
+ * @experimental
+ */
+export class RouteConfigLoadEnd {
+  constructor(public route: Route) {}
+
+  toString(): string { return `RouteConfigLoadEnd(path: ${this.route.path})`; }
 }
 
 /**
  * @whatItDoes Represents a router event.
  *
- * Please see {@link NavigationStart}, {@link NavigationEnd}, {@link NavigationCancel}, {@link
-  * NavigationError}, {@link RoutesRecognized}, {@link RouteConfigLoaded} for more information.
+ * One of:
+ * - {@link NavigationStart},
+ * - {@link NavigationEnd},
+ * - {@link NavigationCancel},
+ * - {@link NavigationError},
+ * - {@link RoutesRecognized},
+ * - {@link RouteConfigLoadStart},
+ * - {@link RouteConfigLoadEnd}
  *
  * @stable
  */
 export type Event = NavigationStart | NavigationEnd | NavigationCancel | NavigationError |
-    RoutesRecognized | RouteConfigLoaded;
+    RoutesRecognized | RouteConfigLoadStart | RouteConfigLoadEnd;

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

@@ -11,7 +11,7 @@ export {Data, LoadChildren, LoadChildrenCallback, ResolveData, Route, Routes} fr
 export {RouterLink, RouterLinkWithHref} from './directives/router_link';
 export {RouterLinkActive} from './directives/router_link_active';
 export {RouterOutlet} from './directives/router_outlet';
-export {Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, RouteConfigLoaded, RoutesRecognized} from './events';
+export {Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, RouteConfigLoadEnd, RouteConfigLoadStart, RoutesRecognized} from './events';
 export {CanActivate, CanActivateChild, CanDeactivate, CanLoad, Resolve} from './interfaces';
 export {DetachedRouteHandle, RouteReuseStrategy} from './route_reuse_strategy';
 export {ROUTES} from './router_config_loader';

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

@@ -26,7 +26,7 @@ import {QueryParamsHandling, ResolveData, Route, Routes, validateConfig} from '.
 import {createRouterState} from './create_router_state';
 import {createUrlTree} from './create_url_tree';
 import {RouterOutlet} from './directives/router_outlet';
-import {Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, RouteConfigLoaded, RoutesRecognized} from './events';
+import {Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, RouteConfigLoadEnd, RouteConfigLoadStart, RoutesRecognized} from './events';
 import {recognize} from './recognize';
 import {DetachedRouteHandle, DetachedRouteHandleInternal, RouteReuseStrategy} from './route_reuse_strategy';
 import {LoadedRouterConfig, RouterConfigLoader} from './router_config_loader';
@@ -208,8 +208,7 @@ export class Router {
   private rawUrlTree: UrlTree;
 
   private navigations = new BehaviorSubject<NavigationParams>(null);
-  /** @internal */
-  routerEvents = new Subject<Event>();
+  private routerEvents = new Subject<Event>();
 
   private currentRouterState: RouterState;
   private locationSubscription: Subscription;
@@ -243,11 +242,14 @@ export class Router {
       private rootComponentType: Type<any>, private urlSerializer: UrlSerializer,
       private outletMap: RouterOutletMap, private location: Location, private injector: Injector,
       loader: NgModuleFactoryLoader, compiler: Compiler, public config: Routes) {
+    const onLoadStart = (r: Route) => this.triggerEvent(new RouteConfigLoadStart(r));
+    const onLoadEnd = (r: Route) => this.triggerEvent(new RouteConfigLoadEnd(r));
+
     this.resetConfig(config);
     this.currentUrlTree = createEmptyUrlTree();
     this.rawUrlTree = this.currentUrlTree;
-    this.configLoader = new RouterConfigLoader(
-        loader, compiler, (r: Route) => this.routerEvents.next(new RouteConfigLoaded(r)));
+
+    this.configLoader = new RouterConfigLoader(loader, compiler, onLoadStart, onLoadEnd);
     this.currentRouterState = createEmptyState(this.currentUrlTree, this.rootComponentType);
     this.processNavigations();
   }
@@ -297,6 +299,9 @@ export class Router {
   /** An observable of router events */
   get events(): Observable<Event> { return this.routerEvents; }
 
+  /** @internal */
+  triggerEvent(e: Event) { this.routerEvents.next(e); }
+
   /**
    * Resets the configuration used for navigation and generating links.
    *

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

@@ -30,14 +30,24 @@ export class LoadedRouterConfig {
 export class RouterConfigLoader {
   constructor(
       private loader: NgModuleFactoryLoader, private compiler: Compiler,
-      private onLoadListener: (r: Route) => void) {}
+      private onLoadStartListener?: (r: Route) => void,
+      private onLoadEndListener?: (r: Route) => void) {}
 
   load(parentInjector: Injector, route: Route): Observable<LoadedRouterConfig> {
+    if (this.onLoadStartListener) {
+      this.onLoadStartListener(route);
+    }
+
     const moduleFactory$ = this.loadModuleFactory(route.loadChildren);
+
     return map.call(moduleFactory$, (factory: NgModuleFactory<any>) => {
+      if (this.onLoadEndListener) {
+        this.onLoadEndListener(route);
+      }
+
       const module = factory.create(parentInjector);
       const injectorFactory = (parent: Injector) => factory.create(parent).injector;
-      this.onLoadListener(route);
+
       return new LoadedRouterConfig(
           flatten(module.injector.get(ROUTES)), module.injector, module.componentFactoryResolver,
           injectorFactory);

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

@@ -17,7 +17,7 @@ import {filter} from 'rxjs/operator/filter';
 import {mergeAll} from 'rxjs/operator/mergeAll';
 import {mergeMap} from 'rxjs/operator/mergeMap';
 import {Route, Routes} from './config';
-import {NavigationEnd, RouteConfigLoaded} from './events';
+import {NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart} from './events';
 import {Router} from './router';
 import {RouterConfigLoader} from './router_config_loader';
 
@@ -80,8 +80,10 @@ export class RouterPreloader {
   constructor(
       private router: Router, moduleLoader: NgModuleFactoryLoader, compiler: Compiler,
       private injector: Injector, private preloadingStrategy: PreloadingStrategy) {
-    this.loader = new RouterConfigLoader(
-        moduleLoader, compiler, (r: Route) => router.routerEvents.next(new RouteConfigLoaded(r)));
+    const onStartLoad = (r: Route) => router.triggerEvent(new RouteConfigLoadStart(r));
+    const onEndLoad = (r: Route) => router.triggerEvent(new RouteConfigLoadEnd(r));
+
+    this.loader = new RouterConfigLoader(moduleLoader, compiler, onStartLoad, onEndLoad);
   };
 
   setUpPreloading(): void {