В чем разница между `loadChildren: () =› import('./hoge.module.ts).then(m =› m.HogeModule)' и loadChildren: './hoge.module#HogeModule'?

Проблема

Мы получаем ошибку cannot find module в случае следующей структуры.

приложение-routing.module.ts

const routes: Routes = [
  {
    path: CHILD_MANAGEMENT_PORTAL.baseUrl,
    canActivate: [AuthGuard],
    component: EnvelopeComponent,
    loadChildren: () =>
      import('./features/child-management/child-management.module').then(
        m => m.ChildManagementModule
      ),
    data: {
      menuResolver: ChildManagementMenuResolver,
      pageTitleResolver: ChildManagementPageTitleResolver,
      portalData: CHILD_MANAGEMENT_PORTAL
    }
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

дочернее управление-routing.module.ts : неправильно

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: './dashboard/child-dashboard.module#ChildDashboardModule'
  },
  {
    path: '**',
    redirectTo: 'dashboard'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  declarations: []
})
export class SalesArrangementManagementRoutingModule {}

Мы могли бы решить эту ошибку, только изменив loadChildren дочернего модуля routing.module с loadChildren: './hoge.module#HogeModule' на loadChildren: () => import('./hoge.module.ts).then(m => m.HogeModule)'.

дочернее управление-routing.module.ts : правильно

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/child-dashboard.module').then(m => m.ChildDashboardModule)
  },
  {
    path: '**',
    redirectTo: 'dashboard'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  declarations: []
})
export class SalesArrangementManagementRoutingModule {}

Но я не мог понять почему. (я не менял app-routing.module.ts...)

Так не могли бы вы объяснить разницу?


typescript angular angular-routing angular-module angular-load-children
person Hiiro Imai    schedule 28.01.2020    source источник
comment
Если вы считаете, что мой ответ правильный или любой другой ответ, отметьте его как правильный ответ, поскольку это поможет другим, кто приходит к этому вопросу, найти правильный ответ. Спасибо.   -  person Ratnadeep Bhattacharyya    schedule 06.02.2020

Ответы (2)


arrow_upward
5
arrow_downward

Похоже, вы обновились с Angular 7.x до 8.x, и здесь схема изменилась.

Объяснение (из документов angular)

Когда Angular впервые представил ленивые маршруты, браузер не поддерживал динамическую загрузку дополнительного JavaScript. Angular создал нашу собственную схему, используя синтаксис loadChildren: './lazy/lazy.module#LazyModule', и создал инструменты для ее поддержки. Теперь, когда динамический импорт ECMAScript поддерживается во многих браузерах, Angular движется к этому новому синтаксису.

В версии 8 строковый синтаксис для спецификации маршрута loadChildren устарел в пользу нового синтаксиса, использующего синтаксис import().

До

const routes: Routes = [{
  path: 'lazy',
  // The following string syntax for loadChildren is deprecated
  loadChildren: './lazy/lazy.module#LazyModule'
}];

После

const routes: Routes = [{
  path: 'lazy',
  // The new import() syntax
   loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}];

Надеюсь, что это помогает вам.

person Ratnadeep Bhattacharyya    schedule 28.01.2020

arrow_upward
0
arrow_downward

Эта функция обновлена ​​по сравнению с предыдущей версией, поэтому, если она должна работать в вашем приложении, необходимо внести небольшие изменения, вот пример, посмотрите

ошибка ts1323: динамический импорт поддерживается, только если флаг --module установлен на "commonjs" или "esnext"

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

loadChildren: './lazy/lazy.module#LazyModule

я решил использовать динамический импорт

loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)

Это выдало вторую ошибку.

Затем я исправил это, просто добавив «module»: «esNext» в компиляторOptions в файле tsconfig.json и обновив «module»: «es2015» до «module»: «esNext» как в tsconfig.app.json, так и в tsconfig.tns. json-файлы.

Это решает проблему для меня

person shashi kumar    schedule 28.01.2020