title: Migrating from router-deprecated 2.0.0-rc.2 to router@3.0.0-rc.1
body: <p>I started learning Angular2 back in June when the angular.io quickstart and the "tour of heroes" (tutorial) were based on router-deprecated and the old main.ts-syntax (now we have ngModules).</p>
  
  <p>I have problems in upgrading both things: Using ngModule (app.module.ts) and using the new router.</p>
  
  <p>Error:</p>
  
  <blockquote>
    <p><a href="http://localhost:3000/traceur" rel="nofollow">http://localhost:3000/traceur</a> Failed to load resource: the server
    responded with a status of 404 (Not Found) localhost/:22 Error:
    (SystemJS) XHR error (404 Not Found) loading
    <a href="http://localhost:3000/traceur" rel="nofollow">http://localhost:3000/traceur</a>(…)</p>
  </blockquote>
  
  <p>thrown in index.html in line:</p>
  
  <pre><code>System.import('app').catch(function(err){ console.error(err); });
  </code></pre>
  
  <p><strong>main.ts</strong> (OLD, works)</p>
  
  <pre><code>import { bootstrap }      from '@angular/platform-browser-dynamic';
  import { AppComponent }   from './app.component';
  import { HTTP_PROVIDERS, Http, Headers, Response } from '@angular/http';
  import 'rxjs/Rx'; // required to use the .map()-Function on a Observable-Object
  
  
  
  // Custom Services
  import { GlobalSessionService } from './global-session.service';
  import { NavbarMenuService } from './navbar-menu.service';
  
  bootstrap(AppComponent,
      [
          HTTP_PROVIDERS,
          Http,
          GlobalSessionService,
          NavbarMenuService
      ]
  );
  </code></pre>
  
  <p><strong>main.ts</strong> (NEW, doesn't work)</p>
  
  <pre><code>import { AppComponent }   from './app.component';
  // The browser platform with a compiler
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  // The app module
  import { AppModule } from './app.module';
  // Compile and launch the module
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { AppComponent }  from './app.component';
  import { HTTP_PROVIDERS, Http } from '@angular/http';
  import { routing, appRoutingProviders } from './app.routing';
  
  // Custom Services
  import { GlobalSessionService } from './global-session.service';
  import { NavbarMenuService } from './navbar-menu.service';
  
  
  @NgModule({
    imports: [ BrowserModule, routing ],
    declarations: [ AppComponent ],
    providers: [
          appRoutingProviders,
          HTTP_PROVIDERS,
          Http,
          GlobalSessionService,
          NavbarMenuService
      ],
    bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>old routing (in app.component.ts)</strong></p>
  
  <pre><code>  @RouteConfig([
    { path: '/unsere-angebote',
      name: 'UnsereAngebote', 
      component: UnsereAngeboteComponent,
      useAsDefault: true
    },
    { path: '/ihre-loesungen',
      name: 'IhreLoesungen',
      component: IhreLoesungenComponent
    },
    ...
  </code></pre>
  
  <p><strong>new routing (in app.routes.ts)</strong></p>
  
  <pre><code>import { Routes, RouterModule } from '@angular/router';
  ...
  import { TrainingsComponent } ...
  ...
  import {NewsComponent} from ...
  
  
  const appRoutes: Routes = [
    ...
    { path: '/news',
      component: NewsComponent
    },
    {
      path: '**',
      component: PageNotFoundComponent
    }
  ];
  
  export const appRoutingProviders: any[] = [
  
  ];
  
  export const routing = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p><strong>systemjs.config.js</strong></p>
  
  <pre><code>(function(global) {
    // map tells the System loader where to look for things
    var map = {
      'app':                        'app', // 'dist',
      '@angular':                   'node_modules/@angular',
      'rxjs':                       'node_modules/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
      'app':                        { main: 'main.js',  defaultExtension: 'js' },
      'rxjs':                       { defaultExtension: 'js' }
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];
    // Add package entries for angular packages
    ngPackageNames.forEach(function(pkgName) {
      packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    });
    var config = {
      map: map,
      packages: packages
    }
    System.config(config);
  })(this);
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "abc-project",
    "version": "0.1.0",
    "scripts": {
      "start": "tsc &amp;&amp; concurrently \"npm run tsc:w\" \"npm run lite\" ",
      "lite": "lite-server",
      "postinstall": "typings install",
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "typings": "typings"
    },
  
    "dependencies": {
      "@angular/common":                    "2.0.0-rc.5",
      "@angular/compiler":                  "2.0.0-rc.5",
      "@angular/core":                      "2.0.0-rc.5",
      "@angular/http":                      "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/router-deprecated":         "2.0.0-rc.2",
      "@angular/upgrade":                   "2.0.0-rc.5",
      "systemjs": "0.19.36",
      "core-js": "^2.4.1",
      "reflect-metadata": "^0.1.8",
      "rxjs": "5.0.0-beta.6",
      "zone.js": "^0.6.12",
      "bootstrap": "^3.3.7"
    },
  
    "devDependencies": {
      "concurrently": "^2.0.0",
      "lite-server": "^2.2.2",
      "typescript": "^1.8.10",
      "typings":"^1.3.2"
    }
  }
  </code></pre>