CODEWITHSUNDEEP
javascriptjqueryangularangular4-router
Kgn-web
Kgn-web

Reputation: 7565

Angular 4 routing - EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'

I am new to Angular4.

While I am trying to explore the routing in Angular4, I am getting the below error

EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'

I checked the numbers of links to fix but none useful yet.

This is how app looks like.

index.html

<body>
  <app-root>Loading...</app-root>
  <router-outlet> </router-outlet>
</body>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {RouterModule, Routes  } from '@angular/router';

import { AppComponent } from './app.component';
import { CustomerComponent } from './component/customer/customer.component';
import {appRoutes} from './app.routes';

@NgModule({
 declarations: [
   AppComponent,
   CustomerComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(appRoutes,{useHash:true})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app.routes.ts

import {RouterModule, Routes } from '@angular/router';
import {AppComponent} from './app.component';
import {CustomerComponent} from './component/customer/customer.component';

export const appRoutes: Routes = [
 { path: '', component: AppComponent },
 { path: 'customer',      component: CustomerComponent },
 {
 path: 'heroes',
 component: AppComponent,
 data: { title: 'Heroes List' }
},
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**', component: AppComponent }];

app.component.html

<h1> {{title}} </h1>
<a router-link="">Home</a>
<a router-link="customer">customer </a>

app.component.ts

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app works!';

}

What configuration is lacking here to get routing in action??

Upvotes: 0

Views: 167

Answers (2)

Muthukumar
Muthukumar

Reputation: 9619

  1. Move <router-outlet> </router-outlet> from index.html to app.component.html

  2. Change all links in app.component.html from <a router-link="customer">customer </a> to <a routerLink="/customer">customer </a>

Upvotes: 0

ramu
ramu

Reputation: 563

plese use the routerlink configuration correctly as i given below. <a [routerLink]="['/customer']">customer</a> will generate the link /customer/

Upvotes: 3

Related Questions