'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

In `app.module.ts` file `import { RouterModule } from '@angular/router';` and add `RouterModule.forRoot(your_routes)` to imports. — hrdkisback, Jul 26 '18 at 09:08
AppRoutingModule doesn't do anything. You already import RoutingModule in your AppModule. Actually You import it twice. Try to remove AppRoutingModule from your AppModule and make a fresh compile (ng serve) — SplitterAlex, Jul 26 '18 at 09:09
@hrdkisback That is what I have done here: https://github.com/ekstremedia/angular6/blob/master/src/app/app.module.ts — Terje Nesthus, Jul 26 '18 at 09:11

score 26 · Accepted Answer · edited Dec 15 '19 at 08:48

26

I see you are missing RouterModule inside the imports of UIModule

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

edited Dec 15 '19 at 08:48

Philippe Fanaro

6,148
6
38
76

answered Jul 26 '18 at 09:23

Sajeetharan

216,225
63
350
396

1

That is correct, and is a working solution. I mark this as correct answer even though SplitterAlex commented it first, but I cannot mark his answer as correct. Thank you anyway Sajeetharan. – Terje Nesthus Jul 26 '18 at 09:30
1

oh sorry i was checking your code that time :) glad SplitterAlex helped :) – Sajeetharan Jul 26 '18 at 09:31

score 5 · Answer 2 · answered Jul 26 '18 at 09:26

5

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

answered Jul 26 '18 at 09:26

SplitterAlex

2,755
2
20
23

score 2 · Answer 3 · answered May 29 '19 at 08:14

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

answered May 29 '19 at 08:14

李岳芸

21
1

Worked for me, too. – Mohsen Mar 31 '20 at 16:50

score 0 · Answer 4 · edited Aug 07 '19 at 18:15

0

In the folder app.module.ts what i did was I imported the following

import { AppRoutingModule } from './app-routing.module';

also don't forget to add it in the @NgModule

edited Aug 07 '19 at 18:15

Shahbaz A.

4,047
4
34
55

answered Aug 07 '19 at 17:09

user3399358

47
1
2
6

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

4 Answers4