Angular 5 - 将模块导入动态模块答案

【问题标题】：Angular 5 - Import Module into Dynamic ModuleAngular 5 - 将模块导入动态模块
【发布时间】：2018-05-18 16:38:56
【问题描述】：

我对 Angular 5 比较陌生。我一直在尝试使用从服务中检索到的模板创建动态组件。我已经能够使用此功能呈现基本模板：

createComponent(): void {
  this.container.clear();
  // create dynamic component using template and item
  const component = Component({template: this.template})(class {});
  const module = NgModule({
    imports: [
      CommonModule
    ],
    declarations: [component],
    entryComponents: [component]
  })(class {});
  // compile module
  this.compiler.compileModuleAndAllComponentsAsync(module)
    .then((factories) => {
      const factory = factories.componentFactories[0];        
      this.componentRef = this.container.createComponent(factory);
      this.componentRef.instance.item = this.item;
      this.componentRef.instance.app = this.app;
    });
}

现在我有了简单的模板渲染，我正在尝试在我的模板中获得 Owl Carousel 渲染。当我尝试将 Angular 模块 OwlModule 导入我的动态 NgModule 时，没有呈现任何内容，并且我在控制台中没有收到任何错误。

这是我在模板中用来渲染轮播的代码：

<owl-carousel *ngIf="trendingItems.length > 0" [items]="trendingItems[0]['Carousel Media']" [carouselClasses]="['owl-theme', 'row', 'sliding']">
  <div *ngFor="let media of trendingItems[0]['Carousel Media']">
    <div *ngIf="media.MediaTypeId == 1000 || media.MediaTypeId == 1001">
      <div layout="column" layout-fill="">
        <div *ngIf="media.MediaTypeId == 1000" class="img-container">
          <img data-src="{{app.mediaPath(media)}}" class="img-responsive" id="image-height">
        </div>
        <div *ngIf="media.MediaTypeId == 1001" class="videoBox">
          <video media="media"></video>
        </div>
      </div>
    </div>
  </div>
</owl-carousel>

当我将它硬编码到非动态模板中时，它呈现得很好，所以我不认为这是问题所在。此外，即使 owl-carousel 指令不在页面上，模板仍然不会呈现。

有什么我遗漏的吗？有没有特殊的方法可以将自定义模块导入动态模块？

任何帮助将不胜感激！

【问题讨论】：

标签： javascript typescript angular5 owl-carousel

【解决方案1】：

我相信这可能会得到 Webpack 的动态导入功能的支持：

https://webpack.js.org/guides/code-splitting/

【讨论】：