Angular2 - 'router-outlet' no es un elemento conocido


79

Creé rutas con caminos infantiles profundos. Añadí <router-outlet>a la AdminComponent componente que he envuelto en NgModule. Pero después de actualizar la página recibí este error:

'router-outlet' is not a known element

Tal vez ocurrió porque olvidé importar algún módulo a admin.module.ts

Por favor ayuda. Gracias.

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

}

Sólo me faltaba un;
Mehraj Malik

Respuestas:


87

AdminComponentes parte del módulo interno AdminComponentModuley no lo ha importado :RouterModuleAdminComponentModule

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

}

Hola @yankee Estoy usando la función de módulo perezoso y he separado el archivo app.routing.module.ts. si incluyo 'import {AppRoutingModule} desde' ./app-routing.module '; e importar en app.module.ts, luego me enfrento a un problema de stackoverflow.com/questions/49670232/… . Solicite su ayuda si es posible '
Swapnil Yeole

46

no exportaste el RouterModule.

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

1
Sí señor. ¡Gracias!
Jonca33

7

Agregar este código

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

para usted app.module.ts

Trabajó para mi.


Mi placer señor :)
pulkit219

Gracias, me ayudó ... En general, pregunto: ¿¿¿Leen todos los documentos de los sitios web o simplemente saben cosas por experiencia?
Gvs Akhil

@Akhil Es un placer no, simplemente miré hacia arriba como tú y algún comentario me ayudó. ¡Leer documentación nunca ha sido fácil para mí!
pulkit219

4

En su archivo app.module.ts

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

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

0

Esto funciona para mi:

Agregue esquema [NO_ERRORS_SCHEMA]en AppModule.

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

@NgModule({
  schemas : [NO_ERRORS_SCHEMA]  
})

0

app.module.ts

import { MyRoutingModule } from './MyRoutingModulePath';

  @NgModule({
  imports: [
    MyRoutingModule
  ])

Si bien esto podría responder a la pregunta de los autores, carece de algunas palabras explicativas y enlaces a la documentación. Los fragmentos de código sin formato no son muy útiles sin algunas frases a su alrededor. También puede resultarle muy útil cómo escribir una buena respuesta . Edite su respuesta.
hola

No hay nada original en mi respuesta tardía. Luché por implementar soluciones que se encuentran en Internet. Exostante, confuso y costoso en tiempo debido a mis particularidades arquitectónicas. Estaba buscando una respuesta corta que me indicara la solución en lugar de enseñarme el proceso. Después de que finalmente lo logré, se volvió obvio para mí lo que era difícil de observar en ejemplos completos. Seguro, hay muchas formas de fallar. Pero muchos fracasarán de la misma manera que yo. Esta respuesta es para aquellos que están tan cerca de solucionarlo pero lejos de hacerlo bien.
profimedica
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.