Angular 2 - Router-Outlet не является известным элементом

Итак, я уже сделал много поиска по этой теме, но я не могу найти ошибку. Я получил ошибку <router-outlet> is not a known element, когда пытаюсь внедрить маршрутизатор.

Вот мой 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 { }

И мой 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 { }

Вот мой шаблон:

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

Все кажется хорошим, и когда я провел поиск, у меня, кажется, было именно то, что я должен сделать, чтобы все заработало.

Спасибо !


angular router-outlet
person Alex Caron    schedule 12.03.2018    source источник
comment
вы пропустили объявление rootComponent в массиве объявлений @NgModule   -  person Vikas    schedule 12.03.2018
comment
@ Алекс Карон, посмотрим, решит ли это проблему?   -  person Vikas    schedule 12.03.2018

Ответы (1)


arrow_upward
0
arrow_downward

В вашем app.module.ts я предполагаю, что ваш RootComponent - это то, что обычно AppComponent в большинстве приложений Angular, поскольку это компонент, который вы загружаете в корне вашего приложения.

Чтобы использовать компонент, вы должны сначала зарегистрировать его в модуле, объявив его. В вашем app.module.ts добавьте RootComponent к вашему массиву объявлений.

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