'router-outlet' is not a known element in angular 6

Question

I get the following error on a fresh install of angular6 using the angular-cli.

Uncaught Error: Template parse errors: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module.

I followed this guide: https://medium.com/@meemo_86/good-article-beeman-490eaf1399a

And then I followed up on the comment on that article which says to use <router-outlet></router-outlet> instead of <ng-content></ng-content>.

I do those corrections, then I read up on https://angular.io/tutorial/toh-pt5, and do what is stated there.

So now I have a AppRoutingModule, I import that module in app.module.ts, where I also const the routes and added RouterModule.forRoot(appRoutes) to imports.

But I cannot get this error to go away. What am I doing wrong? When I add <router-outler></router-outlet> in my layout.component.htm, the app breaks. I have also searched this topic here and tried several changes but nothing seems to work.

Full source code is here:

https://github.com/ekstremedia/angular6

Answer 1

I see you are missing RouterModule inside the imports of UIModule

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [LayoutComponent, HeaderComponent, FooterComponent],
  exports: [LayoutComponent]
})
export class UiModule { }

Answer 2

I met the same problem too. And I already imported the RouterModule inside UIModule, still doesn't work. But after I restart the app, it worked, no more errors.

So, what you should do is: 1. Import the RouterModule inside UIModule; 2. Restart your app

Answer 3

You are getting the error because you are using the router-outlet component in the UIModule and didn't import the RouterModule inside UIModule.