如何在默认情况下使用角度 2 中的延迟加载来加载子路由？答案

【问题标题】：How to load child route by default with lazy loading in angular 2?如何在默认情况下使用角度 2 中的延迟加载来加载子路由？
【发布时间】：2018-07-30 10:20:53
【问题描述】：

我知道这个问题问了很多次，我搜索了很多 SO 问题但无法找到答案，所以只发布我的问题，我的结构如下所示。

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'A',
        pathMatch: 'full'
    },
    {
        path: 'A',
        resolve: {
            DATA: ADataResolver,
        },
        children: [
            {
                path: '',
                redirectTo: 'B',
                pathMatch: 'full'
            },
            {
                path: 'B',
                loadChildren: './b/b.module#BModule'
            }]
    }
]

现在在应用加载时我想加载路径 A/B

我会怎么做？我已经完成了上述事情，但它不起作用。任何帮助表示赞赏。

【问题讨论】：

有什么错误吗？你加router-outlet了吗？
'A' 是一个模块，而 'B' 是模块 A 的一个组件？
@SurenSrapyan 是的，当我直接输入网址时，我已经添加了东西工作
@AkashTantri 不，它们都是模块

标签： angular routing angular2-routing url-routing

【解决方案1】：

我想知道其他地方是否有其他问题。我刚刚修改了我的代码以（基本上）匹配你所拥有的并且它运行良好（见下文）。我有电影，所以那是你的“B”。

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'A',
        pathMatch: 'full'
    },
    {
        path: 'A',
        children: [
            { path: 'welcome', component: WelcomeComponent },
            {
                path: 'movies',
                loadChildren: './movies/movie.module#MovieModule'
            },
            { path: '', redirectTo: 'movies', pathMatch: 'full' }
        ]
    },
    { path: '**', component: PageNotFoundComponent }
];

导航到http://localhost:4200 得到一个URL：http://localhost:4200/A/movies

你可以在这里找到我的代码：https://github.com/DeborahK/MovieHunter-communication/tree/master/MH-Take4

我刚刚修改了我的app-routing.module.ts 并运行了它。

【讨论】：

你有没有试过运行这段代码，因为我设置了同样的东西，但它不工作:(
您是否尝试从我的 github 运行代码？这一切都有效。我刚刚在上周的一次会议上的一次演讲中使用了它，它没有任何问题。
@DeborahK 你能看看我的问题吗：stackoverflow.com/questions/57357145/…。我对多个延迟加载模块有同样的问题。

【解决方案2】：

请检查 B 模块，它也是必需的组件和路由概念。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { AdminComponent } from "../components/admin/admin.component";

export const routes: Routes = [
  {
    path: '', component: AdminComponent 

  }
];

@NgModule({
  declarations: [
    AdminComponent
  ],
  imports: [
    CommonModule, 
     RouterModule.forChild(routes)
  ],
  bootstrap: [AdminComponent]
})
export class BModule { }

【讨论】：

它已经完成但是当我输入 A 时它会重定向到 A/B 但我希望默认情况下它会转到 A/B
@Riturajratan plz try: const appRoutes: Routes = [ { path: '', redirectTo: 'A/B', pathMatch: 'full' },

【解决方案3】：

当您想要延迟加载一个或多个模块直到用户请求这些模块时，应该使用延迟加载。看起来您的场景默认需要 B 模块。你可以直接调用组件：

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'A',
        pathMatch: 'full'
    },
    {
        path: 'A',
        resolve: {
            DATA: ADataResolver,
        },
        children: [
            {
                path: '',
                redirectTo: 'B',
                pathMatch: 'full'
            },
            {
                path: 'B',
                component: 'BComponent'
            }]
    }
]

如果它仍然必须是一个惰性模块，您是否尝试过 enableTracing？路线是否被识别？

【讨论】：

但是当我输入 A 时它会重定向到 A/B 但我希望默认情况下它会转到 A/B
const appRoutes: Routes = [ { path: '', redirectTo: 'A', pathMatch: 'full' }, {path: 'A/B', resolve: { DATA: ADataResolver, } , 组件：'BComponent'}]