Angular2 - „router-wylot” nie jest znanym elementem

79

Stworzyłem trasy z głębokimi ścieżkami dla dzieci. Dodałem <router-outlet>do komponentu AdminComponent , który zapakowałem w NgModule. Ale po odświeżeniu strony wyskoczył mi ten błąd:

'router-outlet' is not a known element

Może zdarzyło się to, bo zapomniałem zaimportować jakiś moduł do admin.module.ts

Proszę pomóż. Dzięki.

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

}
Станислав П
źródło
Po prostu brakowało mi;
Mehraj Malik

Odpowiedzi:

87

AdminComponentjest częścią AdminComponentModulei nie zaimportowałeś modułu RouterModulewewnętrznego AdminComponentModule:

//  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
źródło
Cześć @yankee Używam funkcji modułu leniwego i oddzieliłem plik app.routing.module.ts. jeśli dodam „import {AppRoutingModule} z” ./app-routing.module ”; i importuj do app.module.ts, a potem znowu mam problem ze stackoverflow.com/questions/49670232/… . Poproś o pomoc, jeśli to możliwe ”
Swapnil Yeole
46

nie wyeksportowałeś RouterModule.

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
Cengkuru Michael
źródło
1
Tak jest. Dziękuję!
Jonca33
7

Dodaj ten kod

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

dla Twojej app.module.ts

Pracował dla mnie.

pulkit219
źródło
Z przyjemnością sir :)
pulkit219
Dzięki, że mi pomogło ... Ogólnie pytam, czy czytacie wszystkie dokumenty ze stron internetowych, czy po prostu wiecie rzeczy z doświadczenia ????
Gvs Akhil
@Akhil Z przyjemnością nie, po prostu wyglądałem jak ty i pomogły mi pewne komentarze. Samo czytanie dokumentacji nigdy nie było dla mnie łatwe!
pulkit219
4

W pliku app.module.ts

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

//and then write within imports
@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent
  ],
  imports: [
    BrowserModule,
    **routing**,
    EmployeeModule
  ],
Kumar Abhishek
źródło
0

To działa dla mnie:

Dodaj schemat [NO_ERRORS_SCHEMA]w AppModule.

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

@NgModule({
  schemas : [NO_ERRORS_SCHEMA]  
})
Kondas Lamar Jnr
źródło
0

app.module.ts

import { MyRoutingModule } from './MyRoutingModulePath';

  @NgModule({
  imports: [
    MyRoutingModule
  ])
profimedica
źródło
Chociaż może to odpowiedzieć na pytanie autorów, brakuje w nim słów wyjaśniających i linków do dokumentacji. Fragmenty surowego kodu nie są zbyt pomocne bez otaczających je fraz. Może się również okazać, że bardzo pomocne może być napisanie dobrej odpowiedzi . Zmień swoją odpowiedź.
witaj
W mojej późnej odpowiedzi nie ma nic oryginalnego. Miałem problemy z wdrażaniem rozwiązań znalezionych w Internecie. Egzostowanie, zagmatwanie i czasochłonność ze względu na moją specyfikę architektoniczną. Szukałem krótkiej odpowiedzi, która wskazywałaby mi rozwiązanie, zamiast uczyć mnie procesu. Kiedy w końcu mi się udało, stało się dla mnie oczywiste, co trudno było zaobserwować na pełnych przykładach. Jasne, jest wiele sposobów na porażkę. Ale wielu zawiedzie tak samo jak ja. Ta odpowiedź jest dla tych, którzy są tak blisko, aby to naprawić, ale daleko im do tego, aby to dobrze.
profimedica