Angular 2 Router 3.0.0 Nested Routes Compiling

Question

I seem to be having a problem with Angular 2's new Router 3.0.0-alpha.8.

Long story short, my app.routes.ts is

export const routes: RouterConfig = [
    { path: '', component: HomeComponent, canActivate: [AuthGuard] },
    { path: 'login', component: LoginComponent },
    ...SectionARoutes,
    ...SectionBRoutes
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes),
  AUTH_PROVIDERS
];

It loads section A route just fine which is:

export const SectionARoutes: RouterConfig = [
  { path: 'a', component: SectionAComponent, canActivate: [AuthGuard] },
  { path: 'a-more', component: SectionAMoreComponent, canActivate: [AuthGuard] },
  ...SectionAMoreRoutes
];

But it fails to load the nested SectionAMoreRoutes. When i say fail to load I mean the error I get is:

zone.js:463 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) 
    loading http://localhost:4200/app/+a/+a-more/a-more.routes.ts.js(…)

It appears that my typescript is not getting compiled into js when the route is nested. I would love any help or ideas on how to proceed because I'm fairly lost :(

Thanks!!!

EXTRA INFO: My main.ts has:

bootstrap(AppComponent, [
  ...
  APP_ROUTER_PROVIDERS,
]

Section-a-more route looks like:

export const SectionARoutes: RouterConfig = [
  { path: '', component: SectionAMoreListComponent, canActivate: [AuthGuard] },
  { path: '/:id', component: SectionAMoreDetailComponent, canActivate: [AuthGuard] }
];

TLDR: Why won't my nested routes compile in Angular 2 and Router 3.0.0

Answer 1

I was going crazy for 2 days trying to figure this out.

Try deleting the app.routes.js file (NOT THE TS FILE)

Then at the command line enter

tsc app/app.routes.ts

(or where ever you route file is).

This should recompile and create a new app.route.js file.