在angular 2中，默认情况下如何使用惰性加载加载子路由？

我知道这个问题被问了很多次，我已经搜索了很多问题，但找不到答案，所以只需发布我的问题，我的结构如下

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

---

我该怎么做？我做了以上的事情，但它不起作用。非常感谢您的帮助。

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

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

---

如果它仍然必须是一个惰性模块，您是否尝试启用跟踪？路由是否已被识别？

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

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

---

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

请检查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 { }

---

请检查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 { }

---

我想知道其他地方是否出了问题。我刚刚修改了我的代码，使之基本上与您的代码相匹配，它工作得很好，请参见下文。我有电影，所以那是你的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

您可以在此处找到我的代码：

---

我刚刚修改了我的app-routing.module.ts，如上图所示并运行了它。

我想知道其他地方是否出了问题。我刚刚修改了我的代码，使之基本上与您的代码相匹配，它工作得很好，请参见下文。我有电影，所以那是你的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

您可以在此处找到我的代码：

---

---

我刚刚修改了app-routing.module.ts，如上图所示并运行了它。

有错误吗？您是否添加了路由器出口？“A”是模块，“B”是模块A的一个组件？@SurenSrapyan是的，我是在直接放置url时添加的works@AkashTantri不，它们都是模块式的，有错误吗？您是否添加了路由器出口？“A”是模块，“B”是模块A的一个组件？@SurenSrapyan是的，我是在直接放置url时添加的works@AkashTantri不，它们都是模块，但当我输入A时，它将重定向到A/B，但我希望在默认情况下，它将转到A/B CONST appRoutes:Routes=[{path:，redirectTo:'A'，pathMatch:'full'}，{path:'A/B'，resolve:{DATA:ADataResolver，}，component:'BComponent'}]，但当我输入A时，它将重定向到A/B，但我希望默认情况下它将转到A/Bconst批准：Routes=[{path:，redirectTo:'A'，pathMatch:'full'}，{path:'A/B'，resolve:{DATA:ADataResolver，}，component:'BComponent'}]已经完成了，但当我输入A时，它将重定向到A/B，但默认情况下，它将转到A/B@Riturajratanplz try:const-appRoutes:Routes=[{path:，redirectTo:'A/B'，pathMatch:'full'}，它已经完成了，但当我输入A时，它将重定向到A/B，但我希望默认情况下它将转到A/B@Riturajratanplz try:const appRoutes:Routes=[{path:，重定向到：'A/B'，pathMatch:'full'}，你试过运行此代码吗？bse我已经设置了相同的东西，但它不起作用：你试过从我的github运行代码吗？一切正常。我在上周的一次会议上的一次演讲中使用了它，它没有问题。@DeborahK你能看看我的问题吗：。我对多个延迟加载模块也有同样的问题。你呢尝试运行此代码bse我设置了相同的东西，但它不起作用：您是否尝试从我的github运行此代码？一切正常。我在上周的一次会议上的一次演讲中使用了它，它工作正常。@DeborahK能否请您看看我的问题：。我对多个延迟加载模块也有相同的问题。