loadChildren需要引用带路由的模块

Question

我试图在我的应用中实施延迟路由。

我有一个非常大的项目，当它在路由器上被弃用时，我使用了AsyncRoute，但现在它被删除了。

所以我尝试实现最新的延迟加载，但是我遇到了一个问题 RangeError：超出最大调用堆栈大小 我做错了什么？我按照说明做了所有代码。

请看一下

EncountersModule

    import { NgModule } from '@angular/core';
    // 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';


    @NgModule({
      imports: [ SharedModule ],
      declarations: [ EncountersComponent],
      exports: [ EncountersComponent ],
    })


    export class EncountersModule {  }

这是我的 app.routing.module

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


import { ImagingComponent }      from '../modules/index';
import { DashboardComponent }      from '../modules/index';
import { PrescriptionNoticesComponent }      from '../modules/index';
// import { EncountersComponent } from "../modules/encounters/encounters.component";
import { ScheduleComponent } from "../modules/schedule/schedule.component";
import { AdminComponent } from '../modules/index';




@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: '',
        component: DashboardComponent,
        data: { label: 'Dashboard' }
      },
      {
        path: 'encounters',
        // component: EncountersComponent,
        loadChildren: 'production/modules/encounters/encounters.module#EncountersModule',
        data: { label: 'Encounters' }
      },
      {
        path: 'admin',
        component: AdminComponent,
        data: { label: 'Admin' }
      }
    ])
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}




// const appRoutes: Routes = [
//   {
//     path: 'imaging',
//     component: ImagingComponent,
//     data: { label: 'Imaging' }
//   },
//   {
//     path: '',
//     component: DashboardComponent,
//     data: { label: 'Dashboard' }
//   },
//   {
//     path: 'prescription_notices',
//     component: PrescriptionNoticesComponent,
//     data: { label: 'Prescription Notices' }
//   },
//   {
//     path: 'encounters',
//     component: EncountersComponent,
//     data: { label: 'Encounters' }
//   },
//   {
//     path: 'schedule',
//     component: ScheduleComponent,
//     data: { label: 'Schedule' }
//   },
//   {
//     path: 'admin',
//     component: AdminComponent,
//     data: { label: 'Admin' }
//   }
// ];
//
// export const appRoutingProviders: any[] = [
//
// ];
//
// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Answer 1

loadChildren需要引用带路由的模块

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

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 {  }

Answer 2

我不确定，因为文档（2.4.2）中没有明确提及，但是从“Angular Modules”和“Routing＆amp; 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 - ＆gt; LoginComponent

http://host/lazyModulePrefix - ＆gt; LazyModuleHomeComponent

http://host/lazyModulePrefix/somePath1 - ＆gt; AComponentDeclaredInTheLazyModule1

http://host/lazyModulePrefix/somePath2 - ＆gt; AComponentDeclaredInTheLazyModule2

http://host/anythingElse - ＆gt; PageNotFoundComponent

Answer 3

长话短说：我没有在功能模块中插入（忘记）子路线时遇到了此错误：

landings.routing.ts export const LandingsRoutes = RouterModule.forChild(routes);

landings.module.ts

imports: [
    CommonModule,
    // LandingsRoutes // <-- this I forgot and receive error Callstack exceeded
  ]

如果不将路由模块导出为模块-您需要导出唯一带有路由的路由器。只有被遗忘的东西会导致错误

Answer 4

我有同样的错误。我的角度应用程序中有四个模块。

ERROR in Maximum call stack size exceeded

我的错误

我已经在模块内部手动创建了路由文件，并且该文件未导入module.ts文件中。因此，您需要将路由文件导入到module.ts文件中。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserLoginComponent } from './user-login/user-login.component';
import { UserSignupComponent } from './user-signup/user-signup.component';
import { PublicComponent } from './public/public.component';
import { PublicRoutingModule } from './public-routing.modue'; //import it first

@NgModule({
  declarations: [UserLoginComponent, UserSignupComponent, PublicComponent],
  imports: [
    CommonModule,
    PublicRoutingModule // I was missing this line
  ]
})
export class PublicModule { }

警告： 此模块文件不是app.module.ts

Answer 5

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

Answer 6

我也面临着同样的问题，并且一切都正确。以下对我有用

停止角度服务器
使用ng serve重新启动服务器

它再次自发开始工作。首先，请确保您已按照其他答案中所述正确进行所有操作，然后尝试执行此操作。

Answer 7

我遇到的一个愚蠢案例中，您需要重新运行您的项目‍♂️

Answer 8

以上答案是好的。检查您的导入-可能您忘记了导入模块。您还可以检查打字稿包的版本。就Angular 5而言，我在CLI中发出了警告：

@ angular / compiler-cli @ 5.2.11需要typescript @'> = 2.4.2 <2.5.0'，但是找到了2.5.3。使用此版本可能导致不确定的行为，并且难以调试问题。请运行以下命令以安装兼容版本的TypeScript。

npm install typescript@'>=2.4.2 <2.5.0' --save

这也会出错。

RangeError：超出最大调用堆栈大小Lazy routing Angular 2

8 个答案:

loadChildren需要引用带路由的模块