子级路由不起作用，应用程序重定向到404页面 [英] Children routing not working and application redirects to the 404 page

问题描述

我已经创建了一个角度应用程序版本7，项目结构是这样的。
应用程序模块具有app-routing.module.ts，而仪表板模块具有dashboard-routing module.ts。在仪表板模块中，布局组件路由具有子组件，即home和admin。

这是我的代码：

AppModule

  import {AppRoutingModule}从'./app-routing.module'; 
从 ./dashboard/dashboard.module导入{DashboardModule}; 
 
从 ./app.component导入{AppComponent}； 
从 ./login/login.component导入{LoginComponent}； 
从 ./page-not-found/page-not-found.component中导入{PageNotFoundComponent}； 
 
 
 @NgModule（{
声明：[
 AppComponent，
 LoginComponent，
 PageNotFoundComponent 
]，
导入：[
 BrowserModule，
 AppRoutingModule，
 DashboardModule 
]，
提供者：[]，
引导程序：[AppComponent] 
}） 
出口类AppModule {} 
  

应用程序路由模块：

 从 @ angular / core导入{NgModule}； 
从 @ angular / router导入{Routes，RouterModule}； 
从 ./login/login.component导入{LoginComponent}； 
从 ./page-not-found/page-not-found.component中导入{PageNotFoundComponent}； 
 
常量路由：路由= [
 {路径：'login'，组件：LoginComponent}，
 {路径：，redirectTo：'dashboard'，pathMatch：'full '}，
 {路径：'**'，组件：PageNotFoundComponent} 
]; 
 
 @NgModule（{
进口：[RouterModule.forRoot（路线）]，
出口：[RouterModule] 
}）
出口类AppRoutingModule { } 
  

仪表板模块文件：

 从'@ angular / core'导入{NgModule}; 
从 @ angular / common导入{CommonModule}； 
从 ./layout/layout.component导入{LayoutComponent}； 
从 ./home/home.component导入{HomeComponent}; 
从 ./admin/admin.component导入{AdminComponent}； 
从 ./dashboard-routing.module导入{DashboardRoutingModule}; 
 
 @NgModule（{
声明：[LayoutComponent，HomeComponent，AdminComponent]，
导入：[
 CommonModule，
 DashboardRoutingModule 
] 
}）
出口类DashboardModule {} 
  

仪表板路由模块

 从 @ angular / core导入{NgModule}； 
从 @ angular / common导入{CommonModule}； 
从 @ angular / router导入{Routes，RouterModule}； 
 
从 ./layout/layout.component导入{LayoutComponent}； 
从 ./home/home.component导入{HomeComponent}; 
从 ./admin/admin.component导入{AdminComponent}； 
 
 
 const仪表板路线：路线= [
 {
路径： dashboard，
组件：LayoutComponent，
子级：[
 {path：``，redirectTo：'home'，pathMatch：'full'}，
 {path：'home'，component：HomeComponent}，
 {path：'admin'，component： AdminComponent} 
] 
} 
]; 
 
 @NgModule（{
声明：[]，
导入：[
 CommonModule，
 RouterModule.forChild（dashboardRoutes）
]， 
出口：[RouterModule] 
}）
出口类DashboardRoutingModule {} 
  

问题是我想路由到localhost：4200上的仪表板布局，但是它总是在每条路由上都转到pageNotFound组件路由。任何人都可以指出问题所在。

StackBlitz上的代码：

https://stackblitz.com/github/Ahsan9981/authGuardApp

所需的输出
< img src = https://i.stack.imgur.com/XJqc9.gif alt =在此处输入图片描述>

解决方案

路由器将按照您导入它们的顺序匹配您的路由，因此，如果在appModule的开头添加通配符/ **以匹配所有路由，则它将在检查之前与该路由匹配

在此示例中进行扩展-如果您以catch开头，则路由器将遍历所有定义的路由，直到找到匹配项为止所有的一切都会停止在那儿，不再前进。因此，在模块的开头（appRoutes）中定义一个catch项将是一个问题。

您的仪表板模块会导入您的仪表板路线，从而在以下位置导入仪表板模块应用模块将确定何时导入仪表板路线。

您需要以您认为匹配的顺序导入路由，并保留最后添加的通配符。

在路由。

如果仍然不清楚，请随时发表评论，我将相应地更新我的答案。 / p>

问候克里斯

I have created an angular application version 7 and project structure is like this. app module have app-routing.module.ts and dashboard module have dashboard-routing module.ts. In dashboard module, the layout component route has child components namely home and admin.

Here is my code:

AppModule

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

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DashboardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App-routing module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

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

dashboard module file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LayoutComponent } from './layout/layout.component';
import { HomeComponent } from './home/home.component';
import { AdminComponent } from './admin/admin.component';
import { DashboardRoutingModule } from './dashboard-routing.module';

@NgModule({
  declarations: [LayoutComponent, HomeComponent, AdminComponent],
  imports: [
    CommonModule,
    DashboardRoutingModule
  ]
})
export class DashboardModule { }

dashboard-routing module.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { LayoutComponent } from './layout/layout.component';
import { HomeComponent } from './home/home.component';
import { AdminComponent } from './admin/admin.component';


const dashboardRoutes: Routes = [
  {
    path: 'dashboard',
    component: LayoutComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent },
      { path: 'admin', component: AdminComponent}
    ]
  }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(dashboardRoutes)
  ],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

Problem is I want to route to dashboard layout on localhost:4200 but it is always going to pageNotFound component route on every route. Can anyone point out what is the issue.

Code on StackBlitz:

https://stackblitz.com/github/Ahsan9981/authGuardApp

Desired output

解决方案

The router will match your routes in the sequence you import them, therefore, if you add a wildcard /** to match all routes in the beginning of your appModule, it will match to this route before checking if any of your other routes match it.

To expand on the example - The router will run through all defined routes until it finds a match, if you begin with a catch all, it will stop there and go no further. Therefore it will be a problem to define a catch all in the beginning of your module (the appRoutes).

Your dashboard module imports your dashboard routes, therefore importing dashboard module in app module will determin when your dashboard routes are imported.

You need to import your routes in the sequence you think it will match, and leave the wildcards to be added lastly. This should always be a fallback with wildcards.

There is an excillent section on this in the documentation for routing.

If there is still something unclear, feel free to comment and i will update my answer accordingly.

Kind regards Chris

这篇关于子级路由不起作用，应用程序重定向到404页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！