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 {

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

}
ranakrunal9
fuente
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]
})
Cengkuru Michael
fuente
1
Sí señor. ¡Gracias!
Jonca33
7

Agregar este código

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

para usted app.module.ts

Trabajó para mi.

pulkit219
fuente
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
  ],
Kumar Abhishek
fuente
0

Esto funciona para mi:

Agregue esquema [NO_ERRORS_SCHEMA]en AppModule.

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

@NgModule({
  schemas : [NO_ERRORS_SCHEMA]  
})
Kondas Lamar Jnr
fuente
0

app.module.ts

import { MyRoutingModule } from './MyRoutingModulePath';

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