Angular2 Component Router basic issue

Question

Started learning angular2 beta component routing. I have done this so far.

http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p=preview

I have copied following required CDNs. please have a look here.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/Rx.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/router.dev.js"></script>

src/boot.ts

import {Component} from 'angular2/core';
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,LocationStrategy} from 'angular2/router';
import {bootstrap}        from 'angular2/platform/browser';

import{ComponentOne} from 'src/cone';
import{ComponentTwo} from 'src/ctwo';

@Component({
  selector: 'my-app',
  template: `
    <h1>Component Router</h1>
    <nav>
      <a [routerLink]="['ComponentOne']">One</a><hr/>
      <a [routerLink]="['ComponentTwo']">Two</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path:'/component-one', name: 'ComponentOne', component: ComponentOne},
  {path:'/component-two', name: 'ComponentTwo', component: ComponentTwo}
])
export class AppComponent { }

    bootstrap(AppComponent, [
      ROUTER_PROVIDERS
]);

src/cone

 import {Component,View} from 'angular2/core';

 @Component({
    template: `
    <h1>first Component</h1>
    `
  })

  export class ComponentOne{
    constructor(){

      console.log("first component being called");
    }
  }

src/ctwo

 import {Component,View} from 'angular2/core';

 @Component({
    template: `
    <h1>Second Component</h1>
    `
  })

  export class ComponentTwo{
    constructor(){

      console.log("Second component being called");
    }
  }

Please check your dev console. It gives an error

EXCEPTION: Error during instantiation of LocationStrategy! (RouterLink -> Router -> Location -> LocationStrategy).BrowserDomAdapter.logError @ angular2.dev.js:23514 angular2.dev.js:23514 ORIGINAL EXCEPTION: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.

and in addition it doesn't redirect me to destination. I have tried to add < base href="/" >but it allows gives an error.

I want links to be working properly.

I have made plnkr for you. run it and check in browser's console. doesn't have single error. — nyks
– nyks, Commented Jan 7, 2016 at 11:16
I added it below to the head tag but then it doesn't show initial page. — nyks
– nyks, Commented Jan 7, 2016 at 11:24
It should be added inside the <head> tag but Plunker does need another strategy anyway. I try to look it up — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 7, 2016 at 11:25

Günter Zöchbauer · Accepted Answer · 2016-08-06 10:33:29Z

15

Either add the <base href="/"> to the <head> element or add APP_BASE_HREF to bootstrap

bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  // usually
  provide(APP_BASE_HREF, {useValue: '/'})
  // for Plunker
  // bind(APP_BASE_HREF).toValue(location.pathname)
]);

Answer Edited By Nyks:

In my plunker I have updated following parts,

import {Component,bind} from 'angular2/core';
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';

export class AppComponent { }

    bootstrap(AppComponent, [
      ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
]);

final Answer : http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p=preview

See also http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm?p=info

and the ROUTING & NAVIGATION developer guide at at angular.io

edited Aug 6, 2016 at 10:33

answered Jan 7, 2016 at 11:27

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 Component Router basic issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related