Angular2 和 Ng2Bootstrap 问题：ComponentLoaderFactory答案

【问题标题】：Angular2 and Ng2Bootstrap issue : ComponentLoaderFactoryAngular2 和 Ng2Bootstrap 问题：ComponentLoaderFactory
【发布时间】：2017-05-10 20:53:11
【问题描述】：

问题来了：

我实际上正在尝试那里可用的 ng2-bootstrap 示例：

http://valorkin.github.io/ng2-bootstrap/#/

我所做的是在我创建的 angular2 项目中复制/粘贴示例，使用 system.js，我的实际 system.js 配置如下所示：

System.config({
    defaultJSExtensions: true,
    map: {
        '@angular/core': '../node_modules/@angular/core/bundles/core.umd.js',
        //...
    }
});
System.import('main');

我实际上没有问题地尝试了这些示例：

CAROUSEL
COLLAPSE
DROPDOWNS

对于这些示例中的任何一个，当我在 app.module 的导入部分中声明它们时，我确实使用了 forRoot() 函数：

..., DatepickerModule.forRoot(), CarouselModule.forRoot(), ...

但是，当我尝试复制/粘贴“DATEPICKER”示例时，我遇到了这个问题：

EXCEPTION: Error in templates/datepicker-demo.component.html:24:6 caused by: No provider for ComponentLoaderFactory!

这是打开“datepicker”标签的行。所以我当时尝试的是在 systemJs 映射中声明“component-loader”，如下所示：

'ng2-bootstrap/component-loader': '../node_modules/ng2-bootstrap/component-loader/index.js'

并在应用模块的“提供者”部分声明它。但是，这并不能解决任何问题，这会导致关于未找到的定位.js 的新错误...

这个“组件加载器”类是什么，如何正确使用/包含它？

感谢阅读/帮助

【问题讨论】：

标签： javascript twitter-bootstrap angular

【解决方案1】：

在您的 app.module 中：

您需要在模块文件中的 @NgModule() 中添加一个 entryComponent 字段，因为您正在动态加载引导组件。在 entryComponents 数组中添加您的引导组件，如下所示：

@NgModule({
declaration: [],
imports: [],
  entryComponents: [DatePickerComponent, ModalComponent,..]
})

【讨论】：

所以，我一直在使用 forRoot() 函数在导入部分中声明我的模块，并在组件中添加 entryComponents 部分？实际上我在“声明”数组中声明了它们......
您必须在“声明数组”和“entryComponents”数组中声明它们。而且你只需要在imports数组中声明NgbModule.forRoot()而不是DatepickerModule.forRoot(), CarouselModule.forRoot()。同时从 '@ng-bootstrap/ng-bootstrap' 导入 { NgbModule };