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

Question

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

我的文件夹结构如下：

• 应用程序
  • 距离
  • 节点模块
  • 源代码
    • 组件1
    • 组件2
    • 组件3
    • 组件4
    • 组件5
    • 新模块
      • 组件6
      • 组件7
      • 组件8
      • 新模块.module.ts
    • app.module.ts
    • main.ts
    • polyfills.ts
• 索引.html
• webpack.config.js
• gulpfile.js
• gulpfile.json

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

标签： angularwebpackgulpaem