title: Testing lazy loaded routes in Angular 2
body: <p>I'm trying to write a test for navigation to a route in a lazy loaded module. It fails because the lazy loaded module can't be found. I don't know how to load/inject the lazy loaded module into the test.</p>
  
  <p>This is main.ts:</p>
  
  <pre><code>export const routes: Routes = [
    {path: '', component: EagerComponent},
    {path: 'lazy', loadChildren: 'app/lazy.module'}
  ];
  
  @NgModule({
   imports: [ BrowserModule, RouterModule.forRoot(routes) ],
   declarations: [ AppComponent, EagerComponent ],
   providers: [
      {provide: LocationStrategy, useClass: HashLocationStrategy}
   ],
   bootstrap: [ AppComponent ] 
  }) 
  class AppModule { }
  
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p>Here is app/lazy.module.ts</p>
  
  <pre><code>@NgModule({
    imports: [ CommonModule,
      RouterModule.forChild([
        {path: '', component: LazyComponent}
      ]) ],
    declarations: [ LazyComponent ],
    providers: [ LazyComponent ]
  })
  export default class LazyModule {
  }
  </code></pre>
  
  <p>Here is the test spec. The '/' path works but the '/lazy' path gets:</p>
  
  <pre><code>Error: Uncaught (in promise): Error: Cannot find module app/lazy.module
  
  
  
  describe( 'Router', () =&gt; {
    beforeEach( () =&gt; {
        TestBed.configureTestingModule({
          imports: [ RouterTestingModule, RouterTestingModule.withRoutes(routes) ],
          declarations: [ AppComponent, EagerComponent, LazyComponent ]
        });
      }
    );
  
    beforeEach( async(() =&gt; {
        TestBed.compileComponents();
      }
    ));
  
    it('should be able to navigate to home using commands API',
      fakeAsync(inject([Router, Location], (router: Router, location: Location) =&gt; {
          TestBed.createComponent(AppComponent);
          router.navigate(['/']);
          tick();
          expect(location.path()).toBe('/');
        })
      ));
  
    it('should be able to navigate to /lazy using commands API',
      fakeAsync(inject([Router, Location], (router: Router, location: Location) =&gt; {
          TestBed.createComponent(AppComponent);
          router.navigate(['/lazy']);
          tick();
          expect(location.path()).toBe('/lazy');
        })
      ));
  });
  </code></pre>
  
  <p>I'm running this on a Jasmine page using SystemJS.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;[TEST] Lazy&lt;/title&gt;
  
    &lt;!-- TypeScript in-browser compiler --&gt;
    &lt;script src="node_modules/typescript/lib/typescript.js"&gt;&lt;/script&gt;
  
    &lt;!-- Polyfills --&gt;
    &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
  
    &lt;!-- Jasmine --&gt;
    &lt;link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css"&gt;
    &lt;script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"&gt;&lt;/script&gt;
  
    &lt;!-- Zone.js --&gt;
    &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/proxy.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/sync-test.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/jasmine-patch.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/async-test.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/fake-async-test.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/long-stack-trace-zone.js"&gt;&lt;/script&gt;
  
    &lt;!-- SystemJS --&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;script src="systemjs.test-config.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script&gt;
    var SPEC_MODULES = [
      'app/app.routing.spec'//
    ];
  
    Promise.all([
          System.import('@angular/core/testing'),
          System.import('@angular/platform-browser-dynamic/testing')
        ])
        .then(function(modules) {
          var testing = modules[0];
          var browser = modules[1];
  
          testing.TestBed.initTestEnvironment(
              browser.BrowserDynamicTestingModule,
              browser.platformBrowserDynamicTesting());
  
          // Load all the spec files.
          return Promise.all(SPEC_MODULES.map(function(module) {
            return System.import(module);
          }));
        })
        .then(window.onload)
        .catch(console.error.bind(console));
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>systemjs.test-config.js</p>
  
  <pre><code>System.config({
      transpiler: 'typescript',
      typescriptOptions: {emitDecoratorMetadata: true},
      map: {
        '@angular': 'node_modules/@angular',
        'rxjs'    : 'node_modules/rxjs',
  
        '@angular/common/testing'                  : 'ng:common/bundles/common-testing.umd.js',
        '@angular/compiler/testing'                : 'ng:compiler/bundles/compiler-testing.umd.js',
        '@angular/core/testing'                    : 'ng:core/bundles/core-testing.umd.js',
        '@angular/http/testing'                    : 'ng:http/bundles/http-testing.umd.js',
        '@angular/router/testing'                  : 'ng:router/bundles/router-testing.umd.js',
        '@angular/platform-browser/testing'        : 'ng:platform-browser/bundles/platform-browser-testing.umd.js',
        '@angular/platform-browser-dynamic/testing': 'ng:platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js'
      },
      paths: {
        'node_modules/@angular/*': 'node_modules/@angular/*/bundles',
        'ng:': 'node_modules/@angular/'
      },
      meta: {
        '@angular/*': {'format': 'cjs'}
      },
      packages: {
        'app'                              : {main: 'main', defaultExtension: 'ts'},
        'rxjs'                             : {main: 'Rx'},
  
        '@angular/core'                    : {main: 'core.umd.min.js'},
        '@angular/http'                    : {main: 'http.umd.min.js'},
        '@angular/common'                  : {main: 'common.umd.min.js'},
        '@angular/compiler'                : {main: 'compiler.umd.min.js'},
        '@angular/router'                  : {main: 'router.umd.min.js'},
        '@angular/platform-browser'        : {main: 'platform-browser.umd.min.js'},
        '@angular/platform-browser-dynamic': {main: 'platform-browser-dynamic.umd.min.js'}
      }
  });
  </code></pre>