No provider found for CdkOverlayContainer [angular client]

OpenVidu v2 Issues developing apps
1

Hi all,

Issue description:
When trying to render openvidu angular on my angular app it’s not rendering video room components and is throwing error:

image
image1794×1075 177 KB

errors.ts:30 ERROR NullInjectorError: R3InjectorError(VouchersModule)[CdkOverlayService -> CdkOverlayService -> CdkOverlayContainer -> CdkOverlayContainer -> CdkOverlayContainer]: 
  NullInjectorError: No provider for CdkOverlayContainer!
    at NullInjector.get (null_injector.ts:16)
    at R3Injector.get (r3_injector.ts:221)
    at R3Injector.get (r3_injector.ts:221)
    at R3Injector.get (r3_injector.ts:221)
    at injectInjectorOnly (injector_compatibility.ts:66)
    at ɵɵinject (injector_compatibility.ts:88)
    at Object.CdkOverlayService_Factory [as factory] (cdk-overlay.service.ts:15)
    at R3Injector.hydrate (r3_injector.ts:412)
    at R3Injector.get (r3_injector.ts:209)
    at NgModuleRef$1.get (ng_module_ref.ts:76)

Additionally from time to time it also throws:

ERROR Error: NG0200: Circular dependency in DI detected for CdkOverlayService. Find more at https://angular.io/errors/NG0200
    at throwCyclicDependencyError (errors_di.ts:17)
    at R3Injector.hydrate (r3_injector.ts:409)
    at R3Injector.get (r3_injector.ts:209)
    at NgModuleRef$1.get (ng_module_ref.ts:76)
    at R3Injector.get (r3_injector.ts:221)
    at NgModuleRef$1.get (ng_module_ref.ts:76)
    at Object.get (component_ref.ts:98)
    at lookupTokenUsingModuleInjector (di.ts:381)
    at getOrCreateInjectable (di.ts:499)
    at Module.ɵɵdirectiveInject (di.ts:54)

It really looks like a rendering issue, videoconference is working fine. I can even connect to the same session using openvidu-library-angular tutorial app and see my app is emitting video and audio (and even screen share).

Versions:
I did upgrade my app angular and dependencies versions to meet openvidu-library-angular tutorial (2.18.0):

Angular version: 11.2.4
package.json dependencies:

  "dependencies": {
    "@angular/cdk": "11.2.4",
    "@angular/animations": "11.2.4",
    "@angular/common": "11.2.4",
    "@angular/compiler": "11.2.4",
    "@angular/core": "11.2.4",
    "@angular/forms": "11.2.4",
    "@angular/localize": "11.2.4",
    "@angular/material": "11.2.4",
    "@angular/platform-browser": "11.2.4",
    "@angular/platform-browser-dynamic": "11.2.4",
    "@angular/router": "11.2.4",
    "@angular/service-worker": "11.2.4",
    "core-js": "3.9.1",
    "openvidu-angular": "2.18.0",
    "ng-lazyload-image": "^7.1.0",
    "ngx-take-until-destroy": "^5.4.0",
    "rxjs": "6.6.6",
    "sockjs-client": "^1.3.0",
    "stompjs": "^2.3.3",
    "tslib": "2.1.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "0.11.4"
  }

Openvidu client: 2.18.0
Openvidu server: docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-server-kms:2.18.0

Other info:
I am using opv-session as it is. Without any customization.

<opv-session *ngIf="session" #ovSessionComponent [sessionName]="mySessionId" [user]="myUserName" [tokens]="tokens"
             [ovSettings]="ovSettings" (sessionCreated)="handlerSessionCreatedEvent($event)" (publisherCreated)="handlerPublisherCreatedEvent($event)" (error)="handlerErrorEvent($event)">
</opv-session>

I can see CdkOverlayContainer under

node-modules/openvidu-angular/lib/shared/config

I don’t know why it is not getting provided. If you want me to perform any further debugging just reply.

Thank you

2

Alright, this is related to lazy loaded modules. I made it to fix it by adding OpenviduSessionModule to AppModule instead of my lazy loaded module.

It would be great to only add OpenviduSessionModule into each module that is going to be used in.