Angular2 - 'router-outlet' ist kein bekanntes Element

Question

Ich habe Routen mit tiefen Child-Pfaden erstellt. Ich fügte <router-outlet> der AdminComponent Komponente hinzu, die ich in NgModule einwickelte. Aber nachdem die Seite aktualisieren habe ich diesen Fehler:

'router-outlet' is not a known element 

Vielleicht kam es, weil ich einige Modul admin.module.ts importieren vergessen

Bitte helfen. Vielen Dank.

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 und 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 { 

} 

Answer 1

AdminComponent ist Teil AdminComponentModule und Sie haben nicht RouterModule innerhalb AdminComponentModule Modul importiert:

// 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 { 

} 

Answer 2

diesen Code hinzufügen

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

zu Ihrem app.module.ts

Arbeitete für mich.

Answer 3

Sie haben das RouterModul nicht exportiert.

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

Answer 4

In Ihrem app.module.ts Datei

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

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