Каков правильный способ отложенной загрузки модулей в Angular 7?

#angular #typescript #lazy-loading

#angular #typescript #отложенная загрузка

Вопрос:

У меня была отложенная загрузка модулей в моем приложении angular в angular 4, которая работала отлично. Отложенная маршрутизация была внутри app.module.ts , как это :

   RouterModule.forRoot([
          { path: 'recDet', component: RecDetComponent },
          { path: 'SlaveComponent/:pfScreen', loadChildren: './ally/slave/slave.module#SlaveModule' }
  ])
  

Теперь я перенес приложение на angular 7, что выдает мне эту ошибку во время компиляции :

ERROR in ./src/app/slaveModule/slave-module/slave.module.ts Module build failed (from ./node_modules/@ngtools/webpack/src/index.js): Error: C:UsersTDKsrcappslaveModuleslave-moduleslave.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

Я также видел, что отложенная загрузка модулей также может быть выполнена с помощью атрибута : lazyModules in angular.json .

Каков правильный способ реализации отложенной загрузки в angular 7 через app.module.ts или через angular.json ?

Ответ №1:

Обычно я делаю это так:

 const routes: Routes = [
  { path: 'test', loadChildren: () => import('./test/test.module').then((m) => m.TestModule) },
];

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

Затем я импортирую свой app-routing.module в app.module.

Обновление: из документа v7: https://v7.angular.io/guide/router#milestone-6-asynchronous-routing вы должны объявить это следующим образом:

 const routes: Routes = [
  { path: 'test', loadChildren: './test/test.module#TestModule' },
];
  

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

1. Спасибо, Квентин. Это то, что вы используете в Angular 7 для своего приложения? @Квентин Фонк

2. @TheDarkKnight Да, это то, что мы используем с самого начала нашего проекта (angular версии 6). Сейчас мы находимся в версии 10, но код оттуда не изменился. Попробуйте и дайте мне знать.

3. Конечно, Квентин. Позвольте мне попробовать это и посмотреть, что получится

4. Я внес правку из документа V7. Может быть, это лучше подойдет для ваших нужд.