Menu
I created routes with deep child paths. I added <router-outlet> to the AdminComponent component which I wrapped into NgModule. But after refreshing the page I got this error:
'router-outlet' is not a known element Maybe it occurred because I forgot import some module to admin.module.ts
Please help. Thanks.
app.routes.ts
export const routes: Routes = [ { path: '', component: AppComponent, children: [ { path: '', component: LoginComponent }, { path: 'admin', component: AdminComponent }, { path: 'user', component: UserComponent }, { path: 'there', component: ThereComponent } ] } ] app.module.ts
@NgModule({ imports: [ BrowserModule, AppRoutes, FormsModule, ReactiveFormsModule, HttpModule, RouterModule, TranslateModule.forRoot({ provide: TranslateLoader, useFactory: (http: Http) => { return new TranslateStaticLoader(http, './src/assets/i18n', '.json') }, deps: [Http] }), UserComponentModule, AdminComponentModule, LoginComponentModule, ThereComponentModule, DashboardComponentModule ], declarations: [ AppComponent ], providers: [ FormBuilder ], bootstrap: [AppComponent] }) admin.component.ts and admin.module.ts
// admin.component.ts import {Component} from "@angular/core"; @Component({ selector: 'admin', template: "<router-outlet></router-outlet>", }) export class AdminComponent { constructor() { } } // admin.module.ts const ADMIN_DECLARATION = [ AdminComponent ]; @NgModule({ imports: [ BrowserModule, TranslateModule, FormsModule, ReactiveFormsModule ], declarations: [ ADMIN_DECLARATION ], exports: [ ADMIN_DECLARATION ], providers: [ TranslateService, FormBuilder ] }) export class AdminComponentModule { } 
349
html:1:1 - error NG8001: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.
The Router-Outlet is a directive that's available from the router library where the Router inserts the component that gets matched based on the current browser's URL. You can add multiple outlets in your Angular application which enables you to implement advanced routing scenarios.
Debugging the errorlinkUse the element name in the error to find the file(s) where the element is being used. Check that the name and selector are correct. Make sure that the component is correctly imported inside your NgModule or standalone component, by checking its presence in the imports field.
import { RouterModule} from '@angular/router' RouterModule refers to the forRoot which takes an input as an array, which in turn has the object of the path and the component. Path is the name of the router and component is the name of the class, i.e., the component created.
AdminComponent is part of AdminComponentModule and you have not imported RouterModule inside AdminComponentModule module:
// admin.component.ts import {Component} from "@angular/core"; @Component({ selector: 'admin', template: "<router-outlet></router-outlet>", }) export class AdminComponent { constructor() { } } // admin.module.ts const ADMIN_DECLARATION = [ AdminComponent ]; @NgModule({ imports: [ BrowserModule, TranslateModule, RouterModule, FormsModule, ReactiveFormsModule ], declarations: [ ADMIN_DECLARATION ], exports: [ ADMIN_DECLARATION ], providers: [ TranslateService, FormBuilder ] }) export class AdminComponentModule { } you did not export the RouterModule.
@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
