Угловой переход с lazyLoading на «нормальную» загрузку

Я работаю над приложением Angular, в котором реализована ленивая загрузка. Я пробовал экспериментировать с ленивой загрузкой, но решил, что пока не хочу реализовывать ее в своем приложении. Это мой app.module.ts:

app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', redirectTo: 'store', pathMatch: 'full'},
      { path: 'hq', loadChildren: 'app/hq/hq.module#HqModule' },
      { path: 'store', loadChildren: 'app/store/store.module#StoreModule', pathMatch: 'prefix'},
    ]),
  ],
  bootstrap: [AppComponent],
  exports: [RouterModule],
})
export class AppModule { }

Как я могу переключить свой маршрут, например, hq обратно на обычную загрузку? Я ожидал, что сработает что-то вроде следующего:

  { path: 'hq', redirectTo: HqModule }

Однако это возвращает, что мой модуль является неправильным типом аргумента. Возможно ли это вообще в Angular?

hq.module.ts

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
        { path: '',
          component: HqTemplateComponent,
          canActivate: [AuthGuard],
          children: [
            { path: '', pathMatch: 'full', redirectTo: 'overview' },
            { path: 'overview', component: OverviewComponent, canActivate: [AuthGuard] },
          ]
        },
    ]),
  ],
  declarations: [HqTemplateComponent, OverviewComponent]
})

angular angular-module
person hY8vVpf3tyR57Xib    schedule 08.10.2017    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Функция стрелки

Мне нравится делать это, изменяя строку на функцию стрелки, которая выглядит примерно так:

import { HqModule } from './hq/hq.module';


{ path: 'hq', loadChildren: () => HqModule },

для не угловых 4 и меньше:

export function loadHqModuleFn() {
  return HqModule;
}

{ path: 'hq', loadChildren: loadHqModuleFn },

Примечание. Начиная с версии 5 компилятор автоматически выполняет эту перезапись при создании файла .js. Благодаря "уменьшению выражений"

Пример плункера

угловой маршрутизатор-загрузчик? синхронизация = истина

Если вы используете angular-router-loader, вы должны знать, что этот файл имеет специальный синтаксис. для для синхронной загрузки модуля. Просто добавьте sync=true в качестве значения строки запроса к вашему loadChildren string:

{ path: 'hq', loadChildren: 'app/hq/hq.module#HqModule?sync=true' },

импорт

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

app.module.ts

@NgModule({
  imports: [
    ...,       
    HqModule,
    BrowserModule,
    RouterModule.forRoot([
      { path: '', redirectTo: 'store', pathMatch: 'full'},
      { path: 'store', loadChildren: 'app/store/store.module#StoreModule', pathMatch: 'prefix'},
    ])
  ]
  ...
})
export class AppModule {}

hq.module.ts

@NgModule({
  imports: [
    ...
    RouterModule.forChild([
        { path: 'hq', <========================== changed '' to `hq`
          component: HqTemplateComponent,
          canActivate: [AuthGuard],
          children: [
            ...
          ]
        },
    ]),
  ],
  ...
})

Также стоит упомянуть, что конфигурация углового маршрутизатора строга в отношении порядка. Согласно документам:

Маршрутизатор использует стратегию первого сопоставления при сопоставлении маршрутов, поэтому более конкретные маршруты следует размещать над менее конкретными маршрутами.

Поэтому добавьте модули с определением маршрутов в массив imports в том же порядке, как если бы вы делали это в RouterModule.forRoot.

person yurzui    schedule 08.10.2017
comment
Я пытаюсь запустить и запустить ваше рабочее решение со стрелкой, оно не работает для моего экземпляра angular-cli: ОШИБКА в ошибке: ошибка при статическом разрешении значений символов. Вызовы функций не поддерживаются. Рассмотрите возможность замены функции или лямбды ссылкой на экспортированную функцию (позиция 27:38 в исходном файле .ts), разрешив символ AppModule в /project/project-frontend/src/app/app.module.ts. - person hY8vVpf3tyR57Xib; 08.10.2017

arrow_upward
1
arrow_downward

Добавьте HqModule в массив импорта AppModule и удалите запись HqModule из определения маршрутизации AppModule. Как это:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HqModule, // add it
    RouterModule.forRoot([
      { path: '', redirectTo: 'store', pathMatch: 'full'},
      { path: 'store', loadChildren: 'app/store/store.module#StoreModule', pathMatch: 'prefix'}
    ])
  ],
  bootstrap: [AppComponent],
  exports: [RouterModule],
})
export class AppModule { }
person asmmahmud    schedule 08.10.2017