Covalent: Issue with [email protected], Need to replace 'cdkPortalHost' by 'cdkPortalOutlet'

Created on 14 May 2018 · 9Comments · Source: Teradata/covalent

Hi I installed a new Angular App with Angular Material + Covalent.

Usually everything works perfectly but this morning, there is an unusal error:

Can't bind to 'cdkPortalHost' since it isn't a known property of 'ng-template'.

If 'cdkPortalHost' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.

To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

][cdkPortalHost]="content">

"): ng:///CovalentLoadingModule/TdLoadingComponent.html@22: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". ("

[ERROR ->]

"): ng:///CovalentLoadingModule/TdLoadingComponent.html@22:2
at syntaxError (compiler.js:215)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
at compiler.js:22639
at Set.forEach ()
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
at compiler.js:22549
at Object.then (compiler.js:206)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)

My packages:

  "dependencies": {
    "@angular/animations": "^6.0.1",
    "@angular/cdk": "^6.0.1",
    "@angular/common": "^6.0.1",
    "@angular/compiler": "^6.0.1",
    "@angular/core": "^6.0.1",
    "@angular/forms": "^6.0.1",
    "@angular/http": "^6.0.1",
    "@angular/material": "^6.0.1",
    "@angular/platform-browser": "^6.0.1",
    "@angular/platform-browser-dynamic": "^6.0.1",
    "@angular/router": "^6.0.1",
    "@covalent/core": "^1.0.0",
    "core-js": "^2.5.6",
    "hammerjs": "^2.0.8",
    "rxjs": "^6.1.0",
    "rxjs-compat": "^6.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "~6.0.1",
    "@angular/compiler-cli": "^6.0.1",
    "@angular/language-service": "^6.0.1",
    "@types/jasmine": "~2.8.7",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.0.8",
    "codelyzer": "^4.3.0",
    "jasmine-core": "~3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.4.2",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^1.1.0",
    "protractor": "~5.3.2",
    "ts-node": "~6.0.3",
    "tslint": "~5.10.0",
    "typescript": "2.7.2",
    "@angular-devkit/build-angular": "~0.6.1"
  }

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common'
//UI
import { AngularMaterialModule } from './modules/angular-material.module';
import { CovalentModule } from './modules/covalent.module';


import { AppComponent } from './app.component';

import { RecordComponent } from './meetings/record.component';

@NgModule({
  declarations: [
    AppComponent,
    RecordComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularMaterialModule,
    CovalentModule,
    BrowserAnimationsModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

covalent.module.ts

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

import { CovalentLayoutModule } from '@covalent/core/layout';
import { CovalentLoadingModule } from '@covalent/core/loading';
import { CovalentMenuModule } from '@covalent/core/menu';
import { CovalentSearchModule } from '@covalent/core/search';
import { CovalentNotificationsModule } from '@covalent/core/notifications';
import { CovalentPagingModule } from '@covalent/core/paging';
import { CovalentFileModule } from '@covalent/core/file';
import { CovalentDialogsModule } from '@covalent/core/dialogs';

@NgModule({
  exports: [
    CovalentLayoutModule,
    CovalentLoadingModule,
    CovalentMenuModule,
    CovalentSearchModule,
    CovalentNotificationsModule,
    CovalentPagingModule,
    CovalentFileModule,
    CovalentDialogsModule,
  ]
})
export class CovalentModule { }

angular-material.module.ts

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

import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
} from '@angular/material';

@NgModule({
  exports: [
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
  ]
})
export class AngularMaterialModule { }

Any idea?

Source

ranouf

Covalent: Issue with [email protected], Need to replace 'cdkPortalHost' by 'cdkPortalOutlet'

Most helpful comment

All 9 comments

Related issues