Angular2 - 'Router-Outlet' ist kein bekanntes Element


79

Ich habe Routen mit tiefen untergeordneten Pfaden erstellt. Ich <router-outlet>habe der AdminComponent- Komponente hinzugefügt , die ich in NgModule eingeschlossen habe. Aber nach dem Aktualisieren der Seite bekam ich diesen Fehler:

'router-outlet' is not a known element

Vielleicht ist es passiert , weil ich vergessen habe, ein Modul in admin.module.ts zu importieren

Bitte helfen Sie. 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 {

}

Ich habe gerade einen;
Mehraj Malik

Antworten:


87

AdminComponentist Teil von AdminComponentModuleund Sie haben nicht RouterModuleinnerhalb des AdminComponentModuleModuls 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 {

}

Hallo @yankee, ich verwende die Lazy-Modul-Funktion und habe die Datei app.routing.module.ts getrennt. wenn ich 'import {AppRoutingModule} from' ./app-routing.module 'einbinde; und importiere in app.module.ts dann wieder ich stoße auf stackoverflow.com/questions/49670232/… Problem.
Bitten Sie

46

Sie haben das RouterModule nicht exportiert.

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

1
Jawohl. Danke!
Jonca33

6

Fügen Sie diesen Code hinzu

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

zu deinem app.module.ts

Hat für mich gearbeitet.


Es ist mir ein Vergnügen, Sir :)
pulkit219

Danke, es hat mir geholfen ... Im Allgemeinen fragen Sie, ob Sie alle Dokumente von Websites lesen oder nur Dinge aus Erfahrung wissen ????
Gvs Akhil

@Akhil Es war mir ein Vergnügen, nein, ich sah einfach so aus wie du und ein Kommentar hat mir geholfen. Nur die Dokumentation zu lesen war für mich nie einfach!
pulkit219

4

In Ihrer Datei app.module.ts

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

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

0

Das funktioniert bei mir:

Fügen Sie ein Schema [NO_ERRORS_SCHEMA]in AppModule hinzu.

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

@NgModule({
  schemas : [NO_ERRORS_SCHEMA]  
})

0

app.module.ts

import { MyRoutingModule } from './MyRoutingModulePath';

  @NgModule({
  imports: [
    MyRoutingModule
  ])

Dies könnte zwar die Frage des Autors beantworten, es fehlen jedoch einige erklärende Wörter und Links zur Dokumentation. Rohcode-Schnipsel sind ohne einige Ausdrücke nicht sehr hilfreich. Möglicherweise ist es auch sehr hilfreich , eine gute Antwort zu schreiben . Bitte bearbeiten Sie Ihre Antwort.
Gelb

In meiner späten Antwort ist nichts Originelles. Ich hatte Probleme, über das Internet gefundene Lösungen zu implementieren. Exosting, verwirrend und zeitaufwändig wegen meiner architektonischen Besonderheiten. Ich suchte nach einer kurzen Antwort, um mich auf die Lösung hinzuweisen, anstatt mir den Prozess beizubringen. Nachdem ich es endlich geschafft hatte, wurde mir klar, was es schwierig war, in vollständigen Beispielen zu beobachten. Sicher, es gibt viele Möglichkeiten, um zu scheitern. Aber viele werden genauso scheitern wie ich. Diese Antwort ist für diejenigen, die so nah dran sind, es zu beheben, aber weit davon entfernt, es richtig zu machen.
profimedica
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.