Template parse errors: 'router-outlet' is not a known element

Question

I can not find out why this is happening. From what I can see I am importing everything correctly. I have gone to other questions and have looked this over many times. I am probably missing something very simple and just not seeing it. Can I get some help as to why I am getting this error?

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { DashboardComponent } from '../dashboard/dashboard.component';


@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts: I did not create this from the start of the project and that is why I am probably missing something.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from '../dashboard/dashboard.component';

const routes: Routes = [
  { path: '', component: DashboardComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  declarations: []
})
export class AppRoutingModule {

}

In the app.component.html I have placed the <router-outlet></router-outlet>

that worked. can you please create an answer so i can accept it — Zach Starnes, Mar 22 '18 at 19:58

score 7 · Accepted Answer · edited Mar 23 '18 at 07:04

You should tell angular that you're going to use directives from RouterModule. That said, you should either import RouterModule in AppModule or export RouterModule from AppRoutingModule. The second option is preferable because you keep all related to the routing stuff in one place.

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]   <==== add this
})
export class AppRoutingModule {}

Radonirina Maminiaina · Answer 2 · 2018-03-23T07:59:25.370

You have to exports router module, so your app.module.ts can access to imported modules from app.routing.ts module.

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  declarations: [],
  exports: [RouterModule]
})

In the official documentation it is said:

Finally, re-export the Angular RouterModule by adding it to the module exports array. By re-exporting the RouterModule here and importing AppRoutingModule in AppModule, the components declared in AppModule will have access to router directives such as RouterLink and RouterOutlet.

Template parse errors: 'router-outlet' is not a known element

2 Answers2