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.


  "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';

    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';


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


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';

    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.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 22 (4 by maintainers)

Most upvoted comments

@tpatterson34 Angular core is RC5, Forms is 0.3.0 and Router is 3.0.0.RC1.

Found the “issue”. In index.html my RC1 code had the following line bootstrapping the app: System.import(‘app’).catch(function(err){ console.error(err); });

My new RC5 Angular-CLI based app requires the change to: System.import('main).catch(function(err){ console.error(err); });

This probably does not have anything to do with RC5 but rather the default system-config.ts file generated by Angular-CLI.

Thanks a lot for your help guys!