Components: Material package error: Can't bind to 'cdkPortalOutlet' since it isn't a known property of 'ng-template'.

[ganeshkbhat]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Directive present in imports or not used in template

• or Am I missing a import somewhere? Importing the whole module MatExpansionModule works

What is the current behavior?

Directive throws an error

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

Followed steps in https://material.angular.io/guide/schematics to create a navigation.

• ng add @angular/material

• ng generate @angular/material:material-nav --name menu-nav

• Add expansion panel to the component menu-nav

<mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            Link 1
          </mat-panel-title>
        </mat-expansion-panel-header>

        <a mat-list-item href="#">Link 2</a>

      </mat-expansion-panel>

• Add below components to declarations

  import { MatExpansionPanel,
  MatExpansionPanelTitle,
  MatExpansionPanelHeader
} from '@angular/material';
// Add to delcarations 

• ng serve

What is the use-case or motivation for changing an existing behavior?

NA

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

cli version

Angular CLI: 6.1.3
Node: 10.7.0
OS: linux x64
Angular: 6.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.3
@angular-devkit/build-angular     0.7.3
@angular-devkit/build-optimizer   0.7.3
@angular-devkit/build-webpack     0.7.3
@angular-devkit/core              0.7.3
@angular-devkit/schematics        0.7.3
@angular/cdk                      6.4.3
@angular/cli                      6.1.3
@angular/material                 6.4.3
@ngtools/webpack                  6.1.3
@schematics/angular               0.7.3
@schematics/update                0.7.3
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.9.2

Package json:

"dependencies": {
    "@angular/animations": "^6.1.2",
    "@angular/cdk": "^6.4.3",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.3",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.3",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.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": "~2.0.0",
    "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",
    "typescript": "~2.7.2"
  }

Is there anything else we should know?

Error stack:

Uncaught Error: Template parse errors:
Can't bind to 'cdkPortalOutlet' since it isn't a known property of 'ng-template'.
1. If 'cdkPortalOutlet' 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. ("aderId" [id]="id" #body><div class="mat-expansion-panel-body"><ng-content></ng-content><ng-template [ERROR ->][cdkPortalOutlet]="_portal"></ng-template></div><ng-content select="mat-action-row"></ng-content></di"): ng:///AppModule/MatExpansionPanel.html@0:377
Property binding cdkPortalOutlet 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". ("elledby]="_headerId" [id]="id" #body><div class="mat-expansion-panel-body"><ng-content></ng-content>[ERROR ->]<ng-template [cdkPortalOutlet]="_portal"></ng-template></div><ng-content select="mat-action-row"></ng"): ng:///AppModule/MatExpansionPanel.html@0:364
    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)

[crisbeto]

You need to add the PortalModule from '@angular/cdk/portal' to your module's imports.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}