angular: RC5 migration FAIL

It will be easy they said, it’s backwards compatible they said. I’ve found differently. tried to do exaclty what the migration doc said to do. Updated all my @angular packages to RC5.

package.json

  "dependencies": {
    "reflect-metadata": "^0.1.8",
    "@angular/core": "2.0.0-rc.5",
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/http": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "angular2-in-memory-web-api": "0.0.15",
    "angular2-jwt": "0.1.16",
    "core-js": "^2.4.0",
    "systemjs": "0.19.31",
    "es6-promise": "3.2.1",
    "es6-shim": "0.35.1",
    "lodash": "^4.13.1",
    "ng2-bootstrap": "^1.0.24",
    "primeng": "^1.0.0-beta.12",
    "primeui": "4.1.14",
    "rxjs": "5.0.0-beta.11",
    "zone.js": "*"
  },

So, then I added a simple Module:

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { App }   from './app.component';

@NgModule({
    declarations: [App],
    imports:      [BrowserModule],
    bootstrap:    [App],
})
export class AppModule {}

And then modified my app.ts

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

platformBrowserDynamic().bootstrapModule(AppModule);

Supposedly this was all that was needed because the backward compatibility would take care of the rest. No go. Got javascript errors in the console saying there was no Route provider. So I updated my app.routes and added the router to my module and added the routes provider

app.routes

import { AuthGuard, AuthRedirect } from './Authorization/authorize';
import { AuthService } from './Authorization/authservice';
import { Login }  from './Login/login';
import { PasswordReset }  from './PasswordReset/password-reset';
import { RegisterUser }    from './RegisterUser/register-user';
import { PortalHome }    from './portalhome/portal.home';
import { CustomerProfile }    from './customerprofile/customer-profile';
import { ItemDetail }    from './itemdetail/home-detail';
import { FindItem }    from './finditem/find-property';
import { MessageCenter }    from './messagecenter/message-center';

import { Routes,
    RouterModule } from '@angular/router';


export const routes: Routes = [
    { path: '', component: Login, canActivate: [AuthRedirect] },
    { path: 'login', component: Login, canActivate: [AuthRedirect] },
    { path: 'pwdreset', component: PasswordReset, canActivate: [AuthRedirect] },
    { path: 'register', component: RegisterUser, canActivate: [AuthRedirect] },
    { path: 'portalhome', component: PortalHome, canActivate: [AuthGuard] },
    { path: 'customerprofile', component: CustomerProfile, canActivate: [AuthGuard] },
    { path: 'itemdetail/:itemId', component: ItemDetail, canActivate: [AuthGuard] },
    { path: 'finditem', component: FindItem, canActivate: [AuthGuard] },
    { path: 'messagecenter', component: MessageCenter, canActivate: [AuthGuard] }
];

export const routing = RouterModule.forRoot(routes);

update app.module

import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [App],
    imports: [BrowserModule, RouterModule, routing],
    bootstrap: [App],
})
export class AppModule { }

No more error but the app doesn’t load. Next step was to add ALL of the app’s components (same as those listed in the app.routes) to the declarations in the module. Still no go. Then I added the FormsModule to the imports of the module. Nope. Then I added all of the services that I’ve created in my app to the providers property of the module. Still, the app won’t load. The good news is that there are NO ERRORS of any kind being reported so I have no idea what the problem really is. This is a huge pet peeve of mine with NG2. The app won’t load and yet there are no errors.