Cannot find name 'Router'

[nirajmchauhan]

Hi,

I tried using routes, but its throwing me an error. Here is my code:

import {View, Component} from 'angular2/angular2';
import {Router} from 'angular2/router';
import { Home } from './home';

@Component({
    selector:'app'
})

@View({
    templateUrl: '../templates/home.html'
})

export class App{
    constructor(route:Router){
        console.log("app loaded")
    }
}

The compilation throws me following error:

ts/index.ts(14,20): error TS2304: Cannot find name 'Router'.

Is it something I am doing wrong??

[ludohenin]

The router should actually be build in a separate file. We have to add it to the gulpfile build process.

[nirajmchauhan]

I added in my gulp build, here is the build:angular code

gulp.task('build:angular2', function () {
  var builder = new Builder({
    paths: {
      'angular2/*': 'node_modules/angular2/es6/prod/*.es6',
      rx: 'node_modules/angular2/node_modules/rx/dist/rx.js'
    },
    meta: {
      rx: {
        format: 'cjs'
      }
    }
  });
  builder.build('angular2/router', './lib/router.js', {});
  return builder.build('angular2/angular2', './lib/angular2.js', {});
});

gulp.task('build:lib', ['build:angular2'], function () {
  gulp.src([
    './node_modules/angular2/node_modules/traceur/bin/traceur-runtime.js',
    './node_modules/angular2/node_modules/zone.js/dist/zone.js',
    './node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.js',
    './node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.js.map',
    './node_modules/reflect-metadata/Reflect.js',
    './node_modules/reflect-metadata/Reflect.js.map',
    './node_modules/systemjs/dist/system.js',
    './node_modules/systemjs/dist/system.js.map'
  ])
  .pipe(gulp.dest('./lib'));
});

And here is my updated ts file:

import {View, Component} from 'angular2/angular2';
import {RouterOutlet, RouterLink, routerInjectables, RouteConfig} from 'angular2/router';
import { Home } from './home';


@Component({
    selector:'app'
})

@View({
    templateUrl: '../templates/home.html',
    directives: [RouterOutlet, RouterLink]
})

@RouteConfig([
  {path: '/', component: Home, as: 'home'}
])

export class App{
    constructor(){
        console.log("app loaded")
    }
}

Now I am not getting any error in terminal, but in browser I am getting 404 for http://localhost:5555/dev/angular2/router.js

[ludohenin]

have you added a script tag pointing router.js ? It works fine for me.
I'm now looking at the ts compiler error.

[ludohenin]

The ts compiler error is due to the definition file (angular2.d.ts) which not very good.
This file requires quite a lot of rework. So until we get a better one it will need to be modified based upon your needs. Redefining var Router; by class Router {} fixes the compiler error (only).

[nirajmchauhan]

Fixed 404 issue, but still routes not working

[ludohenin]

Router branch refactored.

[nirajmchauhan]

Thanks, will check.

[nirajmchauhan]

I just checked, routes are working fine, can you explain me what changes you made to make it work?

Also found a bug, if you are on component2 route, and if you refresh the page, the npm server sends not found error.

[ludohenin]

@nirajmchauhan I did nothing special as it has always worked for me.
If you refresh on a route different than root it's normal that you get an 404 error as the server only serves static files and is not setup to serve Single Page Application.

[mgechev]

@nirajmchauhan https://stackoverflow.com/questions/17646843/angularjs-html5-mode-how-do-direct-links-work-without-server-specific-changes