Issues after Migration to RC4 in angular2

Question

I am facing few issues after migration from Beta-17 to RC4. I am getting the below compilation errors

Bootstrap Error

/// < reference path="../node_modules/angular2-in-memory-web-api/typings/browser.d.ts" >
import {bootstrap} from '@angular/platform-browser';
Error: Module "../platform-browser/index" as no exported member bootstrap

Router Error

import {ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES, RouteParams, ROUTER_BINDINGS} from '@angular/router';
Error: Cannot find module '@angular/router'

I tried with router-deprecated as well, still getting the module not found error

import {ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES, RouteParams, ROUTER_BINDINGS} from '@angular/router-deprecated';
Error: Cannot find module '@angular/router-deprecated'

If the existing router is deprecated, then what is the new way of implementing routing?

I verified in the following documentation URL, but not able to notice much of difference.

Can anyone share some light on this?

Updated as per the comments: New set of Errors

I am able to import both bootstrap and the router now, but I am getting some other errors

Error# 1. Not able to import RouteConfig

import { ROUTER_DIRECTIVES, RouterOutlet, RouteConfig } from '@angular/router';
Error: Module "../angular/router/index has no exported member RouteConfig"

In order to make the router-deprecated to work i.e. my existing implementation of the routes, I need to import RouteConfig. I am not sure from where can I import RouteConfig

2. Apart from this, I am getting almost 210 compilation errors like below. when I searched for the below errors, it is suggested to add the following line

   /// ../node_modules/angular2/typings/browser.d.ts" />

But as part of migration I have already added the below line

/// < reference path="../node_modules/angular2-in-memory-web-api/typings/browser.d.ts" >

Errors:

Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects ..\node_modules\@angular\core\src\facade\async.d.ts 34  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects ..\node_modules\@angular\core\src\facade\async.d.ts 35  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects ..\node_modules\@angular\core\src\facade\promise.d.ts   9   Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects ..\node_modules\@angular\core\src\facade\promise.d.ts   15  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects ..\node_modules\@angular\core\src\facade\promise.d.ts   16  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects ..\node_modules\@angular\core\src\facade\promise.d.ts   17  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects ..\node_modules\@angular\core\src\facade\promise.d.ts   17  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects ..\node_modules\@angular\core\src\facade\promise.d.ts   18  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects ..\node_modules\@angular\core\src\facade\promise.d.ts   18  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects ..\node_modules\@angular\core\src\facade\promise.d.ts   19  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects ..\node_modules\@angular\core\src\facade\promise.d.ts   19  Active
Error   TS2304  Cannot find name 'Promise'. TypeScript Virtual Projects ..\node_modules\@angular\core\src\facade\promise.d.ts   20  Active


Error   TS2664  Invalid module name in augmentation, module '../../Observable' cannot be found. TypeScript Virtual Projects ..\node_modules\rxjs\add\operator\repeat.d.ts   2   Active
Error   TS2664  Invalid module name in augmentation, module '../../Observable' cannot be found. TypeScript Virtual Projects ..\node_modules\rxjs\add\operator\retry.d.ts    2   Active
Error   TS2664  Invalid module name in augmentation, module '../../Observable' cannot be found. TypeScript Virtual Projects ..\node_modules\rxjs\add\operator\retryWhen.d.ts    2   Active
Error   TS2664  Invalid module name in augmentation, module '../../Observable' cannot be found. TypeScript Virtual Projects ..\node_modules\rxjs\add\operator\sample.d.ts   2   Active
Error   TS2664  Invalid module name in augmentation, module '../../Observable' cannot be found. TypeScript Virtual Projects ..\node_modules\rxjs\add\operator\sampleTime.d.ts   2   Active
Error   TS2664  Invalid module name in augmentation, module '../../Observable' cannot be found. TypeScript Virtual Projects ..\node_modules\rxjs\add\operator\scan.d.ts 2   Active
Error   TS2664  Invalid module name in augmentation, module '../../Observable' cannot be found. TypeScript Virtual Projects ..\node_modules\rxjs\add\operator\share.d.ts    2   Active
Error   TS2664  Invalid module name in augmentation, module '../../Observable' cannot be found. TypeScript Virtual Projects ..\node_modules\rxjs\add\operator\single.d.ts   2   Active
Error   TS2664  Invalid module name in augmentation, module '../../Observable' cannot be found. TypeScript Virtual Projects ..\node_modules\rxjs\add\operator\skip.d.ts 2   Active
Error   TS2664  Invalid module name in augmentation, module '../../Observable' cannot be found. TypeScript Virtual Projects ..\node_modules\rxjs\add\operator\skipUntil.d.ts    2   Active
Error   TS2664  Invalid module name in augmentation, module '../../Observable' cannot be found. TypeScript Virtual Projects ..\node_modules\rxjs\add\operator\skipWhile.d.ts    2   Active
Error   TS2664  Invalid module name in augmentation, module '../../Observable' cannot be found. TypeScript Virtual Projects ..\node_modules\rxjs\add\operator\startWith.d.ts    2   Active
Error   TS2664  Invalid module name in augmentation, module '../../Observable' cannot be found. TypeScript Virtual Projects ..\node_modules\rxjs\add\operator\subscribeOn.d.ts  2   Active

Answer 1

Firstly, try getting your bootstrap function from:

import {bootstrap} from '@angular/platform-browser-dynamic';

Secondly, the new router has a totally new API which means you'll be importing different modules from it when you get it working and it works completely different to the deprecated version. Might be best to try and get the router-deprecated version working first as your beta.17 version of the project will be mostly in line with the deprecated router.

The issue with not finding either router module appears as though you to have not set up your loader mappings and/or typings and/or tsconfig correctly. Check the contents of your package.json and your the config of your loader (SystemJS / webpack) against the tour of heroes version as a start. I've found that for upgrading ng2 versions, this is the best way as the documentation is quite difficult to find and follow for upgrading.

Hope this helps!

Answer 2

In addition to the great advice from Ian, I have a sample application that I just converted to RC 4 that may help. You can find it here.

Here is the commit with the relevant changes.