Чанк не содержит компонентов с ленивой загрузкой

Я только что закончил разделять свое приложение Angular 9 на 2 модуля, чтобы оптимизировать время загрузки. К сожалению, фрагмент, созданный компиляцией, очень мал и, кажется, содержит только код моего функционального модуля и маршрутизатора. Все компоненты, включенные в этот модуль, все еще находятся в основном файле js.

Вот что я сделал:

Модуль приложения

@NgModule({
  declarations: [
    //List of components (21)
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // required animations module
    HttpClientModule,
    AppRoutingModule,
    SharedModule,
    ConfigModule // My feature Module
  ],
  providers: [
    AuthGuard,
    DpGuard,
    AITIGuard,
    ApiService,
    StatusSocketService,
    VideoSocketService,
    Title
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Общий модуль:

@NgModule({
  declarations: [
      // List of shared components (7)
  ],
  imports: [
    CommonModule,
    FormsModule,
    NgbModule,
    TreeModule,
    TranslateModule.forChild()
  ],
  exports: [
    PasswordStrengthBarComponent,
    CameraslistComponent,
    VideoComponent,
    MaskdrawerComponent,
    FilterselectorComponent,
    TranslateModule,
    NgbModule,
    FormsModule,
    TreeModule,
    ZonedrawerComponent
  ]
})
export class SharedModule { }

Модуль функций (ConfigModule)

@NgModule({
  declarations: [
    //LIST OF FEATURE COMPONENTS (47)
  ],
  imports: [
    SharedModule,
    CommonModule,
    ConfigRoutingModule,
    HttpClientModule
  ]
})
export class ConfigModule { }

Функциональный модуль лениво загружается в маршруты приложения с помощью:

{
    path: 'config',
    canActivate: [AuthGuard],
    loadChildren:() => import('./config/config.module').then(m => m.ConfigModule)
}

И, наконец, функциональный модуль определяет свои собственные маршруты следующим образом:

const routes: Routes = [{
    path: '',
    canActivate: [AuthGuard],
    children : [
      { path: '', component:MenuconfigComponent },
      { path: 'system',component: ConfigSystemComponent},
      ... ,
    ]
  }];

Что мне не хватает?

Я ожидал, что фрагмент содержит все, что входит в функциональный модуль, а не только небольшую часть кода.

Результаты компиляции таковы:

  • 5-es2015.js : 4KB
  • main-es2015.js: 3,1 МБ
  • полифиллы-es2015: 62 КБ
  • время выполнения-es2015: 3 КБ

Я понимаю, что main должен быть больше из-за всех зависимостей, но он не должен содержать компоненты функционального модуля.

Спасибо за вашу помощь


angular lazy-loading angular-ivy angular-module
person grunk    schedule 14.02.2020    source источник
comment
Ваш функциональный модуль не должен быть объявлен в вашем модуле приложения?   -  person MikeOne    schedule 14.02.2020
comment
похоже, что ваши компоненты каким-то образом включены в зависимости основного модуля. исходники вашего проекта открыты? может помочь найти проблему   -  person Andrei    schedule 14.02.2020
comment
я дважды проверю, но для создания своего функционального модуля я скопировал / вставил компоненты из AppModule в ConfigModule, поэтому любые зависимости должны были вызвать ошибку компиляции из-за изменения пути   -  person grunk    schedule 14.02.2020

Ответы (1)


arrow_upward
0
arrow_downward

@MikeOne был прав в своем комментарии, я не должен был включать свой функциональный модуль в свой основной модуль:

@NgModule({
  declarations: [
    //List of components (21)
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // required animations module
    HttpClientModule,
    AppRoutingModule,
    SharedModule,
    ConfigModule // <== Remove this
  ],
  providers: [
    AuthGuard,
    DpGuard,
    AITIGuard,
    ApiService,
    StatusSocketService,
    VideoSocketService,
    Title
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
person grunk    schedule 17.02.2020