Angular router undefined

Question

I am getting following two errors.

1) router-outlet is not a known element for following code

import {Routes, RouterModule}from "@angular/router"


@Component({
  selector: 'app-root',
  template: `
    <top-menu></top-menu>
    <router-outlet></router-outlet>
  `
})

2) Unexpected closing tag <a> for following code

import {Routes, RouterModule} from "@angular/router"

@Component({
  selector: 'top-menu',
  template: `    
    <a [routerLink]=['new']> New </a>
      <a [routerLink]=['list']> List </a>
  `
})

The routes are defined as follows:

export const routes:Routes = [
  {path:'new', component:MyParaComponent},
  {path:'list', component:MyListComponent}
];

export const appRouterModule =RouterModule.forRoot(routes);

Interestingly, if I add appRouterModule in imports in app.module.ts then I get an error that app.routes.ts (the file where appRouterModule) is defined doesn't export any module.

.../app/app.routes"' has no exported member 'appRouterModule'.

Following is the link to cut-down version in Plunker - plnkr.co/edit/hLME9NSoXeSuLp7MxtGw?p=preview — Manu Chadha
– Manu Chadha, Commented Jul 12, 2017 at 13:41
For simplicity "<a routerLink='new'>New</a>" can be used, if you are not passing any fragment, or dynamic id etc. — Malik Shahzad
– Malik Shahzad, Commented Jul 12, 2017 at 13:42
I originally tried without double quotes but it didnt work either — Manu Chadha
– Manu Chadha, Commented Jul 12, 2017 at 13:47
@Malik is correct. Manu - Have a look at the official routing guide angular.io/guide/router - there is a useful live example on the page, in addition to plenty of info how to use Angular Routing — Steve Land
– Steve Land, Commented Jul 12, 2017 at 14:02

Steve Land · Accepted Answer · 2017-07-12 13:38:48Z

1

Corrected

Part 1: You need to import RouterOutlet from "@angular/router", and instead of importing RouterModule into your component, you should import it into your the parent Module (if you arent already).

Part 2:

<a [routerLink]=['new']> New </a> should be <a [routerLink]="['new']"> New </a>

edited Jul 12, 2017 at 13:38

answered Jul 12, 2017 at 13:09

Steve Land

4,8622 gold badges20 silver badges39 bronze badges

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

1 Comment

Manu Chadha Over a year ago

Following is the link to cut-down version in Plunker - plnkr.co/edit/hLME9NSoXeSuLp7MxtGw?p=preview

Collectives™ on Stack Overflow

Angular router undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related