material angular CLI issue.There is no directive with "exportAs" set to "mdMenu"

Question

After changing the materialModule (deprecated one) to customMaterialModule (according to this url: https://material.angular.io/guide/getting-started ), I had to update my package.json (I did npm update --save). Then I the error below. (I've already opened this issue on github material issues https://github.com/angular/material2/issues/7377 but no good answer)

compiler.es5.js:1694 Uncaught Error: Template parse errors:
  There is no directive with "exportAs" set to "mdMenu" ("
  <md-icon>more_vert</md-icon>
  </button>
  <md-menu [ERROR ->]#menu="mdMenu">
  <button md-menu-item (click)="callAssistance()">
  <span translate>Help</"): ng:///CatalogModule/MenuGlobalComponent.html@3:9
   at syntaxError (compiler.es5.js:1694)
   at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (compiler.es5.js:12932)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (compiler.es5.js:27126)
at compiler.es5.js:27045
at Set.forEach (<anonymous>)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:27045)
at compiler.es5.js:26932
at Object.then (compiler.es5.js:1683)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26931)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26860)

package.json:

"dependencies": {
"@angular/animations": "^4.4.3",
"@angular/cdk": "github:angular/cdk-builds",
"@angular/common": "^4.4.3",
"@angular/compiler": "^4.4.3",
"@angular/compiler-cli": "^4.4.3",
"@angular/core": "^4.4.3",
"@angular/flex-layout": "^2.0.0-beta.6",
"@angular/forms": "^4.4.3",
"@angular/http": "^4.4.3",
"@angular/material": "github:angular/material2-builds",
"@angular/platform-browser": "^4.4.3",
"@angular/platform-browser-dynamic": "^4.4.3",
"@angular/platform-server": "^4.4.3",
"@angular/router": "^4.4.3",
"bootstrap": "^3.3.7",
"core-js": "^2.5.1",
"hammerjs": "^2.0.8",
"material-components-web": "^0.7.0",
"ng2-translate": "^5.0.0",
"ngx-bootstrap": "^1.9.3",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.4.3",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.18"
},

html file :

<button md-icon-button [mdMenuTriggerFor]="menuCart">
    <md-icon>shopping_cart</md-icon><span *ngIf="selectedProducts?.length>0" class="stefanka-basket-accent counter-shopping">{{selectedProducts?.length}}</span>
</button>
<md-menu #menuCart="mdMenu" >
    <div [ngClass]="{ 'empty-cart': selectedProducts?.length == 0, 'full-cart':  selectedProducts?.length != 0, 'cart-container': true }">
        <md-list *ngIf="selectedProducts" class="cart-list-content">
            <md-list-item *ngFor="let product of selectedProducts">
                <img md-list-avatar [src]="product.thumbUrl" alt="Product item in Cart">
                <h3 md-line> {{product.productMetadatas._product_name}} </h3>
                <p md-line>
                <span> {{product.productMetadatas._product_price| currency:'CAD':true}} </span>
                <span> -- <button md-icon-button (click)="deleteProduct(product)" (touch)="deleteProduct(product)"> <md-icon>delete</md-icon> </button> </span>
                </p>
            </md-list-item>
        </md-list>
        <div class="cart-list-content" *ngIf="selectedProducts?.length == 0">
            <span translate>Empty basket</span>
        </div>
        <button class="stefanka-button-large stefanka-button-accent" *ngIf="selectedProducts?.length>0" (click)="switchToGoodbye()" translate>TRY ON MY SELECTION</button>
    </div>


</md-menu>

appModule.ts:

.
.
.
import { CustomMaterialModule } from '../customMaterialModule';

.
.
.

@NgModule({
  schemas:[NO_ERRORS_SCHEMA],
  imports: [
    .
    .
    .
    CustomMaterialModule,
    FlexLayoutModule,
    .
    .
    .
  ],
  declarations: [
    .
    .
    .
  ],
  providers: [ProductService],
  exports: [CatalogComponent, CustomMaterialModule],
  entryComponents: [AssistanceDialog],


})
export class CatalogModule { }

customMaterialModule.ts :

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

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

Answer 1

You are importing material modules with Mat prefix so you have to use mat prefix in your template amd typescript code. Change the following:

<md-menu #menuCart="mdMenu" >

to:

<mat-menu #menuCart="matMenu" >

.. and also all other md prefix to mat.

See this answer example: https://stackoverflow.com/a/46469671/1791913

See the usage in this stackblitz demo.