diff --git a/modules/playground/src/routing/app/inbox-app.ts b/modules/playground/src/routing/app/inbox-app.ts
index 18eb4079f3..6467368b31 100644
--- a/modules/playground/src/routing/app/inbox-app.ts
+++ b/modules/playground/src/routing/app/inbox-app.ts
@@ -89,19 +89,6 @@ export class DbService {
   }
 }
 
-@Component(
-    {selector: 'inbox-detail', directives: ROUTER_DIRECTIVES, templateUrl: 'app/inbox-detail.html'})
-export class InboxDetailCmp {
-  private record: InboxRecord = new InboxRecord();
-  private ready: boolean = false;
-
-  constructor(db: DbService, route: ActivatedRoute) {
-    route.params.forEach(p => {
-      PromiseWrapper.then(db.email(p['id']), (data) => { this.record.setData(data); });
-    });
-  }
-}
-
 @Component({selector: 'inbox', templateUrl: 'app/inbox.html', directives: ROUTER_DIRECTIVES})
 export class InboxCmp {
   private items: InboxRecord[] = [];
@@ -146,13 +133,14 @@ export const ROUTER_CONFIG = [
   {path: '', terminal: true, redirectTo: 'inbox'},
   {path: 'inbox', component: InboxCmp},
   {path: 'drafts', component: DraftsCmp},
-  {path: 'detail/:id', component: InboxDetailCmp}
+  {path: 'detail', mountChildren: 'app/inbox-detail.js' }
 ];
 
 @Component({
   selector: 'inbox-app',
   viewProviders: [DbService],
   templateUrl: 'app/inbox-app.html',
-  directives: ROUTER_DIRECTIVES
+  directives: ROUTER_DIRECTIVES,
+  precompile: [InboxCmp, DraftsCmp]
 })
 export class InboxApp {}
diff --git a/modules/playground/src/routing/app/inbox-detail.ts b/modules/playground/src/routing/app/inbox-detail.ts
new file mode 100644
index 0000000000..681c31e3da
--- /dev/null
+++ b/modules/playground/src/routing/app/inbox-detail.ts
@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, AppModule} from '@angular/core';
+import {ROUTER_DIRECTIVES, ActivatedRoute, provideRoutes} 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'})
+export class InboxDetailCmp {
+  private record: InboxRecord = new InboxRecord();
+  private ready: boolean = false;
+
+  constructor(db: DbService, route: ActivatedRoute) {
+    route.params.forEach(p => {
+      PromiseWrapper.then(db.email(p['id']), (data) => { this.record.setData(data); });
+    });
+  }
+}
+
+@AppModule({
+  providers: [provideRoutes([{path: ':id', component: InboxDetailCmp}])],
+  precompile: [InboxDetailCmp]
+})
+export default class InboxDetailModule {}
\ No newline at end of file
diff --git a/modules/playground/src/routing/index.ts b/modules/playground/src/routing/index.ts
index 5685bee796..19dce5c943 100644
--- a/modules/playground/src/routing/index.ts
+++ b/modules/playground/src/routing/index.ts
@@ -12,5 +12,8 @@ import {HashLocationStrategy, LocationStrategy} from '@angular/common';
 import {provideRouter} from '@angular/router';
 
 export function main() {
-  bootstrap(InboxApp, [provideRouter(ROUTER_CONFIG), {provide: LocationStrategy, useClass: HashLocationStrategy}]);
+  bootstrap(InboxApp, [
+    provideRouter(ROUTER_CONFIG),
+    {provide: LocationStrategy, useClass: HashLocationStrategy}
+  ]);
 }