Блог

Главная - Вопросы по программированию - Ошибка диапазона: максимальный размер стека вызовов превысил угол ленивой маршрутизации 2

Ошибка диапазона: максимальный размер стека вызовов превысил угол ленивой маршрутизации 2

#angular #typescript #angular2-routing

#angular #typescript #angular2-маршрутизация

Вопрос:

Я пытаюсь внедрить отложенную маршрутизацию в свое приложение.

У меня очень большой проект, и когда он был устаревшим для маршрутизатора, я использовал AsyncRoute, но теперь он был удален.

Итак, я попытался реализовать новейшую отложенную загрузку, но у меня возникла проблема Ошибка диапазона: превышен максимальный размер стека вызовов Что я делаю не так? Я сделал весь код, как в инструкциях.

Посмотрите, пожалуйста

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

Вот мое приложение.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);

Комментарии:

1. вероятно, это потому, что у меня не было маршрутизации для моих встреч.module

2. Возможно, попробуйте удалить комментарии. Когда я обновил свой маршрутизатор до текущего в приложении, над которым я работал, я прокомментировал кучу вещей со старого маршрутизатора, потому что я не хотел его терять. После удаления комментариев некоторые странные ошибки исчезли. Хотя у меня были все мои комментарии в верхней части моего кода, поэтому я не уверен, применимо ли это здесь.

3. Спасибо, Фрэнк, за вашу помощь!

4. Рад, что сработало! Я опубликовал ответ, чтобы людям было легче его найти. Эта же проблема поставила меня в тупик почти на целый день, когда я обновлял.

Ответ №1:

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

Комментарии:

1. иди и разберись!!

2. Да благословит вас Бог. Счастливой жизни, мой друг. Я пытался найти ошибку почти с 1 часа, и вы сохранили мое n количество часов: D

3. Да, это определенно проблема с импортом / загрузкой модуля, также будьте осторожны с порядком импорта в указанном модуле, у меня были случайные и раздражающие проблемы с размещением CommonModule.

4. спасибо, я получил эту ошибку, когда случайно удалил импорт для своего модуля маршрутизации. понятия не имел, о чем речь 🙂

5. Я поддерживаю комментарий @VikasBansat. Благослови вас Бог за то, что вы это выяснили… Я искал ответ на этот вопрос в течение нескольких дней!

Ответ №2:

Я не уверен, потому что это явно не упоминается в документации (2.4.2), но из примеров в руководствах «Угловые модули» и «Маршрутизация и навигация» я вызвал следующий шаблон:

  • У ленивого модуля должен быть свой собственный модуль маршрутизации.
  • Массив маршрутов, определенный в «lazy-routing.module», должен иметь один элемент; path свойством этого элемента должна быть пустая строка; component свойство должно быть определено (необходимо, когда отложенный модуль предоставляет какую-либо услугу, чтобы внедрение работало хорошо), а шаблон ссылочного компонента должен иметь элемент с <router-outlet> директивой. Этот маршрут обычно имеет children свойство.
  • Значение path свойства отложенного маршрута, определенного в «app-routing.module» («lazyModulePrefix» в моем примере), будет префиксом всех путей, определенных в «.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

Ответ №3:

Короче говоря: я столкнулся с этой ошибкой, когда не вставил (забыл) дочерние маршруты в функциональный модуль:

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

landings.module.ts

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

Если вы не экспортируете модуль маршрутизации как модуль — вам нужно экспортировать единственный маршрутизатор с маршрутами. Ошибки вызывают только забытые вещи

Ответ №4:

У меня была та же ошибка. В моем приложении Angular было четыре модуля.

 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

Ответ №5:

Попробуйте удалить комментарии. Когда я обновил свой маршрутизатор до текущего в приложении, над которым я работал, я прокомментировал кучу вещей со старого маршрутизатора, потому что я не хотел его терять. После удаления комментариев некоторые странные ошибки исчезли.

Ответ №6:

Приведенные выше ответы хороши. Проверьте свой импорт — возможно, вы забыли импортировать модуль. Вы также можете проверить версию своего пакета typescript. В моем случае в 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

Это также может приводить к ошибкам.

Ответ №7:

Я столкнулся с такой же проблемой, и у меня все было правильно. У меня сработало следующее

  1. Остановите сервер angular
  2. Запустите сервер снова с ng serve

Он снова начал работать спонтанно. Сначала убедитесь, что у вас все правильно, как указано в других ответах, а затем попробуйте это.

Ответ №8:

Импортируйте компонент маршрутизации в модуль.

В вашем encounter Module.ts

 import:[
   AppRoutingModule 
]