Разделение большого углового модуля на несколько модулей внутри проекта AEM с использованием webpack и gulp

Question

У меня есть один большой угловой модуль внутри моего проекта AEM.Мой проект не полностью угловой проект, это скорее проект "угловой по требованию".Я скомпилировал угловой проект, используя webpack и gulp.Я пытаюсь разделить мой большой угловой модуль на отдельные меньшие модули.Я могу сделать это успешно и заставить проект скомпилировать и построить, но когда я перехожу на страницы, содержащие те угловые компоненты, которые я переместил в свой новый модуль, они не отображаются на странице.

Моя структура папок выглядит следующим образом:

• app
  • dist
  • node_modules
  • src
    • компонент1
    • компонент2
    • компонент3
    • компонент4
    • компонент5
    • новый модуль
      • компонент6
      • компонент7
      • component8
      • newModule.module.ts
    • app.module.ts
    • main.ts
    • polyfills.ts
• index.html
• webpack.config.js
• gulpfile.js
• gulpfile.json

в моем webpack.config.js Я не уверен, сколько точек входа у меня сейчас должно быть ... если у меня есть еще один мой новый модуль, который указывает на мой новый модуль.модуль.ts или только тот, который указывает на мой файл main.ts?Я просто не могу на всю жизнь понять, чего мне не хватает, чтобы мои компоненты не загружались на страницу !!!

файл newModule.module.ts:

import { CommonModule } from '@angular/common';
import { NgModule, ApplicationRef, Injectable, Inject, 
ComponentFactoryResolver, Type } from '@angular/core';
import { HttpClientModule, HttpClient } from 
'@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import {component6} from './component6/component6.component';
import {component7} from './component7/component7.component';
import {component8} from './component8/component8.component';
import {component6service} from './component6/component6.service';
import {component7service} from './component7/component7.service';



@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
  declarations: [
      component6,
      component7,
      component8
  ],
    providers: [
       component6service,
       component7service,
    ],
exports: [
  component6,
  component7,
  component8
]
})
export class newModule { }

файл app.module.ts:

import { NgModule, ApplicationRef, Injectable, Inject, 
ComponentFactoryResolver, Type } from '@angular/core';
import { HttpClientModule, HttpClient } from 
'@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { newModule } from './newModule/newModule.module';
import {component1} from './component1/component1.component';
import {component2} from './component2/component2.component';
import {component3} from './component3/component3.component';
import {component4} from './component4/component4.component';
import {component5} from './component5/component5.component';
import {component1service} from './component1/component1.service';
import {component3service} from './component3/component3.service';

const mainComponents: Array<any> = [
    component1,
    component2,
    component3,
    component4,
    component5
];

@NgModule({
    declarations: [
        component1,
        component2,
        component3,
        component4,
        component5
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule,
        newModule
    ],
    entryComponents: mainComponents,
    exports: [
        newModule
     ],
    providers: [
        component1service,
        component3service
     ]
})
@Injectable()
export class AppModule {

 factoryResolver: any;
    initialize: Boolean = true;
    isInitialized: Boolean = false;

constructor(@Inject(ComponentFactoryResolver) factoryResolver, private _appConfigService: AppConfigService) {
    this.factoryResolver = factoryResolver;
}

ngDoBootstrap(appRef: ApplicationRef) {

    this.initialize = (this.initialize);

    if(this.initialize) {
       this.isInitialized == false && this._initAngular(appRef);
    }else {
       this._appConfigService.userInfoRefresh.subscribe((data) => {
            if(data == 'initAngular') {
               this.isInitialized == false && this._initAngular(appRef);
            }

            ;
       });
    }
}

private _initAngular(appRef: ApplicationRef) {
    this.isInitialized = true;
    mainComponents.forEach((componentDef: Type<{}>) => {
        const factory = this.factoryResolver.resolveComponentFactory(componentDef);
        const elements = Array.prototype.slice.call(document.getElementsByTagName(factory.selector));
        const selectorName = factory.selector;

        if (elements.length === 0)
            return;
        else {
            elements.forEach((element, i) => {
                element.id = selectorName + '_' + i;
                (<any>factory).factory.selector = '#' + element.id;
                appRef.bootstrap(factory);
            });
        }
    });
}
}

файл main.ts:

 import {enableProdMode} from "@angular/core";
 import {platformBrowserDynamic} from "@angular/platform-browser- 
 dynamic";
 import {AppModule} from "./app.module";

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => 
console.log(err));