使用webpack和gulp在AEM项目中将大角度模块拆分为多个模块

Question

我的AEM项目中有一个大的角度模块。我的项目不完全是一个有角度的项目，它更多是一个“按需角度”项目。我使用webpack和gulp编译角度项目。我试图将我的大角度模块拆分为单独的较小模块。我可以成功完成此工作，并编译和构建项目，但是当我导航到包含那些已移入新模块的角度组件的页面时，它们不会显示在页面上。

我的文件夹结构如下：

• 应用
  • dist
  • node_modules
  • src
    • component1
    • component2
    • component3
    • component4
    • component5
    • newModule
      • component6
      • component7
      • component8
      • newModule.module.ts
    • app.module.ts
    • main.ts
    • polyfills.ts
• index.html
• webpack.config.js
• gulpfile.js
• gulpfile.json

在我的webpack.config.js中，我不确定现在应该有多少个入口点...我应该再指定一个指向我newModule.module.ts的newModule还是指向我的newModule.module.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));