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

Just got this error in production.

"dependencies": {
"ng-pick-datetime": "^6.0.4",
"@angular/cdk": "^6.1.0",
"@angular/material": "^6.1.0",
"@angular/core": "6.0.3",
........

"devDependencies": {
    "@angular/cli": "6.0.3",
    "@angular/compiler-cli": "6.0.3",

this is how my code looks:

<mat-form-field>
           <input (change)="calculateTotal()" (dateTimeChange)="calculateTotal();"
                       matInput placeholder="Date Time To:"
                       [owlDateTimeTrigger]="dt13"
                       [owlDateTime]="dt13"
                       [(ngModel)]="range"
                       selectMode="rangeTo">
           <owl-date-time firstDayOfWeek="6" #dt13></owl-date-time>
</mat-form-field>

So as you can see I use matInput here also, and mat-form-field as a wrapper, so maybe this can cause some conflicts. In development mode everything works perfectly.

Here is the production error trace if it helps:

0.83a6145142c144fbb003.chunk.js:1 ERROR Error: Attempting to attach an unknown Portal type. BasePortalOutlet accepts either a ComponentPortal or a TemplatePortal.
    at 0.83a6145142c144fbb003.chunk.js:1
    at e.t.attach (0.83a6145142c144fbb003.chunk.js:1)
    at t.attach (0.83a6145142c144fbb003.chunk.js:1)
    at e.openAsPopup (0.83a6145142c144fbb003.chunk.js:1)
    at e.open (0.83a6145142c144fbb003.chunk.js:1)
    at t.handleClickOnHost (0.83a6145142c144fbb003.chunk.js:1)
    at Object.handleEvent (main.83a6145142c144fbb003.bundle.js:1)
    at Object.handleEvent (0.83a6145142c144fbb003.chunk.js:1)
    at Object.handleEvent (0.83a6145142c144fbb003.chunk.js:1)
    at Kr (0.83a6145142c144fbb003.chunk.js:1)
Ut @ 0.83a6145142c144fbb003.chunk.js:1
t.handleError @ 0.83a6145142c144fbb003.chunk.js:1
Kr @ 0.83a6145142c144fbb003.chunk.js:1
(anonymous) @ 0.83a6145142c144fbb003.chunk.js:1
(anonymous) @ 0.83a6145142c144fbb003.chunk.js:1
t.invokeTask @ 0.83a6145142c144fbb003.chunk.js:1
onInvokeTask @ 0.83a6145142c144fbb003.chunk.js:1
t.invokeTask @ 0.83a6145142c144fbb003.chunk.js:1
e.runTask @ 0.83a6145142c144fbb003.chunk.js:1
e.invokeTask @ 0.83a6145142c144fbb003.chunk.js:1
v @ 0.83a6145142c144fbb003.chunk.js:1
b @ 0.83a6145142c144fbb003.chunk.js:1

[MardariG]

I’ve used webpack until now, and now just migrated to angular CLI latest version, to test this issue, and it happens again. Just make a build with --prod and it fails when you try to open the datepicker modal.

[dbusacca]

I’ve had this Issue: I the package.json of the project I’ve had: "@angular/animations": "~6.0.3", "@angular/cdk": "~6.2.0", ng-pick-datetime requires @angular/cdk": "^6.0.0",

Because of this a differente copy of @angular/cdk was pullend on the “private” node_module of ng-pick-datetime

I’ve resolved setting the my project dependency to “@angular/cdk”: “^6.0.0”

Still i think that @angular/cdk should be declared as peer dependency