Angular 模塊路由 - 不是路由

Question

我對角度路由和延遲加載模塊非常陌生。

錯誤錯誤：未捕獲（承諾）：錯誤：無法匹配任何路由。 URL 段：'login-admin/admin-dashboard' 錯誤：無法匹配任何路由。 URL 段：'login-admin/admin-dashboard'

我不知道我在哪里收到錯誤。

應用模塊

@NgModule({
  declarations: [
    AppComponent,
    SignupAdminComponent,
    HeadersComponent,
    LoginAdminComponent
  ],
 bootstrap: [AppComponent]

App.Routing.ts

const routes: Routes = [
  { path: '', redirectTo: '/login-admin', pathMatch: 'full'},
  { path: 'login-admin',  component: LoginAdminComponent},
  { path: 'sigup-admin',  component: SignupAdminComponent},  
  { path: '',    
    loadChildren:  './components/dashboards/admin-dashboard/admin-routing.module#AdminRoutingModule'

  }

];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
    // AdminDashboardModule
  ]
})
export class AppRoutingModule { }

admin-routing.module.ts

@NgModule({
  declarations: [
    AdminDashboardComponent,
    SideBarComponent,
  ],
  imports: [
    CommonModule,
    NbLayoutModule,
    NbSidebarModule,
    NbButtonModule,
    RouterModule.forChild(AdminRoutes)
  ],
  exports: [  ]
})
export class AdminRoutingModule { }

admin-routing.ts

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

import { AdminDashboardComponent } from './admin-dashboard.component';
import { LoginAdminComponent } from '../../accounts/admin/login-admin/login-admin.component';
import { SideBarComponent } from './side-bar/side-bar.component';
import { ExtenstionAgentComponent } from './extenstion-agent/extenstion-agent.component';

export const AdminRoutes: Routes = [                                 
      {
        path: '', component: AdminDashboardComponent},
            { path: '', redirectTo: 'admin-dashboard', pathMatch: 'full' },
            { path: 'admin-dashboard', component: AdminDashboardComponent },

];

Answer 1

有幾件事是錯誤的。

據我從您的代碼中了解到，您希望實現以下目標：

您希望擁有一個AdminModule並將所有以/login-admin開頭的路由委托給該模塊。 從那里， AdminModule將接管並創建內部路由。

基於此，您需要在代碼中編輯以下部分

app-routing.module

您已經兩次聲明了根路由 ( '' )，這對於 angular 來說是令人困惑的，並試圖將login-admin路由定義為LoginAdminComponent ，這是AdminModule的工作。

const routes: Routes = [
  { path: '', redirectTo: '/login-admin', pathMatch: 'full'},
  { path: 'login-admin',  component: LoginAdminComponent},
  { path: 'sigup-admin',  component: SignupAdminComponent},  
  { path: '',    
    loadChildren:  './components/dashboards/admin-dashboard/admin-routing.module#AdminRoutingModule'
  }

];

讓我們改變它

const routes: Routes = [
  { path: '', redirectTo: '/login-admin', pathMatch: 'full'},
  { path: 'login-admin', 
    loadChildren:  './components/dashboards/admin-dashboard/admin-routing.module#AdminRoutingModule'},
  { path: 'sigup-admin',  component: SignupAdminComponent}
];

此外，如果您使用 angular v8+，則需要改用以下導入語句。

loadChildren: () => import('./components/dashboards/admin-dashboard/admin-routing.module').then(m => m.AdminRoutingModule)

通過此設置，我們將每個以login-admin開頭的路由委托給AdminRoutingModule 。

讓我們修復AdminRoutingModule

您再次聲明了路線''兩次。 刪除第一個就行了。

export const AdminRoutes: Routes = [                                 
   { path: '', redirectTo: 'admin-dashboard', pathMatch: 'full' },
   { path: 'admin-dashboard', component: AdminDashboardComponent },
];

Answer 2

發生錯誤是因為您嘗試訪問不存在的路由。

您嘗試訪問的路由是login-admin/admin-dashboard並且該路徑不存在。

您必須訪問login-admin才能使用名為LoginComponent的組件獲取視圖。

如果您想訪問AdminDashboardComponent您只需要訪問admin-dashboard 。

它們是兩條不同的路線，並且它們不是嵌套的。