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 {

}
Станислав П
quelle
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 {

}
ranakrunal9
quelle
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]
})
Cengkuru Michael
quelle
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.

pulkit219
quelle
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
  ],
Kumar Abhishek
quelle
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]  
})
Kondas Lamar Jnr
quelle
0

app.module.ts

import { MyRoutingModule } from './MyRoutingModulePath';

  @NgModule({
  imports: [
    MyRoutingModule
  ])
profimedica
quelle
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