I am facing an issue with my app where I am unable to load a basic component. It seems like a simple problem, but I just can't seem to figure it out.
Here is the code for my component:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {PageStat} from './PageStat';
import {PageStatService} from './pageStatService';
@Component({
moduleId: module.id,
selector: 'PageStats',
template: '<h2>You Made it!</h2>',
styleUrls: ['./basestyle.css']
})
export class PageStatsComponent implements OnInit{
pagestats: PageStat[];
selectedStat: PageStat;
constructor(
private router: Router,
private pagestatservice: PageStatService){}
getPageStatList(){
this.pagestatservice.getPageStats().then(pagestats => this.pagestats = pagestats)
}
ngOnInit(): void {
this.getPageStatList();
}
onSelect(selectpagestat: PageStat){
this.selectedStat = selectpagestat;
}
gotoDetail(): void {
this.router.navigate(['/detail', this.selectedStat.refid]);
}
}
This is how my app-routing has been set up:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageStatsComponent } from './PageStats.component';
import { PageStatDetailComponent } from './pagestat-detail.component';
const routes: Routes = [
{ path: '', redirectTo: '/pageStats', pathMatch: 'full' },
{ path: 'pagestats/detail/:id', component: PageStatDetailComponent },
{ path: 'pageStats', component: PageStatsComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
I have tried removing different parts of the component code, but nothing seems to be resolving the issue. I tried following the structure of the 'tour of heroes' example. Although many references mention a "router outlet," the tour of heroes app didn't have one and still worked fine. I'm uncertain about why or where I would need to add one in my code.
EDIT: The error message received is: Error: Cannot find primary outlet to load 'PageStatsComponent'