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

Question

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 {

}

I was just missing a `;` – Mehraj Malik Jan 13 '18 at 13:46 — Mehraj Malik, Jan 13 '18 at 13:46

score 88 · Accepted Answer · edited May 17 '18 at 13:45

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 {

}

Hi @yankee I am using lazy module feature and I have separated app.routing.module.ts file. if I include 'import { AppRoutingModule } from './app-routing.module'; and import in app.module.ts then again I face https://stackoverflow.com/questions/49670232/routermodule-forroot-called-twice issue. Request you to help if possible ' — Swapnil Yeole, Jul 23 '20 at 14:30

score 46 · Answer 2 · edited Jul 23 '18 at 22:46

46

you did not export the RouterModule.

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

edited Jul 23 '18 at 22:46

Frederik Struck-Schøning

12,981
8
59
68

answered Jun 07 '17 at 02:13

Cengkuru Michael

4,590
1
33
33

score 7 · Answer 3 · edited Jul 23 '18 at 22:46

7

Add this code

import { provideRoutes} from '@angular/router';

to your app.module.ts

Worked for me.

edited Jul 23 '18 at 22:46

Frederik Struck-Schøning

12,981
8
59
68

answered Mar 12 '17 at 03:46

pulkit219

77
1
5

score 3 · Answer 4 · edited Jul 23 '18 at 22:46

3

In your app.module.ts file

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

//and then write within imports
@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent
  ],
  imports: [
    BrowserModule,
    **routing**,
    EmployeeModule
  ],

edited Jul 23 '18 at 22:46

Frederik Struck-Schøning

12,981
8
59
68

answered Sep 29 '17 at 07:58

Kumar Abhishek

3,004
33
29

score 1 · Answer 5 · edited Aug 30 '18 at 10:31

1

This works for me:

Add schema [NO_ERRORS_SCHEMA] in AppModule.

import { NO_ERRORS_SCHEMA } from '@angular/core';

@NgModule({
  schemas : [NO_ERRORS_SCHEMA]  
})

edited Aug 30 '18 at 10:31

Powkachu

2,170
2
26
36

answered Aug 30 '18 at 08:20

Kondas Lamar Jnr

143
1
11

score -1 · Answer 6 · answered Sep 12 '18 at 06:32

-1

app.module.ts

import { MyRoutingModule } from './MyRoutingModulePath';

  @NgModule({
  imports: [
    MyRoutingModule
  ])

answered Sep 12 '18 at 06:32

profimedica

2,716
31
41

While this might answer the authors question, it lacks some explaining words and links to documentation. Raw code snippets are not very helpful without some phrases around it. You may also find [how to write a good answer](https://stackoverflow.com/help/how-to-answer) very helpful. Please edit your answer. – hellow Sep 12 '18 at 08:28
There is nothing original in my late answer. I struggled implementing solutions found over the internet. Exosting, confusing and time expensive because of my architectural particularities. I was looking for a short answer to point me to the solution instead of teaching me the process. After I finally managed it, it became obvious for me what it was difficult to observe in full examples. Sure, there are many ways to fail. But many will fail the same way as me. This answer is for those that are so close to fix it but far from getting it right. – profimedica Sep 12 '18 at 22:25

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

6 Answers6