Angular2 router-deprecated dependencies not being loaded

I have recently updated my angular2 version and have had the following issue:

1. The router lib no longer exists, it has been replaced by router-deprecated.

2. I have this menu component:

   import { Component }       from '@angular/core';
   import { DashboardComponent } from './dashboard.component'
   import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
   
   @Component({
     selector: 'main-menu',
     templateUrl: 'app/views/menu.html',
     directives: [ROUTER_DIRECTIVES],
     providers: [
       ROUTER_PROVIDERS
     ]
   })
   
   @RouteConfig([
     {
       path: '/dashboard',
       name: 'Dashboard',
       component: DashboardComponent,
       useAsDefault: true
     }
   ])
   
   export class MenuComponent {}
   

3. The app fails when I try to even load it, as it is unable to resolve the files needed from the router-deprecated. I get the following error:

Image of error

In Angular2 RC.0 you might need to add

'@angular/router-deprecated': {
  main: 'index.js',
  defaultExtension: 'js'
},

to your packages in config.js

or this if you want to use the new router:

'@angular/router': {
  main: 'index.js',
  defaultExtension: 'js'
},

Example config.js from the rc.0 Plunker

(function(global) {

  var ngVer = '@2.0.0-rc.0'; // lock in the angular package version; do not let it float to current!

  //map tells the System loader where to look for things
  var  map = {
    'app':                        'src', // 'dist',
    'rxjs':                       'https://npmcdn.com/[email protected]',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'app.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };

  var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router-deprecated',
      '@angular/testing',
      '@angular/upgrade',
  ];

  // add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/[email protected]'
  packageNames.forEach(function(pkgName) {
    map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
  });

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

More exactly, with typescript project, add the module dependency in the package.json file:

dependencies{
    ...
   "@angular/router-deprecated": "2.0.0-rc.1"
}

And in your src/system-config.ts file this line:

const barrels:string[] = [
     ...
    '@angular/router-deprecated'
];

Then, don't forget to run npm i in your project to install this module before to use it.

Actually the solution is very simple, we need to change the systemjs.config.js file. the packages array holds list of angular packages while one of them is wrong

replace this: '@angular/router', with this: '@angular/router-deprecated',

    systemjs.config.js:
...
...
...

        var packageNames = [
            '@angular/common',
            '@angular/compiler',
            '@angular/core',
            '@angular/http',
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/router-deprecated',
            '@angular/testing',
            '@angular/upgrade',
          ];

that's it.