Question

我的路线曾经在一起时都可以正常工作，找不到的路线

    { path: '**', component: PageNotFoundComponent}

位于最后一个捕获其他未定义路径的位置。

将配方路径移至其自己的模块后，这些路径将不再被调用。而是，调用pagenotfound。

如果我从根路由中删除PageNotFoundComponent路由，则一切正常。关于这里发生的事情有什么想法吗？

这是根应用程序路由模块：

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

    import { ShoppingListComponent } from './shopping-list/shopping-list.component';
    import { PageNotFoundComponent } from './errors/page-not-found/page-not-found.component';
    import { AuthComponent } from './auth/auth.component';

    const appRoutes: Routes = [
      { path: '', redirectTo: 'recipes', pathMatch: 'full' },
      { path: 'shopping-list', component: ShoppingListComponent },
      { path: 'auth', component: AuthComponent },
      { path: '**', component: PageNotFoundComponent}
    ];

    @NgModule({
      imports: [RouterModule.forRoot(appRoutes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule {
      OnInit() {
        console.log(appRoutes);
      }
    }

这是子配方路由模块：

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { RecipesComponent } from './recipes.component';
    import { AuthGuard } from '../auth/auth.guard';
    import { RecipeStartComponent } from './recipe-start/recipe-start.component';
    import { RecipeEditComponent } from './recipe-edit/recipe-edit.component';
    import { RecipeDetailComponent } from './recipe-detail/recipe-detail.component';
    import { RecipesResolverService } from './recipes-resolver.service';

    const routes: Routes = [
      {
        path: 'recipes', component: RecipesComponent, canActivate: [AuthGuard] , children: [
          { path: '', component: RecipeStartComponent },
          { path: 'new', component: RecipeEditComponent },
          {
            path: ':id',
            component: RecipeDetailComponent,
            resolve: [RecipesResolverService]
          },
          {
            path: ':id/edit',
            component: RecipeEditComponent,
            resolve: [RecipesResolverService]
          },
        ]
      }
    ];

    @NgModule({
      declarations: [
      ],
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class RecipesRoutingModule {

    }

感谢您抽出宝贵的时间来做这件事，任何想法都将不胜感激。

Answer 1

我解决了延迟加载所有路由，然后在末尾添加PageNotFound路由'**'的问题，希望这对遇到相同问题的任何人有帮助：

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

    import { PageNotFoundComponent } from './errors/page-not-found/page-not-found.component';

    // If new and :id children were inverted that would make angular take new as id
    // ant that would break the app, the order of the routes is very important
    // that's why the 404 PageNotFoundComponent goes the last one
    const appRoutes: Routes = [
      { path: '', redirectTo: 'recipes', pathMatch: 'full' },
      { path: 'recipes', loadChildren: () => import('./recipes/recipes.module').then(m => m.RecipesModule) },
      { path: 'shopping-list', loadChildren: () => import('./shopping-list/shopping-list.module').then( m => m.ShoppingListModule) },
      { path: 'auth', loadChildren: () => import('./auth/auth.module').then( m => m.AuthModule) },
      { path: '**', component: PageNotFoundComponent }
    ];

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

    }

将路由外包给组件后触发了根路由中的PageNotFound路由

1 个答案: