CODEWITHSUNDEEP
angularangular2-routing
KnowHoper
KnowHoper

Reputation: 4632

Angular2 Router not rendering views

I am having issues with getting Angular2 to render views. No errors are reported.

Here is the code, if anyone can help I would be very appreciative:

AppComponent:

import { Component, View } from 'angular2/core';
import { MasterCourseDetailsComponent } from './master.course.details';
import { MasterCourseListComponent } from './master.course.list';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';

@Component({
    selector: 'master-course'
})

@View({
        directives: [ROUTER_DIRECTIVES, MasterCourseListComponent, MasterCourseDetailsComponent],
    templateUrl: '/ECAV.Admin/App/views/master-course-app.html'
})

@RouteConfig([
    { path: '/masterCourselist', name: 'MasterCourseList', component: MasterCourseListComponent, useAsDefault:true},
    { path: '/masterCourseDetails:', name: 'MasterCourseListDetails', component: MasterCourseDetailsComponent }
])
export class MasterCourseAppComponent {
    title: string;
    constructor() {
        this.title = 'App title';
    }
}

Master Course List Component:

import {Component, View, OnInit} from 'angular2/core';
import { RouterLink, RouteParams } from 'angular2/router';
import {ROUTER_DIRECTIVES}  from 'angular2/router';

@View({
    templateUrl: '/Site.Admin/App/views/master-course-list.html',
    directives: [ROUTER_DIRECTIVES ],
})
export class MasterCourseListComponent implements OnInit {
    ngOnInit() {
        console.log('ngOnInit');
    }
}

Master Course Details:

import {Component, View, OnInit} from 'angular2/core';
import { RouterLink, RouteParams } from 'angular2/router';
import {ROUTER_DIRECTIVES}  from 'angular2/router';
@View({
   templateUrl: '/Site.Admin/App/views/master-course-details.html',
    directives: [ROUTER_DIRECTIVES],
})
export class MasterCourseDetailsComponent implements OnInit {
    ngOnInit() {
        console.log('ngOnInit');
    }
}

Boot

<script src="~/node_modules/angular2/bundles/router.dev.js"></script>
<master-course>Loading...</master-course>
<script>
    System.import('/Site.Admin/App/boots/boot.master.course')
        .then(null, console.error.bind(console));
</script>

Master Course View:

<header>
    <nav>
        <ul>
            <li>
                <a [routerLink]="['MasterCourseList']">Course List</a>
            </li>
            <li>
                <a [routerLink]="['MasterCourseListDetails']">Master Course Details</a>
            </li>
        </ul>
    </nav>
</header>
<a [routerLink]="['MasterCourseList']">Home</a>

<main>
  <routerOutlet></routerOutlet>
</main>

List View

<div> here is the master course List</div>

Details View

 <div> here is the master course details</div>

Thank you.

Upvotes: 2

Views: 862

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202326

Did you set a base tag within your HTML entry file:

<base href="/">

It's required when using the PathLocationStrategy (the default one). See the Angular2 documentation for more details: https://angular.io/docs/ts/latest/api/router/PathLocationStrategy-class.html.

Edit

I think you should use <router-outlet></router-outlet> instead of <routerOutlet></routerOutlet>:

<main>
  <router-outlet></router-outlet>
</main>

Upvotes: 3

Related Questions