Covalent: Issue with angular v "^6.0.0" and "@covalent/core": "^2.0.0-beta.1", , Need to replace 'cdkPortalHost' by 'cdkPortalOutlet'

[Daniel-Dayan]

Issue with angular v "^6.0.0" and "@covalent/core": "^2.0.0-beta.1",, Need to replace 'cdkPortalHost' by 'cdkPortalOutlet'

Bug Report ?

When I import this specific module - CovalentDynamicFormsModule - this is the error i get
*All other modules are fine

error

Uncaught Error: Template parse errors:
Can't bind to 'cdkPortalHost' since it isn't a known property of 'ng-template'.

1. If 'cdkPortalHost' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [color]="defaultColor"
   (select)="handleSelect($event)">
   ][cdkPortalHost]="inputLabel" [ngIf]="true">
   
   
   
   "): ng:///CovalentFileModule/TdFileUploadComponent.html@7:15
   Property binding cdkPortalHost not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
   [color]="defaultColor"
   (select)="handleSelect($event)">
   [ERROR ->]
   
   

   html@7:2
   at syntaxError (compiler.js:215)
   at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14705)
   at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22712)
   at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22699)
   at compiler.js:22642
   at Set.forEach ()
   at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22642)
   at compiler.js:22552
   at Object.then (compiler.js:206)
   at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22551)

What is the motivation / use case for changing the behavior?

Need to replace 'cdkPortalHost' by 'cdkPortalOutlet'

{
  "name": "ca-pro1-ng6",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/cdk": "^6.0.1",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/flex-layout": "^5.0.0-beta.14",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/material": "^6.0.1",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "@covalent/core": "^2.0.0-beta.1",
    "@covalent/dynamic-forms": "^1.0.0",
    "@covalent/highlight": "^1.0.0",
    "@covalent/http": "^1.0.0",
    "@covalent/markdown": "^1.0.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.0",
    "@angular-devkit/build-angular": "~0.6.0",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.0",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/* Covalent */ 
import { CovalentCommonModule, CovalentLayoutModule, CovalentMediaModule, CovalentExpansionPanelModule,
  CovalentStepsModule, CovalentLoadingModule, CovalentDialogsModule, CovalentSearchModule, CovalentPagingModule,
  CovalentNotificationsModule, CovalentMenuModule, CovalentDataTableModule, CovalentMessageModule } from '@covalent/core';


/* any other core modules */
// (optional) Additional Covalent Modules imports
import { CovalentHttpModule } from '@covalent/http';
import { CovalentHighlightModule } from '@covalent/highlight';
import { CovalentMarkdownModule } from '@covalent/markdown';
import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
/* END Covalent */

@NgModule({
  imports: [
    CommonModule,


   /* END Covalent */
   CovalentCommonModule,
   CovalentLayoutModule,
   CovalentMediaModule,
   CovalentExpansionPanelModule,
   CovalentStepsModule,
   CovalentDialogsModule,
   CovalentLoadingModule,
   CovalentSearchModule,
   CovalentPagingModule,
   CovalentNotificationsModule,
   CovalentMenuModule,
   CovalentDataTableModule,
   CovalentMessageModule,
   // (optional) Additional Covalent Modules imports
   CovalentHttpModule.forRoot(),
   CovalentHighlightModule,
   CovalentMarkdownModule,
   //CovalentDynamicFormsModule,
   /* END Covalent */
  ],
  exports: [
    CovalentCommonModule,
    CovalentLayoutModule,
    CovalentMediaModule,
    CovalentExpansionPanelModule,
    CovalentStepsModule,
    CovalentDialogsModule,
    CovalentLoadingModule,
    CovalentSearchModule,
    CovalentPagingModule,
    CovalentNotificationsModule,
    CovalentMenuModule,
    CovalentDataTableModule,
    CovalentMessageModule,
    // (optional) Additional Covalent Modules imports
     CovalentHttpModule,
    CovalentHighlightModule,
    CovalentMarkdownModule,
   // CovalentDynamicFormsModule,
  ]
})
export class CovalentModule { }

[iget-master]

Duplicated of #1151

[emoralesb05]

Its already changed... https://github.com/Teradata/covalent/blob/develop/src/platform/core/file/file-upload/file-upload.component.html#L8

Can you try and install from the nightly build?

[emoralesb05]

OHHH, haaha are you pointing to the 2.0.0-beta.1 version of dynamic forms? I see it be in 1.0.0 so thats the issue haha

[cyberbeast]

Has this been fixed? I am still getting the same error.

compiler.js:1016 Uncaught Error: Template parse errors:
Can't bind to 'cdkPortalHost' since it isn't a known property of 'ng-template'.
1. If 'cdkPortalHost' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("              [color]="defaultColor"
               (select)="handleSelect($event)">
  <ng-template [ERROR ->][cdkPortalHost]="inputLabel" [ngIf]="true"></ng-template>
</td-file-input>
<div *ngIf="value">
"): ng:///CovalentFileModule/TdFileUploadComponent.html@7:15
Property binding cdkPortalHost not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
               [color]="defaultColor"
               (select)="handleSelect($event)">
  [ERROR ->]<ng-template [cdkPortalHost]="inputLabel" [ngIf]="true"></ng-template>
</td-file-input>
<div *ngIf="v"): ng:///CovalentFileModule/TdFileUploadComponent.html@7:2
    at syntaxError (compiler.js:1016)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14813)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24000)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:23987)
    at compiler.js:23930
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23930)
    at compiler.js:23840
    at Object.then (compiler.js:1007)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23839)

Is there any solution?

[kmeeraj]

This is about version mismatch problem. I was using Angularjs 6 with covalent 1.0. I have switched to covalent (all libraries ) tp 2.0.0-beta.2 version and it got fixed.

[kmeeraj]

After switching covalent 2.0.0-beta.2, i have started again from scratch and it worked.

[WagnerMattei]

Downgrade your "@angular/cdk" to 6.2.0