Angular Routing with Aux Outlet and multiple modules. This is a fairly minimal example of a problem I have been having creating a auxiliary outlet for use in displaying Modals. The example does not actually include the modal functionality, that will be handled by styling, but is does demonstrate the problem. When the router outlet is targeted with a URL that specifies a component in the root module, everything works fine but when the route is a child route in another module, it gives an error.

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
  angularVersion = ''; //picks up latest
}
else {
  angularVersion = '@' + window.AngularVersionForThisPlunker;
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    '@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion  + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {RouterModule, Router} from '@angular/router'
import {PageNotFoundComponent} from 'src/pageNotFound.component'
import {HomeComponent} from 'src/home.component'
import {DetailComponent} from 'src/detail.component'
import {UsersModule} from './users/users.module'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <ul>
        <li><a [routerLink]="['home']">Home</a> - Display a welcome message in the unnamed router-outlet</li>
        <li><a [routerLink]="['users/loginMain']">Login Main</a> - Display a Login Component in the unnamed router-outlet</li>
        <li><a [routerLink]="[{outlets: {'modal': 'detail' }}]">Detail</a> - Should display a "Detail" secion in the "modal" router-outlet</li>
        <li><a [routerLink]="[{outlets: {'modal': 'users/login' }}]">Login</a> - Should display a "Login" section in the "modal" router-outlet</li>
      </ul>
      <router-outlet></router-outlet>
      <router-outlet name="modal"></router-outlet>
    </div>
  `,
})
export class App implements OnInit {
  name:string;
  constructor(private router: Router) {
    this.name = `Angular! v${VERSION.full}`
  }
  ngOnInit() {
    rouer.navigateByUrl("/home");
  }
}

const routes: Routes = [
    { path: 'users', loadChildren: 'src/users/users.module#UsersModule' },
    { path: 'detail', component: DetailComponent, outlet: 'modal' },
    { path: 'home', component: HomeComponent },
    { path: '**', component: PageNotFoundComponent } 
  ]

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableTracing: true})],
  exports: [RouterModule]
})
export class AppRoutingModule {}

@NgModule({
  imports: [ BrowserModule, UsersModule.forRoot(), AppRoutingModule  ],
  declarations: [ App, PageNotFoundComponent, HomeComponent, DetailComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

import { Component } from '@angular/core';

@Component({
  template: `<div>
  <H1>This is not the page you were looking for...</H1>
  <p>The page you were looking for is not available.  Please click <a href="/">here</a> to return to the home page.</p>
</div>`,
})
export class PageNotFoundComponent {
  constructor() { }
}


import {NgModule, Component} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {LoginComponent} from './login.component';

@Component({
  template: `
  <router-outlet></router-outlet>
  <router-outlet name="modal"></router-outlet>
  `
})
export class UsersComponent {
}

const routes: Routes = [
  {
    path: '',
    component: UsersComponent,
    children: [
      {path: 'loginMain', component: LoginComponent},
      {path: 'login', component: LoginComponent, outlet: 'modal'}
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UsersRoutingModule {}

@NgModule({
  imports: [UsersRoutingModule],
  declarations: [UsersComponent, LoginComponent]
})
export class UsersModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: UsersModule,
      providers: []
    }
  }
}

import { Component } from '@angular/core';

@Component({
  template: `<div>
  <H1>Welcome!</H1>
  <p>This is the homepage</p>
</div>`,
})
export class HomeComponent {
  constructor() { }
}

import { Component } from '@angular/core';

@Component({
  template: `<div>
  <H2>Login</H2>
  <p>This is the Login Form</p>
</div>`,
})
export class LoginComponent {
  constructor() { }
}

import { Component } from '@angular/core';

@Component({
  template: `<div>
  <H2>Detail!</H2>
  <p>This is the Detail Component</p>
</div>`,
})
export class DetailComponent {
  constructor() { }
}