ERROR: Attempting to attach an unknown Portal type

Hello. I’m getting the following error when deploying my app to our dev environment. Date-Time-Picker works as expected in our local environment. I’ve copied examples from your demo page and still get this error. Here’s code I’m using from your demo page producing this error:

Date Time: <input [owlDateTime]="dt1"> <span class="trigger" [owlDateTimeTrigger]="dt1"> <i class="fa fa-calendar"></i> </span> <owl-date-time #dt1></owl-date-time>

I’m using the following packages:

	"@angular/animations": "^5.0.0",
	"@angular/cdk": "^5.2.1",
	"@angular/common": "^5.0.0",
	"@angular/compiler": "^5.0.0",
	"@angular/core": "^5.0.0",
	"@angular/forms": "^5.0.0",
	"@angular/http": "^5.0.0",
	"@angular/platform-browser": "^5.0.0",
	"@angular/platform-browser-dynamic": "^5.0.0",
	"@angular/router": "^5.0.0",
	"angular2-moment": "^1.7.0",
	"angular2-multiselect-dropdown": "^2.3.0",
	"ng-pick-datetime": "^5.1.5",
	"ng-pick-datetime-moment": "^1.0.4",

ERROR Error: Attempting to attach an unknown Portal type. BasePortalOutlet accepts either a ComponentPortal or a TemplatePortal. at throwUnknownPortalTypeError (portal.es5.js:47) at DomPortalOutlet.webpackJsonp…/…/…/cdk/esm5/portal.es5.js.BasePortalOutlet.attach (portal.es5.js:290) at OverlayRef.webpackJsonp…/…/…/cdk/esm5/overlay.es5.js.OverlayRef.attach (overlay.es5.js:655) at OwlDateTimeComponent.webpackJsonp…/…/…/…/ng-pick-datetime/date-time/date-time-picker.component.js.OwlDateTimeComponent.openAsPopup (date-time-picker.component.js:294) at OwlDateTimeComponent.webpackJsonp…/…/…/…/ng-pick-datetime/date-time/date-time-picker.component.js.OwlDateTimeComponent.open (date-time-picker.component.js:227) at OwlDateTimeTriggerDirective.webpackJsonp…/…/…/…/ng-pick-datetime/date-time/date-time-picker-trigger.directive.js.OwlDateTimeTriggerDirective.handleClickOnHost (date-time-picker-trigger.directive.js:43) at Object.handleEvent (appointment-form.component.html:148) at handleEvent (core.js:13256) at callWithDebugContext (core.js:14741) at Object.debugHandleEvent [as handleEvent] (core.js:14328)

I think I found the issue and it seems to be with a variable called ‘_backdropElement’. It’s null in our dev environment, but has a value in local environment where the plugin works. I did a console.log outputting ‘this.popupRef’ on line 294 of [date-time-picker.component.js.].

See this: console output

Update I’m building dev deployment using AOT. When I build app for dev without AOT, then plugin works in our dev environment. So, this issue is associated with AOT build process.

Please let me know if you need more information

[logicalravii]

I have the same issue of “ERROR Error: Attempting to attach an unknown Portal type. BasePortalOutlet accepts either a ComponentPortal or a TemplatePortal.” and it is for me because i didn’t use <label> outside of component . So please add <label> may be it could also be your problem. e.g. <label> <owl-date-time ....> </label>

[VlnRbn]

Having same issue here @DanielYKPan

ERROR Error: Attempting to attach an unknown Portal type. BasePortalOutlet accepts either a ComponentPortal or a TemplatePortal.

Kindly fix this as soon as possible