RC5 migration FAIL

[buddyackerman]

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.

[brandonroberts]

You don't need the RouterModule and the routing, since the routing export returns RouterModule.forRoot

[buddyackerman]

Then how would the module know about the routes? The RC5 sample app shows that is is how to implement the routing.

from the live example

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';

/* App Root */
import { AppComponent }   from './app.component';

/* Feature Modules */
import { ContactModule }  from './contact/contact.module';
import { SharedModule }   from './shared/shared.module';
import { routing }        from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    ContactModule,
    routing,
    SharedModule.forRoot()
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

I removed the RouterModule from my app.module with no effect and then I removed the routing as well and neither made a difference.

[brandonroberts]

@buddyackerman ok, can you share more details about your build? What are you bundling with? There's more help in the chatroom at https://gitter.im/angular/angular

[buddyackerman]

In my development environment I'm not bundling the app (yes, I'm loading 500+ files).

[brandonroberts]

@buddyackerman ok, are you getting anything in the console when you start the app? Will you share your index.html and SystemJS config?

[buddyackerman]

Alex Rickabaugh over on gitter had me add .catch(err => console.log(err)) to the bootstrap call and that got me some error messages and I found that a third party control (that I had updated at the same time as the RC5 update) had changed the name of a property.

Now I'm having a some sort of routing issue. The app loads but it's not loading the login page. My app.component does a check to see if the user has a saved auth token and if not it navigates to the /login route but the component never loads. I put a breakpoint in the Login component's constructor but it's not being hit.

So, my app.component calls this in it's constructor

    this.authService.checkLogin();

the checkLogin method checks for an existing auth token and if not then it calls this:

      this.router.navigate(['/login']);

I'm debugging it and it is hitting the above lines but never hits the breakpoint in the Login constructor

[vicb]

Your question sounds like a support request.

Please use the issue tracker only for bugs and feature requests.

Use gitter and StackOverflow for support request.

[alexeiych]

@buddyackerman , where exactly did you add .catch(err => console.log(err)) to start seeing those errors? I added the "catch" to my main.ts "platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));" but still don't see anything in the console.

[buddyackerman]

@alexeiych That's where I added it also. However, sometimes that doesn't work either but turning on router tracing will expose errors that the .catch doesn't. Enable router tracing like so:

export const routing = RouterModule.forRoot(routes, { enableTracing: true });

[alexeiych]

@buddyackerman I enabled tracing in the routing but it did not help. In fact I stripped my app to the bare minimum just to get it started (no routing neither). Still doesn't load :(

Here is the code:

index.html `

```

<body>
            <otis-app>Loading...</otis-app>
</body>
`
**system-config.js**
`"use strict";

// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

/***********************************************************************************************
- User Configuration.
  *******************************************************************************************_**/
  /_\* Map relative paths to URLs. */
  const map: any = {
  'ng2-bs3-modal': 'node_modules/ng2-bs3-modal',
  'ng2-bootstrap': 'node_modules/ng2-bootstrap',
  'moment':        'node_modules/ng2-bootstrap/node_modules/moment'
  };

/*\* User packages configuration. */
const packages: any = {
    'ng2-bs3-modal': { main: 'ng2-bs3-modal.js',  defaultExtension: 'js' },
    'ng2-bootstrap': { main: 'ng2-bootstrap.js',  defaultExtension: 'js' },
    'moment':        { main: 'moment.js',  defaultExtension: 'js' }
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
- Everything underneath this line is managed by the CLI.
  **********************************************************************************************/
  const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  /*\* @cli-barrel */
  ];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/*\* Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });
`

**main.ts**
`// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';

//import { environment } from './app';
import { AppModule } from './app/app.module';

//if (environment.production) {
//  enableProdMode();
//}

// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));`

**app.module.ts**
'import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { HttpModule }     from '@angular/http';

import { AppComponent }   from './app.component';
import { routing }        from './app.routing';

import { AccountsComponent } from './account/accounts.component';
import { AccountDetailComponent } from './account/account-detail.component';

import { AccountService } from './account/account.service';
import { NedAccountService } from './ned/ned-account.service';

@NgModule({
    imports: [
        BrowserModule//,
//        FormsModule,
//        routing,
//        HttpModule
    ],
    declarations: [
        AppComponent//,
//        AccountsComponent,
//        AccountDetailComponent
    ],
//    providers: [
//        AccountService,
//        NedAccountService
//    ],
    bootstrap: [AppComponent]
})

export class AppModule { }'

**app.component.ts**
`import { Component } from '@angular/core';

import { AccountsComponent } from './account/accounts.component';

@Component({
    selector: 'otis-app',
//    templateUrl: 'app/app.component.html',
    template: '<h1>My First Angular 2 App</h1>'
//    ,directives: [
//        AccountsComponent
//    ]
})
export class AppComponent {
    title = 'OTIS';
}`

[buddyackerman]

I don't really see anything obvious there (unless your app.component.html has a AccountsComponent in it). Have you tried putting this into a Plnkr? I find that when I try to show someone the problem I wind up finding the problem myself and if I don't find it myself then others will have a (non)working example.

Now that I think about it Plnkr is broken for RC5 since it's minification mangles the javascript which breaks RC5. Maybe JSFiddle works.

[jezstarr]

I had the exact same issue and it turned out to be the mangling that was the issue. I'm not sure what was swallowing the errors but all I had was a blank screen and a console with no errors. Maybe check that your JS isn't being mangled just to be safe.

[buddyackerman]

If it's the minification/mangling problem then you would definitely see the error in the console. But, yes, you should also turn off mangling.

[buddyackerman]

@alexeiych Plnkr is working, my error. You should load your example on Plnkr to see if it works

[tpatterson34]

When you said you updated to RC5, I see in your package.json that the "@angular/router": "3.0.0-rc.1", is still RC1. I have had the same thing. RC5 code is on github, but an npm update can't find anything newer than RC2 (I've tried manually changing and walking through RC3, 4, and 5). In the case of route-related classes there appears to be incompatible docs on the angular 2 site which I also think is RC5. That all said, I'm new to angular and just getting things figured out so maybe I've just gotten my code confused trying to update versions...

[buddyackerman]

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

[alexeiych]

I use the anglular-cli to do the build. JS code that it produces looks perfectly clean with no signs of mangling or minification. Let me try to load it into Plunkr...

[alexeiych]

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!

[jpkey]

@buddyackerman Where do I find the related versions to RC5 documented, e.g. for the right Router version. Is there an overview somewhere documented?

Thanks!

[buddyackerman]

@jpkey The docs are at https://angular.io/docs/ts/latest/ not sure how up to date they are for the router though. If all else fails you can always look at the source code https://github.com/angular/angular/tree/master/modules/%40angular/router

[jpkey]

@buddyackerman Thanks for your reply. I also thought looking in the code directly must be the best way.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

<sub>This action has been performed automatically by a bot.</sub>