Angular 2 - Router-Outlet is not a known element

Question

So, I've already made a lot of search on this subject but I can't find the bug. I got the error <router-outlet> is not a known element when I'm trying to implement a router.

Here is my app-routing.module.ts :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent},
];

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

And my app.module.ts :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';


// Declarations
import { RootComponent } from './root/root.component';
import { DashboardComponent } from './dashboard/dashboard.component';

// Imports
import { HttpClientModule } from '@angular/common/http';
import { HttpClientJsonpModule } from '@angular/common/http';
import { DalModule } from './dal/dal.module';
import { RootModule } from './root/root.module';
import { TranslationModule } from './translation/translation.module';
import { AppRoutingModule } from './app-routing.module';


@NgModule({
    declarations: [DashboardComponent],
    imports: [
        DalModule,
        FormsModule,
        BrowserModule,
        HttpClientModule,
        HttpClientJsonpModule,
        RootModule,
        AppRoutingModule,
        HttpModule,
        RouterModule
    ],
    providers: [],
    bootstrap: [RootComponent]
})
export class AppModule { }

Here is my template :

<div class="content">
    <div class="container-fluid">
       <router-outlet></router-outlet>
    </div>
</div>

All seems good and when I made my searches, I seem to have exactly what I should do to make it work.

Thanks !

you missed declaring rootComponent in the @NgModule declarations array — Vikas, Mar 12 '18 at 19:28

score 0 · Answer 1 · answered Mar 13 '18 at 01:23

In your app.module.ts I am guessing your RootComponent is what is typically AppComponent in most Angular apps since that is the component you're bootstrapping at the root of your application.

In order to use a component you must first register it with the module by declaring it. In your app.module.ts add RootComponent to your declarations array.

@NgModule({
    declarations: [RootComponent, DashboardComponent],
    imports: [
        DalModule,
        FormsModule,
        BrowserModule,
        HttpClientModule,
        HttpClientJsonpModule,
        RootModule,
        AppRoutingModule,
        HttpModule,
        RouterModule
    ],
    providers: [],
    bootstrap: [RootComponent]
})

Angular 2 - Router-Outlet is not a known element

1 Answers1