Невозможно собрать приложение Angular 8 с вложенным модулем с отложенной загрузкой в ​​библиотеке.

Question

Я использую angular для создания пользовательской библиотеки .В рабочей области есть один проект для основного приложения , один проект для пользовательской библиотеки .

В библиотеке, которая объявляет модули и маршруты, у меня есть этот код:

parent-routing.module.ts :

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {ParentComponent} from './parent.component';

const routes: Routes = [
  {
    path: '',
    component: ParentComponent,
    children: [
      {
        path: '',
        loadChildren: '/child/child.module#ChildModule'
      }
    ]
  }
];

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

В app.module.ts , я объявляю ParentModule как показано ниже:

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('ui-lib').then(m => m.ParentModule)
  }
];

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

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

ОШИБКА в ./src/app/app-routing.module.Модуль не найден: Ошибка: не удается разрешить './../../../../dist/ui-lib/modules/parent/parent.module.d.ngfactory' в '/ Users / linhnguyen/ nested-module-игровая площадка / projects / main-app / src / app '

После поиска в Google я нашел этот комментарий .Комментатор упомянул о создании модуля и импорте каждого компонента в маршрут.Это может решить проблему с загрузкой модуля в библиотеку, но он не загружается лениво.

Вот мое рабочее пространство на stackblitz

У кого-нибудь есть какие-либо решения, пожалуйста?

Спасибо,

---

ОБНОВЛЕНИЕ

В моем main application я объявил модули оболочки для родительского и дочернего компонентов, как показано ниже:

• child-wrapper.module.ts

const routes: Routes = [
  {
    path: '',
    component: ChildComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ]
})
export class ChildWrapperModule {

}

• parent-wrapper.module.ts:

const routes: Routes = [
  {
    path: '',
    component: ParentComponent,
    children: [
      {
        path: '',
        loadChildren: () => import('./child-wrapper.module').then(m => m.ChildWrapperModule)
      }
    ]
  }
]

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ]
})
export class ParentWrapperModule {

}

• app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./lazy-module/parent-wrapper.module').then(m => m.ParentWrapperModule)
  }
];

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

Это обеспечивает мою цель, но, на мой взгляд, кажется, STUPID , потому что когда разработчики хотят использовать ui-library, они должны повторно объявить маршрутизацию в приложении.

Есть идеи получше, пожалуйста?

Answer 1

Я также столкнулся с той же проблемой при реализации этой функции в моем проекте.Я реализовал это в угловых 6, хотя.Я думаю, что рекомендуемое решение, приведенное в комментарии Google, является правильным.В вашем основном приложении вы должны создать модуль-обертку, например, модуль libwrapper, который будет импортировать только библиотечный модуль.А в app.module.ts в объявлении маршрутов вы можете указать модуль libwrapper, и это должно исправить вашу проблему.Хипп это помогает ..

Answer 2

loadChildren: '/child/child.module#ChildModule'

Требуется новый синтаксис импорта Angular 8

loadChildren: () => import('/child/child.module').then(m => m.ChildModule)

Не уверен, что вы можете загружать модули с отложенной загрузкой, созданные со старым синтаксисом pre Angular 8.