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

Question

When i start the angular application i get the following error,

Error: Template parse errors:
'router-outlet' is not a known element
.....
ng:///LayoutModule/LayoutComponent.html

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    AppRoutesModule,
    LayoutModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routes.module.ts

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

layout.module.ts

@NgModule({
  imports: [],
  declarations: [LayoutComponent, HeaderComponent]
})
export class LayoutModule { }

I did not import RouterModule in LayoutModule intentionally because the AppRoutesModule exports it already which should be available in the LayoutModule.

Is there any reason why it's not working?

But the `LayoutModule` *doesn't* import the `AppRoutesModule`. — jonrsharpe, Jun 26 '18 at 13:08
my understanding was, if i import something in root module, then it's available in all it's feature modules ( eagerly loaded ). For eg, i need to only import `HttpClientModule` only on the root module then it's automatically available in the `core` , `layout` etc.. pls correct me if i am wrong — JPS, Jun 26 '18 at 13:19
@DRB Yes, your understanding is true, but `AppRouterModule` is not root module, `AppModule` is. So, this makes `LayoutModule` a sibling of `AppRoutesModule`, as they are not linked in any way but both are imported in `AppModule` — Abhishek Jaiswal, Jun 26 '18 at 18:06

Abhishek Jaiswal · Answer 1 · 2018-06-26T14:40:33.827

2

LayoutComponent is part of LayoutModule, So, Import RouterModule in LayoutModule. So that, angular recognizes LayoutModule as a part of RouterModule.

OR

Make AppRoutesModule a part of LayoutModule, by importing it in LayoutModule

'export' keyword allow class to be exported and 'import' keyword actually import any already exported class.

edited Jun 26 '18 at 14:40

answered Jun 26 '18 at 13:24

Abhishek Jaiswal

243
1
18

exactly, but author probably want's to have that router outlet in the whole app, in that case he probably find useful my answer :) – Sh. Pavel Jun 26 '18 at 13:26
@Sh. Pavel RouterModule is already imported in main module inside the provided code. – Abhishek Jaiswal Jun 26 '18 at 13:35
I guess AppRoutesModule and LayoutModule are not linked, So, its important to import RouterModule in both files. – Abhishek Jaiswal Jun 26 '18 at 14:38

score 1 · Answer 2 · answered Jun 26 '18 at 13:11

I think you should to import RouterModule to your main module. Because you Main module does not see it, even if you exporting it from another module.

Your main module:

...
imports: [... RouterModule.forRoot(routes)], ...

In that case it would be visible globally.

score 0 · Answer 3 · answered Jun 26 '18 at 14:12

0

You forgot to import AppRoutesModule in LayoutModule. Updated LayoutModule is as follows:

layout.module.ts

@NgModule({
  imports: [AppRoutesModule],
  declarations: [LayoutComponent, HeaderComponent]
})
export class LayoutModule { }

answered Jun 26 '18 at 14:12

lifetimeLearner007

643
6
17

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

3 Answers3