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

我正在处理与webpack捆绑在一起的Angular2应用程序。一切正常。然而，这个绑定的应用程序将独立运行，并在运行时，在引导应用程序之前，我需要将其他NgModule指定到我的应用程序中捆绑的其中一个模块中。基本上认为它是index.html中包含的两个捆绑包，并且在引导时，捆绑包1进入捆绑包2。只有捆绑软件2引导应用程序。所以我做了一些实验，我想和大家分享一下这个（我可能会采取一种非常肮脏和完全错误的方法，所以请纠正，如果是的话，我不介意弄脏它是它可以工作的唯一方法。）。唯一的要求是在转录过程中不应该做任何事情。要求是我可以在我的index.html中包含一个或多个包，并且可以将它们挂接到实际的应用程序中，而无需事先了解任何其他应用程序。在角度应用程序中动态地包含另一个webpack包

我这样做的原因首先是因为我工作的平台上其他开发人员可以通过安装扩展挂钩代码。这意味着我提供了初始捆绑包，它不需要知道其他捆绑包的时间。在AngularJS中这很容易，但是转向Angular2以后，这已经不再那么容易了。

我设法延迟与以下办法自举程序：

在main.ts：

window["platformBrowserDynamicRef"] = platformBrowserDynamic(); 
window["appModule"] = AppModule;

这工作得很好，当我手动调用引导，应用程序启动后就好了。我创建了另一个可独立工作的另一个应用程序。

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

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 
     }; 
    } 
}

具有模块的隐式阵列等我从其他包添加一个模块工作正常，但只要我得到以下错误：

Uncaught Error: Unexpected value 'ExtensionsModule' imported by the module 'PartsModule'. Please add a @NgModule annotation. 
    at syntaxError (http://localhost:3002/dist/app.bundle.js:43864:34) [<root>] 
    at http://localhost:3002/dist/app.bundle.js:56319:44 [<root>] 
    at Array.forEach (native) [<root>] 
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3002/dist/app.bundle.js:56302:49) [<root>] 
    at CompileMetadataResolver.getNgModuleSummary (http://localhost:3002/dist/app.bundle.js:56244:52) [<root>] 
    at http://localhost:3002/dist/app.bundle.js:56317:72 [<root>] 
    at Array.forEach (native) [<root>] 
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3002/dist/app.bundle.js:56302:49) [<root>] 
    at CompileMetadataResolver.getNgModuleSummary (http://localhost:3002/dist/app.bundle.js:56244:52) [<root>] 
    at http://localhost:3002/dist/app.bundle.js:56317:72 [<root>] 
    at Array.forEach (native) [<root>] 
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3002/dist/app.bundle.js:56302:49) [<root>] 
    at JitCompiler._loadModules (http://localhost:3002/dist/app.bundle.js:67404:64) [<root>] 
    at JitCompiler._compileModuleAndComponents (http://localhost:3002/dist/app.bundle.js:67363:52) [<root>]

我也试着AOT编译ExtensionsModule也不起作用。我也尝试过使用JitCompiler在运行时动态编译组件，以查看我是否可以将它们放入应用程序中。虽然同样的错误。

组件装饰过程中或在transpilation期间装饰？在隐式数组模块中窥视我可以看到它们是装饰的，但我的不是。那个webpack插入了decorator方法的调用代码吗？我假设装饰者信息在翻译过程中丢失了，所以也许我需要临时存储它，以便我可以在其他地方抓取它。（注意，作为第一要素不包含装饰阵列extensionsmodule）

我猜进出口寻找如何从here.Maybe前进指针NgModule注释功能将是一个不错的地方开始。虽然在任何地方都找不到。

编辑

挖更多的进入问题，我使用路由器已经试过延迟加载方法，即首先我得到这个错误，试图用一个js文件加载它（网络选项卡显示它永远不会发出对文件的请求）：

const appRoutes: Routes = [ 
     { 
     path: 'edit-entity/:type/:id/:culture', 
     component: EntityEditor, 
     resolve: { 
      entity: EntityResolver, 
      navigation: NavigationResolver 
     }, 
     data: { shouldDetach: true}, 
     loadChildren: "/dist/extensions.bundle.js#ExtensionsBundle", 

     }, 
     { 
     path: '', 
     component: Dashboard, 
     resolve: { 
      navigation: NavigationResolver 
     }, 
     data: { shouldDetach: true}   
     } 
    ];

解决了以下几个错误：

“无法与名称ExtensionsModule.js找到模块”其次我试着使用这样的loadChildren功能：

const appRoutes: Routes = [ 
     { 
     path: 'edit-entity/:type/:id/:culture', 
     component: EntityEditor, 
     resolve: { 
      entity: EntityResolver, 
      navigation: NavigationResolver 
     }, 
     data: { shouldDetach: true}, 
     loadChildren:() => { 
      //"/dist/extensions.bundle.js#ExtensionsModule",    
      // return System.import('./dynamic.module').then((comp: any) => { 
      //  return comp.otherExport; 
      // }); 

      return window["lux"].modulesLazyImport[0]; 
     } 
     }, 
     { 
     path: '', 
     component: Dashboard, 
     resolve: { 
      navigation: NavigationResolver 
     }, 
     data: { shouldDetach: true}   
     } 
    ];

解决了：

app.bundle.js:1548 ERROR Error: Uncaught (in promise): Error: No NgModule metadata found for 'ExtensionsModule'. 
Error: No NgModule metadata found for 'ExtensionsModule'. 
    at NgModuleResolver.resolve (app.bundle.js:55709) [angular] 
    at CompileMetadataResolver.getNgModuleMetadata (app.bundle.js:56288) [angular] 
    at JitCompiler._loadModules (app.bundle.js:67404) [angular] 
    at JitCompiler._compileModuleAndComponents (app.bundle.js:67363) [angular] 
    at JitCompiler.compileModuleAsync (app.bundle.js:67325) [angular] 
    at ModuleBoundCompiler.compileModuleAsync (app.bundle.js:67693) [angular] 
    at MergeMapSubscriber.project (app.bundle.js:30608) [angular] 
    at MergeMapSubscriber._tryNext (app.bundle.js:69744) [angular] 
    at MergeMapSubscriber._next (app.bundle.js:69734) [angular] 
    at MergeMapSubscriber.Subscriber.next (app.bundle.js:14584) [angular] 
    at ScalarObservable._subscribe (app.bundle.js:69206) [angular] 
    at ScalarObservable.Observable.subscribe (app.bundle.js:118) [angular] 
    at MergeMapOperator.call (app.bundle.js:69709) [angular] 
    at Observable.subscribe (app.bundle.js:115) [angular] 
    at NgModuleResolver.resolve (app.bundle.js:55709) [angular] 
    at CompileMetadataResolver.getNgModuleMetadata (app.bundle.js:56288) [angular] 
    at JitCompiler._loadModules (app.bundle.js:67404) [angular] 
    at JitCompiler._compileModuleAndComponents (app.bundle.js:67363) [angular] 
    at JitCompiler.compileModuleAsync (app.bundle.js:67325) [angular] 
    at ModuleBoundCompiler.compileModuleAsync (app.bundle.js:67693) [angular] 
    at MergeMapSubscriber.project (app.bundle.js:30608) [angular] 
    at MergeMapSubscriber._tryNext (app.bundle.js:69744) [angular] 
    at MergeMapSubscriber._next (app.bundle.js:69734) [angular] 
    at MergeMapSubscriber.Subscriber.next (app.bundle.js:14584) [angular] 
    at ScalarObservable._subscribe (app.bundle.js:69206) [angular] 
    at ScalarObservable.Observable.subscribe (app.bundle.js:118) [angular] 
    at MergeMapOperator.call (app.bundle.js:69709) [angular] 
    at Observable.subscribe (app.bundle.js:115) [angular] 
    at resolvePromise (app.bundle.js:77503) [angular] 
    at resolvePromise (app.bundle.js:77488) [angular] 
    at :3000/dist/app.bundle.js:77537:17 [angular] 
    at Object.onInvokeTask (app.bundle.js:4599) [angular] 
    at ZoneDelegate.invokeTask (app.bundle.js:77289) [angular] 
    at Zone.runTask (app.bundle.js:77179) [<root> => angular] 
    at drainMicroTaskQueue (app.bundle.js:77433) [<root>] 
    at HTMLDivElement.ZoneTask.invoke (app.bundle.js:77364) [<root>]

编辑我想，也许错误是因为我annontations从来没有叫。不确定是否是这种情况。我希望能够使用ES5，并将组件推送到我的隐式列表中，如下所示。在尝试将组件推送到parts.module.ts的声明部分之后，所有错误都源于此。

var HelloWorldComponent = function() { 

}; 

HelloWorldComponent.annotations = [ 
    new ng.core.Component({ 
     selector: 'hello-world', 
     template: '<h1>Hello World!</h1>', 
    }) 
]; 

window["lux"].componentsLazyImport.push(HelloWorldComponent);

那么这是Angular 4.0.0中的一个bug还是完全不可能创建一个插件机制？

问候莫滕

来源

2017-04-04 Morten Skjoldager

我正在像你一样的插件机制，并有像你一样的问题。四天后，我没有找到任何解决方案。你有没有发现什么？ – moohkooh

是的，我找到了答案，只是回答。 –

[在angular2中运行时加载组件或模块到模块中]的可能副本（https://stackoverflow.com/questions/43630165/runtime-load-components-or-modules-into-a-module-in-angular2） –

实现这一点，我能找到的唯一途径是下降的WebPack，因为这似乎想在构建时的所有信息，并使用SystemJS它在运行时可以加载模块，它不知道约

来源

2018-02-06 11:30:18 Steverob2k

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

回答

相关问题