Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 906
Namik Mesic Avatar asked May 03 '16 09:05

Namik Mesic


2 Answers

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);
like image 156
Günter Zöchbauer Avatar answered Nov 10 '22 02:11

Günter Zöchbauer


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.

like image 4
Guillaume Avatar answered Nov 10 '22 03:11

Guillaume