Angular 2如何定义'；它也是懒洋洋的

我试图让懒惰加载为我的应用程序工作，但这是一个又一个问题。我已经得到了延迟加载的主要路径，即

/admin

，现在我想添加另一个路径，即

/admin/login

所以我这样做了：

管理路由器模块.ts

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: AdminAreaComponent,
        children: [
          {
            path: 'login',
            loadChildren: 'app/+admin-area/pages/login/login.module#LoginModule'
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    AdminAreaComponent
  ]
})
export class AdminAreaRouterModule {}

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

// Global modules
import {ComponentsModule, SharedModule} from '../../shared';

// Components
import {LoginComponent} from '../login.component';

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: LoginComponent
      }
    ])
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    LoginComponent
  ]
})
export class LoginRouterModule {}

import {NgModule} from '@angular/core';

import {ComponentsModule, SharedModule} from '../../../shared';
import {LoginComponent} from './login.component';
import {LoginRouterModule} from './router';

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    LoginRouterModule
  ],
  exports: [
    ComponentsModule,
    SharedModule,
    LoginRouterModule
  ]
})

export class LoginModule {}

@NgModule({
  imports: [
    RouterModule.forChild({ path: '', component: LoginComponent })
    ComponentsModule,
    SharedModule
  ],
  exports: [
    ComponentsModule,
    SharedModule
  ],
  declarations: [
    LoginComponent
  ]
})

export class LoginModule {}

登录路由器.module.ts

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: AdminAreaComponent,
        children: [
          {
            path: 'login',
            loadChildren: 'app/+admin-area/pages/login/login.module#LoginModule'
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    AdminAreaComponent
  ]
})
export class AdminAreaRouterModule {}

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

// Global modules
import {ComponentsModule, SharedModule} from '../../shared';

// Components
import {LoginComponent} from '../login.component';

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: LoginComponent
      }
    ])
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    LoginComponent
  ]
})
export class LoginRouterModule {}

import {NgModule} from '@angular/core';

import {ComponentsModule, SharedModule} from '../../../shared';
import {LoginComponent} from './login.component';
import {LoginRouterModule} from './router';

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    LoginRouterModule
  ],
  exports: [
    ComponentsModule,
    SharedModule,
    LoginRouterModule
  ]
})

export class LoginModule {}

@NgModule({
  imports: [
    RouterModule.forChild({ path: '', component: LoginComponent })
    ComponentsModule,
    SharedModule
  ],
  exports: [
    ComponentsModule,
    SharedModule
  ],
  declarations: [
    LoginComponent
  ]
})

export class LoginModule {}

login.module.ts

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: AdminAreaComponent,
        children: [
          {
            path: 'login',
            loadChildren: 'app/+admin-area/pages/login/login.module#LoginModule'
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    AdminAreaComponent
  ]
})
export class AdminAreaRouterModule {}

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

// Global modules
import {ComponentsModule, SharedModule} from '../../shared';

// Components
import {LoginComponent} from '../login.component';

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: LoginComponent
      }
    ])
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    LoginComponent
  ]
})
export class LoginRouterModule {}

import {NgModule} from '@angular/core';

import {ComponentsModule, SharedModule} from '../../../shared';
import {LoginComponent} from './login.component';
import {LoginRouterModule} from './router';

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    LoginRouterModule
  ],
  exports: [
    ComponentsModule,
    SharedModule,
    LoginRouterModule
  ]
})

export class LoginModule {}

@NgModule({
  imports: [
    RouterModule.forChild({ path: '', component: LoginComponent })
    ComponentsModule,
    SharedModule
  ],
  exports: [
    ComponentsModule,
    SharedModule
  ],
  declarations: [
    LoginComponent
  ]
})

export class LoginModule {}

但问题是，只要我添加

子项

部分，

/admin

就会停止一起工作，抛出的错误

无法匹配任何路由。URL段：“管理员”

---

这不是定义延迟加载路由的子路由的方式吗？如何修复它？

您需要在LoginModule中定义一个空路由

login.module.ts

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: AdminAreaComponent,
        children: [
          {
            path: 'login',
            loadChildren: 'app/+admin-area/pages/login/login.module#LoginModule'
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    AdminAreaComponent
  ]
})
export class AdminAreaRouterModule {}

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

// Global modules
import {ComponentsModule, SharedModule} from '../../shared';

// Components
import {LoginComponent} from '../login.component';

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: LoginComponent
      }
    ])
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    LoginComponent
  ]
})
export class LoginRouterModule {}

import {NgModule} from '@angular/core';

import {ComponentsModule, SharedModule} from '../../../shared';
import {LoginComponent} from './login.component';
import {LoginRouterModule} from './router';

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    LoginRouterModule
  ],
  exports: [
    ComponentsModule,
    SharedModule,
    LoginRouterModule
  ]
})

export class LoginModule {}

@NgModule({
  imports: [
    RouterModule.forChild({ path: '', component: LoginComponent })
    ComponentsModule,
    SharedModule
  ],
  exports: [
    ComponentsModule,
    SharedModule
  ],
  declarations: [
    LoginComponent
  ]
})

export class LoginModule {}

---

您需要在LoginModule中定义一个空路由

login.module.ts

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: AdminAreaComponent,
        children: [
          {
            path: 'login',
            loadChildren: 'app/+admin-area/pages/login/login.module#LoginModule'
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    AdminAreaComponent
  ]
})
export class AdminAreaRouterModule {}

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

// Global modules
import {ComponentsModule, SharedModule} from '../../shared';

// Components
import {LoginComponent} from '../login.component';

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: LoginComponent
      }
    ])
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    LoginComponent
  ]
})
export class LoginRouterModule {}

import {NgModule} from '@angular/core';

import {ComponentsModule, SharedModule} from '../../../shared';
import {LoginComponent} from './login.component';
import {LoginRouterModule} from './router';

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    LoginRouterModule
  ],
  exports: [
    ComponentsModule,
    SharedModule,
    LoginRouterModule
  ]
})

export class LoginModule {}

@NgModule({
  imports: [
    RouterModule.forChild({ path: '', component: LoginComponent })
    ComponentsModule,
    SharedModule
  ],
  exports: [
    ComponentsModule,
    SharedModule
  ],
  declarations: [
    LoginComponent
  ]
})

export class LoginModule {}

---

从我之前给您的答复中查看我的回购协议：

在我的示例中，它是

lazy/deep

，与您的

admin/login

匹配

首先，我运行了

ngg模块lazy/Deep--routing

然后，在

src/app/lazy/deep/deep routing.module.ts

中，我将

routes

修改为：

export const routes: Routes = [ { path: '', component: DeepComponent } ]; 如果您正在运行

ng-watch

/

npm-start

或

ng-build-watch

，则需要重新启动它才能使其工作

---

请参阅

deep lazy loading

branch中的完整示例，查看我之前对您的回答中的回购：

在我的示例中，它是

lazy/deep

，与您的

admin/login

匹配

首先，我运行了

ngg模块lazy/Deep--routing

然后，在

src/app/lazy/deep/deep routing.module.ts

中，我将

routes

修改为：

export const routes: Routes = [ { path: '', component: DeepComponent } ]; 如果您正在运行

ng-watch

/

npm-start

或

ng-build-watch

，则需要重新启动它才能使其工作

---

请参阅

中的

深度延迟加载

分支中的完整示例，为什么要在模块中导出

路由模块

？我很确定你不应该这样做，请阅读Angular 2路由器上的文档。不应该有

登录外部模块

。LoginModule是您应该拥有的唯一用于登录的模块。在这里面，您应该定义

RouterModule.forChild

，如果您阅读了样式指南，您可以看到您应该有一个路由器模块文件用于路由，而不是仅仅将其扔到主模块中。无论如何，多亏了Meligy的示例repo，我现在可以使用它了，结果是不能对延迟加载的路由使用

子类

语法。感谢您的提示：）为什么要在模块中导出

RouterModule

？我很确定你不应该这样做，请阅读Angular 2路由器上的文档。不应该有

登录外部模块

。LoginModule是您应该拥有的唯一用于登录的模块。在这里面，您应该定义

RouterModule.forChild

，如果您阅读了样式指南，您可以看到您应该有一个路由器模块文件用于路由，而不是仅仅将其扔到主模块中。无论如何，多亏了Meligy的示例repo，我现在可以使用它了，结果是不能对延迟加载的路由使用

子类

语法。谢谢你的提示：）我对延迟加载的子路由使用了错误的语法，他们真的应该在文档中添加一些关于这个的信息，因为这远不是显而易见的。再次非常感谢。你知道怎么解决这个问题吗@Meligy您是否尝试过如果您的示例使用深度链接，我的意思是在浏览器地址栏中键入/复制链接到惰性嵌套路由，然后按enter键？我对惰性加载的子路由使用了错误的语法，他们应该向文档中添加一些关于此的信息，因为这一点并不明显。再次非常感谢。你知道怎么解决这个问题吗@Meligy您是否尝试过如果您的示例使用深度链接，我的意思是在浏览器地址栏中键入/复制链接到惰性嵌套路由，然后按enter键？