我正在研究与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)