Dynamic templateURL with Angular 2 version of the Angular UI Bootstrap library

Question

I am creating a dynamic template URL using the following code How to use variable to define templateUrl in Angular2, but I need to use a datepicker in the template and I had problems to add the Angular UI Bootstrap library (Angular 2 version). The error is

"No provider for NgbDateParserFormatter"

I added NgbModule and FormsModule to the section imports

@NgModule({
    imports: [CommonModule, NgbModule.forRoot(), FormsModule ],
    declarations: [DynamicHtmlComponent]
})

class DynamicHtmlModule {}

I created a plunker version https://plnkr.co/edit/kWoSTi?p=preview If the field date in the file src/articles/first.html is uncommented the application doesn´t work.

Answer 1

I would leverage the following way to do it working :

this.compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
  .then(factory => {
     const moduleRef = factory.ngModuleFactory.create(this.vcRef.parentInjector);

     const compFactory = factory.componentFactories
        .find(x => x.componentType === DynamicHtmlComponent);

     const cmpRef = this.vcRef.createComponent(compFactory, 0, moduleRef.injector);
});

Plunker Example

One note: you can use NgbDatepickerModule instead of NgbModule. It will improve performance Plunker

Answer 2

You can import NgbDatepickerModule this way:

@NgModule({
imports: [
    ...
    NgbDatepickerModule.forRoot()
],

This should fix the "No provider for NgbDateParserFormatter"