facon12 facon12 -4 years ago 335
TypeScript Question

Cannot find Primary outlet to Load

I have an app that I cannot get to load a simple component. I think its something simple but I am totally missing it.

My component:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {PageStat} from './PageStat';
import {PageStatService} from './pageStatService';
moduleId: module.id,
selector: 'PageStats',
template: '<h2>You Made it!</h2>',
styleUrls: ['./basestyle.css']
export class PageStatsComponent implements OnInit{
pagestats: PageStat[];
selectedStat: PageStat;
private router: Router,
private pagestatservice: PageStatService){}
this.pagestatservice.getPageStats().then(pagestats => this.pagestats = pagestats)

ngOnInit(): void {
onSelect(selectpagestat: PageStat){
this.selectedStat = selectpagestat;
gotoDetail(): void {
this.router.navigate(['/detail', this.selectedStat.refid]);

and this is my app-routing:

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 }

imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
export class AppRoutingModule {}

I have tried stripping different parts out of the component and nothing seems to change the outcome. I have attempted to clone this off of the 'tour of heroes' example. I see a lot of references to a "router outlet" but the tour of heroes app didn't have one and it works so I'm not 100% sure why or where I would need to place one.

EDIT: The full error: Error: Cannot find primary outlet to load 'PageStatsComponent'

Answer Source

you need a


somewhere in your HTML so that it knows where to display the HTML for the current route.

In your top level component do this ..

template: '<h2>here is the rest of my HTML for the top level component</h2><router-outlet></router-outlet>'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download