Lazy loaded module, Mdb-date-picker LocaleService error

Hi Arkadiusz, this is the code of my component:

<mdb-date-picker name="mybirthdate" [(ngModel)]="formattedBirthDate" (dateChanged)="onDateChange($event)"></mdb-date-picker>

 formattedBirthDate = "";

onDateChange(event: any): void {
    this.user.birthDate = new Date(event.date.year, event.date.month - 1, event.date.day);
  }

I noticed that if I import DatepickerModule in app.module it works

I have the same problem with other modules. If I import MdbSelectModule in a module lazy loaded manually I get this error:

And also with DropdownModule:

If I import DatepickerModule or DropdownModule in app.module or in another module lazy loaded by angular routing (https://angular.io/guide/lazy-loading-ngmodules) they work fine.

Thanks for your support

Marco

@bitjuice I think that in this case, Angular thinks that Datepicker (and other MDB components used inside modal) is part of the root app.module, because even though modal is declared inside BasicModalsModule, you use ModalService inside the component that is declared in the root module.

I slightly modified your example to try to fix this problem. Here is what I did:

1. Created BasicModalsModule using code from your example
2. Created a new BasicComponent (using ng g c basic) and declared it inside the BasicModalsModule.

Then on button click I lazy load the module, instantiate it with the compileModuleAsync method, and lazy load BasicComponent. When everything is created correctly I open modal from BasicComponent using componentRef.instance.open();.

app.component (lazyLoadModule method is called on button click)

import {
  Compiler,
  Component,
  Injector,
  ViewContainerRef,
} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  constructor(
    private injector: Injector,
    private compiler: Compiler,
    private vcr: ViewContainerRef
  ) {}

  async lazyLoadModule() {
    const module = await import('./basic-modals.module');
    const component = await import('./basic/basic.component');
    const moduleFactory = await this.compiler.compileModuleAsync(module.BasicModalsModule);
    const moduleRef = moduleFactory.create(this.injector);

    const componentFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(component.BasicComponent);
    const componentRef = this.vcr.createComponent(
      componentFactory,
      undefined,
      this.injector,
      [],
      moduleRef
    );

    componentRef.instance.open();
  }
}

BasicModalsModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BasicComponent } from './basic/basic.component';
import { ModalComponent } from './modal/modal.component';
import {
  ModalModule,
  ButtonsModule,
  InputsModule,
  MdbSelectModule,
  DropdownModule,
  DatepickerModule
} from 'ng-uikit-pro-standard';

@NgModule({
  declarations: [BasicComponent, ModalComponent],
  imports: [
    CommonModule,
    DatepickerModule,
    ButtonsModule.forRoot(),
    InputsModule.forRoot(),
    MdbSelectModule,
    ModalModule.forRoot(),
    DropdownModule.forRoot(),
  ],
  exports: [],
  entryComponents: [ModalComponent],
})
export class BasicModalsModule {}

BasicComponent:

export class BasicComponent implements OnInit {
  constructor(private modalService: MDBModalService) {}

  ngOnInit(): void {}

  open() {
    this.modalService.show(ModalComponent);
  }
}

ModalComponent is a standard MDB dynamic modal. I added the mentioned datepicker, select and dropdown components inside and it looks like everything is working correctly.

Hi Arkadiusz,

componentFactoryResolver and createComponent are deprecated since Angular 13. How ca I update my code?

Thanks a lot