Angular2 dipendenze router-deprecato non corso di caricamento

Question

ho recentemente aggiornato la mia versione angular2 e hanno avuto il seguente problema:

1. Il lib router non esiste più, è stato sostituito da router-deprecato.

2. ho questo componente Menu:

   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. L'applicazione non è riuscita quando provo a caricare anche esso, in quanto è in grado di risolvere i file necessari dal router-deprecato. Ottengo il seguente errore:

Image of error

Answer 1

In Angular2 rc.0 potrebbe essere necessario aggiungere

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

al vostro packages in config.js

o questo se si desidera utilizzare il nuovo router:

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

Esempio config.js dal 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/rxjs@5.0.0-beta.6', 
    '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/common@0.0.0-3' 
    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); 

Answer 2

In realtà la soluzione è molto semplice, abbiamo bisogno di cambiare il file systemjs.config.js. la matrice pacchetti contiene l'elenco di pacchetti angolari mentre uno di loro è sbagliato

sostituire questo: '@ angolare/router', con questo: '@ angolare/router-deprecato',

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

che è esso.

Answer 3

Più esattamente, con il progetto dattiloscritto, aggiungere la dipendenza del modulo nel file package.json:

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

E nel file src/system-config.ts questa linea:

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

Quindi, non dimenticate di eseguire npm i nel tuo progetto per installare questo modulo prima di usarlo.