小编Mor*_*ger的帖子

在角度应用程序中动态包含另一个webpack包

我正在研究与webpack捆绑在一起的Angular2应用程序.一切正常.然而,这个捆绑的应用程序将独立运行并在运行时,在引导应用程序之前,我需要将其他NgModule指定到我在我的应用程序中捆绑的其中一个模块中.基本上认为它是index.html中包含的两个bundle,并且当bootstraped时,bundle 1进入bundle2.只捆绑2引导应用程序.所以我做了一些实验,我想与你分享,以便对此有所了解(我可能会采取一种相当肮脏且完全错误的方法,所以如果是这样的话,请更正.我不介意脏,如果它是它可以工作的唯一方式.)唯一的要求是在翻译期间不应该做任何事情.要求是我可以在我的index.html上包含一个或多个包,并且可以将它们连接到实际应用程序中,而无需事先了解彼此.

我之所以这样做是因为我在一个平台上工作,其他开发人员可以通过安装扩展来挂钩代码.这意味着我提供了初始捆绑包,它在传输时间上不知道其他捆绑包.这在AngularJS中很容易,但是转移到Angular2以后,这已经不那么容易了.

我设法通过以下方法延迟引导应用程序:

在main.ts中:

window["platformBrowserDynamicRef"] = platformBrowserDynamic();
window["appModule"] = AppModule;
Run Code Online (Sandbox Code Playgroud)

这工作正常,当我手动调用bootstrap时,应用程序启动就好了.我创建了另一个捆绑,可以作为另一个应用独立工作.

当我尝试通过导入像上面的隐式数组中的组件将它们捆绑在一起时,我引导应用程序,我得到一个错误,我不知道该怎么办.

window["app"].modulesImport.push(CommonModule);
window["app"].modulesImport.push(FormsModule);
window["app"].modulesImport.push(BrowserModule);
window["app"].modulesImport.push(NgGridModule);
window["app"].modulesImport.push(ReactiveFormsModule);
window["app"].modulesImport.push(BrowserAnimationsModule);
window["app"].modulesImport.push(HttpModule);

@NgModule({
  imports: window["app"].modulesImport,
  declarations: [
      DYNAMIC_DIRECTIVES,
      PropertyFilterPipe,
      PropertyDataTypeFilterPipe,
      LanguageFilterPipe,      
      PropertyNameBlackListPipe      
  ],
  exports: [
      DYNAMIC_DIRECTIVES,
      CommonModule,
      FormsModule,
      HttpModule
  ]
})
export class PartsModule {

    static forRoot()
    {
        return {
            ngModule: PartsModule,
            providers: [ ], // not used here, but if singleton needed
        };
    }
}
Run Code Online (Sandbox Code Playgroud)

将模块放在隐式数组中工作正常,但只要我从其他包中添加模块,我就会收到以下错误:

Uncaught Error: Unexpected value 'ExtensionsModule' imported by the module 'PartsModule'. Please add a @NgModule annotation. …
Run Code Online (Sandbox Code Playgroud)

bundle require webpack angular

10
推荐指数
1
解决办法
477
查看次数

标签 统计

angular ×1

bundle ×1

require ×1

webpack ×1