Angular 子路径延迟加载错误

Question

所以，我的应用程序中现在有 2 个模块。每个都有自己的路由模块。

只有 Module 组件正在加载，其余组件未加载。

我试图获取在应用程序中定义的所有可能的路线，我得到了以下信息，所以我知道这些路线甚至没有被注册，但不知何故我没有收到错误提示 URL 尚未定义。

输出结果如下

/                 create-test.component.ts:20        
/create-test      create-test.component.ts:20
/login            create-test.component.ts:20

我的路由文件如下：

CreateTestRoutingModule

import { NgModule } from "@angular/core";
import { CreateTestComponent } from './create-test.component';
import { RouterModule, Routes } from '@angular/router';
import { DesignTestComponent } from './design-test/design-test.component';
import { PlanTestComponent } from './plan-test/plan-test.component';
import { TestHistoryComponent } from './test-history/test-history.component';
import { QuestionsListComponent } from './questions-list/questions-list.component';


const routes: Routes = [
    {
        path: '',
        component: CreateTestComponent,
        children: [
            {
                path: 'design-test', component: DesignTestComponent
            }, 
            {
                path: 'plan-test', component: PlanTestComponent
            },
            {
                path: 'test-history', component: TestHistoryComponent
            },
            {
                path: 'questions-list', component: QuestionsListComponent
            }
        ]
    }
]

@NgModule({
    imports: [RouterModule.forChild(routes)],


    exports: [RouterModule]
})
export class CreateTestRoutingModule {

}

DashboardRoutingModule

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { HomeComponent } from './home/home.component';
import { SignoutComponent } from './signout/signout.component';
import { AccountComponent } from './account/account.component';


const routes: Routes = [
    {
        path: '',
        component: DashboardComponent,
        children: [
            { path: '', redirectTo: 'home'},
            { path: 'home', component: HomeComponent},
            { path: 'account', component: AccountComponent},
            { path: 'signout', component: SignoutComponent}
        ]
    }
]



@NgModule({
    imports: [RouterModule.forChild(routes)],


exports: [RouterModule]
})
export class DashboardRoutingModule{

}

AppRoutingModule

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './shared/guard/auth.guard';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { path: '', loadChildren: './dashboard/dashboard.module#DashboardModule', canActivate: [AuthGuard]},
  { path: 'create-test', loadChildren: './createtest/create-test.module#CreateTestModule', canActivate: [AuthGuard]},
  { path: 'login', component: LoginComponent}
];

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

exports: [RouterModule]
})
export class AppRoutingModule { }

我想要的最终结果是这样的

/
/login
/home
/account
/signout
/create-test
/create-test/design-test
/create-test/plan-test
/create-test/test-history
/create-test/questions-list

P.S 我想解释一下为什么它不会为不可能的路线抛出错误，以及我如何去 /home 但它不在可能的路线上。我不知道文档如何让我感到困惑。提前致谢！

Answer 1

只有Module组件正在加载，其余没有。

这是因为您的 AppRoutingModule 将所有路由定义为延迟加载并且 angular 尚未有机会加载您的任何延迟加载模块。

原因

您代码中的路由顺序是第一个 '' 路由匹配 any/every url，因此 angular returns 单独第一个条目.

试试下面的代码 -

const routes: Routes = [
  { path: 'create-test', loadChildren: './createtest/create-test.module#CreateTestModule', canActivate: [AuthGuard]},
  { path: 'login', component: LoginComponent},
  { path: '', loadChildren: './dashboard/dashboard.module#DashboardModule', canActivate: [AuthGuard]},

];

Answer 2

所以，如果有人想投反对票也没关系，

但实际问题是我没有在每个模块的 html 模板中添加 <router-outlet> 标签。

因此即使它已经注册了路径，它也无法给出输出。

所以，如果有任何可怜的人正在为同样的问题而战，我建议你先添加 <router-outlet> 标签。

Angular 子路径延迟加载错误

Angular lazy loading error on child paths

lazy-loading

typescript

angular

angular-router