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

router.navigate angular 5

Question

Creé rutas con caminos secundarios profundos. Agregué <router-outlet> al componente AdminComponent que envolví 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 {

}

Answer 1

Agrega este código

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

a su app.module.ts

Trabajó para mi.

Answer 2

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
  ],

Answer 3

Esto funciona para mi:

Agregue el esquema [NO_ERRORS_SCHEMA] en AppModule.

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

@NgModule({
  schemas : [NO_ERRORS_SCHEMA]  
})

Answer 4

app.module.ts

import { MyRoutingModule } from ''./MyRoutingModulePath'';

  @NgModule({
  imports: [
    MyRoutingModule
  ])

Answer 5

no exportó el RouterModule.

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

Answer 6

AdminComponent es parte de AdminComponentModule y no ha importado RouterModule dentro del módulo 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 {

}