3 回答

• 8

  loadChildren需要引用带路由的模块

  通过为路由中的loadChildren属性赋值，您必须引用一个已实现路由系统的模块 . 换句话说，只引用一个导入RoutingModule并使用forChild（routes）方法配置它的模块 .

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  // import { CommonModule } from '@angular/common';
  /* ---------------  !System modules  --------------- */
  
  import { SharedModule } from 'sharedModule';   //There is  a lot of shared components/directives/pipes (over 60) and it re-exports CommonModule so I can't avoid it
  /* ---------------  !App outer modules  --------------- */
  
  
  import { EncountersComponent } from './encounters.component';
  // import { PassCodeComponent } from '../../shared/components/passcode/passcode.component';
  
  export const encountersModuleRoutes: Routes = [
    /* configure routes here */
  ];
  
  
  @NgModule({
    imports: [ SharedModule, RouterModule.forChild(encountersModuleRoutes) ],
    declarations: [ EncountersComponent],
    exports: [ EncountersComponent ],
  })
  
  
  export class EncountersModule {  }
  

  回复于 2024-04-29T05:35:14+08:00
• 1

  我不确定，因为它没有在文档（2.4.2）中明确提到，但是从“Angular Modules”和“Routing＆Navigation”指南中的示例中，我引出了以下模式：

  • 懒惰模块应该有自己的路由模块 .

  • "lazy-routing.module"中定义的routes数组应该只有一个元素;该元素的 path 属性应为空字符串;应该定义 component 属性（当惰性模块提供任何服务以使注入工作正常时是必需的）并且引用组件的模板应该具有带有 <router-outlet> 指令的元素 . 此路由通常具有 children 属性 .

  • "app-routing.module"（在我的示例中为"lazyModulePrefix"）中定义的惰性路由的 path 属性的值将是".lazy-routing.module"中定义的所有路径的前缀 .

  例如：

  ///////////// app-routing.module.ts /////////////////////
  import { NgModule  } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { LoginComponent } from './login/login.component';
  import { PageNotFoundComponent } from './page-not-found.component';
  
  const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'lazyModulePrefix', loadChildren: 'app/lazyModulePath/lazy.module#LazyModule' }, // 
    { path: '', redirectTo: 'login', pathMatch: 'full'},
    { path: '**', component: PageNotFoundComponent },
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule {}
  

  .

  ///////////// lazy-routing.module.ts /////////////////////
  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { LazyModuleRootComponent } from './lazy-module-root.component';
  import { LazyModuleHomeComponent } from './lazy-module-home.component';
  import { AComponentDeclaredInTheLazyModule1 } from './a-component-declared-in-the-lazy-module-1.component';
  import { AComponentDeclaredInTheLazyModule2 } from './a-component-declared-in-the-lazy-module-2.component';
  
  const lazyModuleRoutes: Routes = [ // IMPORTANT: this array should contain a single route element with an empty path. And optionally, as many children as desired.
      { path: '',
        component: LazyModuleRootComponent, // the `component` property is necessary when the lazy module provides some service in order to injection work well. If defined, the referenced component's template should have an element with the `<router-outlet>` directive.
        children: [ 
          { path: '', component: LazyModuleHomeComponent }, // this component has no diference with the other children except for the shorter route.
          { path: 'somePath1', component: AComponentDeclaredInTheLazyModule1 },
          { path: 'somePath2', component: AComponentDeclaredInTheLazyModule2 },
      ] } 
  ];
  
  @NgModule({
      imports: [RouterModule.forChild(lazyModuleRoutes)],
      exports: [RouterModule]
  })
  export class LazyRoutingModule { }
  

  .

  //////////////////// lazy.module.ts ////////////////////
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { SharedModule } from '../shared/shared.module';
  import { LazyRoutingModule } from './lazy-routing.module';
  import { LazyModuleRootComponent } from './lazy-module-root.component';
  import { LazyModuleHomeComponent } from './lazy-module-home.component';
  import { AComponentDeclaredInTheLazyModule1 } from './a-component-declared-in-the-lazy-module-1.component';
  import { AComponentDeclaredInTheLazyModule2 } from './a-component-declared-in-the-lazy-module-2.component';
  
  @NgModule({
      imports: [
          CommonModule,
          SharedModule,
          LazyRoutingModule,
      ],
      declarations: [
          LazyModuleRootComponent,
          LazyModuleHomeComponent,
          AComponentDeclaredInTheLazyModule1,
          AComponentDeclaredInTheLazyModule2,
      ]
  })
  export class LazyModule { }
  

  .

  //////////////// lazy-module-root.component.ts //////////////////
  import { Component } from '@angular/core';
  
  @Component({
      template: '<router-outlet></router-outlet>'
  })
  export class LazyModueRootComponent { }
  

  使用上面的代码，路由映射将是：

  http://host/login - > LoginComponent

  http://host/lazyModulePrefix - > LazyModuleHomeComponent

  http://host/lazyModulePrefix/somePath1 - > AComponentDeclaredInTheLazyModule1

  http://host/lazyModulePrefix/somePath2 - > AComponentDeclaredInTheLazyModule2

  http://host/anythingElse - > PageNotFoundComponent

  回复于 2024-04-29T05:35:14+08:00
• 59

  尝试删除评论 . 当我在我正在处理的应用程序中将路由器更新为当前时，我在旧路由器上评论了一堆东西，因为我不想丢失它 . 删除评论后，一些奇怪的错误消失了 .

  回复于 2024-04-29T05:35:14+08:00