feat(lazyLoad): Allow loadChildren for non-future states.

Relax future state replacement requirement.
This allows existing states to be manually manually in the child module's config function.

See "should support loadChildren on non-future state" unit test for an example.

Relates to #164

Author: christopherthielen

src/lazyLoad/lazyLoadNgModule.ts

@@ -3,7 +3,7 @@
 import { NgModuleRef, Injector, NgModuleFactory, Type, Compiler, NgModuleFactoryLoader } from "@angular/core";
 import {
   Transition, LazyLoadResult, UIRouter, Resolvable, NATIVE_INJECTOR_TOKEN, isString, unnestR, inArray, StateObject,
-  uniqR
+  uniqR, StateDeclaration
 } from "@uirouter/core";
 import { RootModule, UIROUTER_ROOT_MODULE, UIROUTER_MODULE_TOKEN, StatesModule } from "../uiRouterNgModule";
 import { applyModuleConfig } from "../uiRouterConfig";
@@ -71,15 +71,15 @@ export type NgModuleToLoad = string | ModuleTypeCallback;
  * - Finds the "replacement state" for the target state, and adds the new NgModule Injector to it (as a resolve)
  * - Returns the new states array
  */
-export function loadNgModule(moduleToLoad: NgModuleToLoad): (transition: Transition) => Promise<LazyLoadResult> {
-  return (transition: Transition) => {
+export function loadNgModule(moduleToLoad: NgModuleToLoad): (transition: Transition, stateObject: StateDeclaration) => Promise<LazyLoadResult> {
+  return (transition: Transition, stateObject: StateDeclaration) => {
     const ng2Injector = transition.injector().get(NATIVE_INJECTOR_TOKEN);
 
     const createModule = (factory: NgModuleFactory<any>) =>
         factory.create(ng2Injector);
 
     const applyModule = (moduleRef: NgModuleRef<any>) =>
-        applyNgModule(transition, moduleRef);
+        applyNgModule(transition, moduleRef, ng2Injector, stateObject);
 
     return loadModuleFactory(moduleToLoad, ng2Injector)
         .then(createModule)
@@ -131,13 +131,12 @@ export function loadModuleFactory(moduleToLoad: NgModuleToLoad, ng2Injector: Inj
  *
  * @internalapi
  */
-export function applyNgModule(transition: Transition, ng2Module: NgModuleRef<any>): LazyLoadResult {
+export function applyNgModule(transition: Transition, ng2Module: NgModuleRef<any>, parentInjector: Injector, lazyLoadState: StateDeclaration): LazyLoadResult {
   let injector = ng2Module.injector;
-  let parentInjector = <Injector> ng2Module.injector['parent'] || ng2Module.injector['_parent'];
   let uiRouter: UIRouter = injector.get(UIRouter);
   let registry = uiRouter.stateRegistry;
 
-  let originalName = transition.to().name;
+  let originalName = lazyLoadState.name;
   let originalState = registry.get(originalName);
   // Check if it's a future state (ends with .**)
   let isFuture = /^(.*)\.\*\*$/.exec(originalName);
@@ -159,13 +158,15 @@ export function applyNgModule(transition: Transition, ng2Module: NgModuleRef<any
       .reduce(unnestR, [])
       .reduce(uniqR, []);
 
-  let replacementState = registry.get(replacementName);
-  if (!replacementState || replacementState === originalState) {
-    throw new Error(`The Future State named '${originalName}' lazy loaded an NgModule. ` +
-        `The lazy loaded NgModule must have a state named '${replacementName}' ` +
-        `which replaces the (placeholder) '${originalName}' Future State. ` +
-        `Add a '${replacementName}' state to the lazy loaded NgModule ` +
-        `using UIRouterModule.forChild({ states: CHILD_STATES }).`);
+  if (isFuture) {
+    let replacementState = registry.get(replacementName);
+    if (!replacementState || replacementState === originalState) {
+      throw new Error(`The Future State named '${originalName}' lazy loaded an NgModule. ` +
+          `The lazy loaded NgModule must have a state named '${replacementName}' ` +
+          `which replaces the (placeholder) '${originalName}' Future State. ` +
+          `Add a '${replacementName}' state to the lazy loaded NgModule ` +
+          `using UIRouterModule.forChild({ states: CHILD_STATES }).`);
+    }
   }
 
   // Supply the newly loaded states with the Injector from the lazy loaded NgModule.

test/ngModule/augment/augment.module.ts

@@ -0,0 +1,35 @@
+import { StatesModule, UIRouterModule } from '../../../src/uiRouterNgModule';
+import { Component, Injector, NgModule } from '@angular/core';
+import { UIRouter } from '@uirouter/core';
+import { Ng2StateDeclaration } from '../../../src/interface';
+
+@Component({
+  selector: 'component1',
+  template: '<h1>Component 1</h1><ui-view></ui-view>'
+}) export class Component1 { }
+
+@Component({
+  selector: 'component2',
+  template: '<h1>Component 2</h1>',
+}) export class Component2 { }
+
+
+export const augment1 = { name: 'augment1', component: Component1 };
+export const augment2 = { name: 'augment1.augment2', component: Component2 };
+export const states: Ng2StateDeclaration[] = [augment1, augment2];
+
+export function config(router: UIRouter, injector: Injector, module: StatesModule) {
+  const registry = router.stateRegistry;
+
+  // copy urls from old state to new
+  states.forEach(state => state.url = registry.get(state.name).url);
+  registry.deregister('augment1');
+  module.states = states;
+}
+
+@NgModule({
+  imports: [UIRouterModule.forChild({ config })],
+  declarations: [Component1, Component2],
+  entryComponents: [Component1, Component2],
+})
+export class AugmentModule {}

test/ngModule/lazyModule.spec.ts

@@ -12,13 +12,30 @@ let futureFoo = {
   loadChildren: () => System.import('./foo/foo.module').then(x => x.FooModule)
 };
 
+let futureBar = {
+  name: 'bar.**',
+  url: '/bar',
+  loadChildren: () => System.import('./foo/foo.module').then(x => x.FooModule)
+};
+
+let augment1 = {
+  name: 'augment1',
+  url: '/augment1',
+  loadChildren: () => System.import('./augment/augment.module').then(x => x.AugmentModule)
+};
+
+let augment2 = {
+  name: 'augment1.augment2',
+  url: '/augment2',
+};
+
 function configFn(router: UIRouter) {
   router.plugin(memoryLocationPlugin);
 }
 
 describe('lazy loading', () => {
   beforeEach(() => {
-    let routerModule = UIRouterModule.forRoot({ useHash: true, states: [futureFoo], config: configFn });
+    let routerModule = UIRouterModule.forRoot({ useHash: true, states: [], config: configFn });
 
     TestBed.configureTestingModule({
       declarations: [],
@@ -30,10 +47,12 @@ describe('lazy loading', () => {
   });
 
   it('should lazy load a module', async(inject([UIRouter], (router: UIRouter) => {
+    let { stateRegistry, stateService, globals } = router;
+    stateRegistry.register(futureFoo);
+
     const fixture = TestBed.createComponent(UIView);
     fixture.detectChanges();
 
-    let { stateRegistry, stateService, globals } = router;
 
     let names = stateRegistry.get().map(state => state.name).sort();
     expect(names.length).toBe(2);
@@ -48,6 +67,42 @@ describe('lazy loading', () => {
     });
   })));
 
+  it('should throw if no future state replacement is lazy loaded', async(inject([UIRouter], (router: UIRouter) => {
+    let { stateRegistry, stateService } = router;
+    stateService.defaultErrorHandler(() => null);
+    stateRegistry.register(futureBar);
+
+    const fixture = TestBed.createComponent(UIView);
+    fixture.detectChanges();
+
+    let names = stateRegistry.get().map(state => state.name).sort();
+    expect(names.length).toBe(2);
+    expect(names).toEqual(['', 'bar.**']);
+
+    const success = () => { throw Error('success not expected') };
+    const error = (err) => {
+      expect(err.detail.message).toContain("The lazy loaded NgModule must have a state named 'bar'"); };
+    stateService.go('bar').then(success, error);
+  })));
+
+  it('should support loadChildren on non-future state (manual state cleanup)', async(inject([UIRouter], (router: UIRouter) => {
+    let { stateRegistry, stateService } = router;
+    stateRegistry.register(augment1);
+    stateRegistry.register(augment2);
+
+    const fixture = TestBed.createComponent(UIView);
+    fixture.detectChanges();
+
+    let names = stateRegistry.get().map(state => state.name).sort();
+    expect(names).toEqual(['', 'augment1', 'augment1.augment2']);
+
+    const wait = (delay) => new Promise(resolve => setTimeout(resolve, delay));
+    stateService.go('augment1.augment2').then(() => {
+      fixture.detectChanges();
+      expect(stateService.current.name).toBe('augment1.augment2');
+      expect(fixture.debugElement.nativeElement.textContent.replace(/\s+/g, " ").trim()).toBe('Component 1 Component 2');
+    })
+  })));
 
 });