'router-outlet' is not a known element

后端 未结 12 1121
无人及你
无人及你 2021-01-30 19:36

I have a mvc 5 project with a angular frontend . I wanted to add routing as described in this tutorial https://angular.io/guide/router. So in my _Layout.cshtml I ad

相关标签:
12条回答
  • 2021-01-30 19:46

    There are two ways. 1. if you want to implement app.module.ts file then:

    import { Routes, RouterModule } from '@angular/router';
    
    const appRoutes: Routes = [
      { path: '', component: HomeComponent },
      { path: 'user', component: UserComponent },
      { path: 'server', component: ServerComponent }
    ];
    
    @NgModule({
      imports: [
        RouterModule.forRoot(appRoutes)
      ]
    })
    export class AppModule { }

    1. if you want to implement app-routing.module.ts (Separated Routing Module) file then:

    //app-routing.module.ts
    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    
    const appRoutes: Routes = [
      { path: '', component: HomeComponent },
      { path: 'users', component: UsersComponent },
      { path: 'servers', component: ServersComponent }
    ];
    
    @NgModule({
      imports: [
        RouterModule.forRoot(appRoutes)
      ],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }
    
    //................................................................
    
    //app.module.ts
    import { AppRoutingModule } from './app-routing.module';
    
    @NgModule({
      imports: [
        AppRoutingModule
      ]
    })
    export class AppModule { }

    0 讨论(0)
  • 2021-01-30 19:48

    Assuming you are using Angular 6 with angular-cli and you have created a separate routing module which is responsible for routing activities - configure your routes in Routes array.Make sure that you are declaring RouterModule in exports array. Code would look like this:

    @NgModule({
          imports: [
          RouterModule,
          RouterModule.forRoot(appRoutes)
         // other imports here
         ],
         exports: [RouterModule]
    })
    export class AppRoutingModule { }
    
    0 讨论(0)
  • 2021-01-30 19:48

    It works for me, when i add following code in app.module.ts

    @NgModule({
    ...,
       imports: [
         AppRoutingModule
        ],
    ...
    })
    
    0 讨论(0)
  • 2021-01-30 19:53

    Try this:

    Import RouterModule into your app.module.ts

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

    Add RouterModule into your imports []

    like this:

     imports: [    RouterModule,  ]
    
    0 讨论(0)
  • 2021-01-30 19:53

    In your app.module.ts file

    import { RouterModule, Routes } from '@angular/router';
    
    const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/dashboard',
        pathMatch: 'full',
        component: DashboardComponent
    },  
    {
        path: 'dashboard',
        component: DashboardComponent
    }
    ];
    
    @NgModule({
    imports: [
        BrowserModule,
        RouterModule.forRoot(appRoutes),
        FormsModule               
    ],
    declarations: [
        AppComponent,  
        DashboardComponent      
    ],
    bootstrap: [AppComponent]
    })
    export class AppModule {
    
    }
    

    Add this code. Happy Coding.

    0 讨论(0)
  • 2021-01-30 19:58

    Here is the Quick and Simple Solution if anyone is getting the error:

    "'router-outlet' is not a known element" in angular project,

    Then,

    Just go to the "app.module.ts" file & add the following Line:

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

    And also 'AppRoutingModule' in imports.

    0 讨论(0)
提交回复
热议问题