CODEWITHSUNDEEP
c#typescriptvisual-studio-2015angular
Laurentiu Stamate
Laurentiu Stamate

Reputation: 707

Angular 2 routing resource not found

I am using VS 2015 RC, working on a WebAPI project and when I try to use the routing in Angular 2 I get the following errors:

Failed to load resource: the server responded with a status of 404 (Not Found) localhost:14580/angular2/router

Potentially unhandled rejection [3] Error loading "angular2/router" at localhost:14580/angular2/router Error loading "angular2/router" from "Components/main/main" at localhost:14580/Components/main/main.js Not Found: localhost:14580/angular2/router (WARNING: non-Error used)

The view is the basic import of the main.ts component. The component code is as follows:

/// <reference path="../../Scripts/typings/angular2/angular2.d.ts" />
/// <reference path="../../Scripts/typings/_custom/ng2.d.ts" />

import {Router, RouteConfig, RouterLink, RouterOutlet} from 'angular2/router';
import {Component, View, bootstrap} from 'angular2/angular2';
import {Login} from '../login/login';
import {status, json} from 'Scripts/utils/fetch'


// Annotation section
@Component({
    selector: 'my-app'
})
@View({
        templateUrl: 'Views/main/main.html',
        directives: [RouterLink, RouterOutlet]
})
@RouteConfig([
{ path: '/login', as: 'login', component: Login }
])
// Component controller
export class Main {
    //router: Router;
    name: string;
constructor(router: Router) {
    //this.router = router;
    this.name = 'Routing';

   router.config([{ path: '/login', as: 'login', component: Login }]);
}

login(event, email, password) {
    event.preventDefault();

    window.fetch('/api/Account/Login', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            email, password
        })
    })
        .then(status)
        .then(json)
        .then((response) => {
    alert(response);
        //    this.router.parent.navigate('/home');
    })
        .catch((error) => {
        alert(error.message);
        console.log(error.message);
    });
}

}
bootstrap(
    Main
);

Upvotes: 2

Views: 8002

Answers (2)

adlr0
adlr0

Reputation: 778

You need to include router.dev.js on your html in the same way you included angular2.dev.js. So simply add this line to your index.html's head:

<script src="../node_modules/angular2/bundles/router.dev.js"></script>

PS. I know you already solved this, but the answer was not clear and I took a while to realize what was wrong with my app.

Upvotes: 17

TGH
TGH

Reputation: 39278

If you bring in the latest definitelyTyped typings for Angular 2 it may be easier to get it working. Here is a working example:

http://www.syntaxsuccess.com/viewarticle/routing-in-angular-2.0

Upvotes: 1

Related Questions