Components: Mat menu is broken when Ivy is enabled in Angular 8.

[ms-dosx86]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue
I couldn't enable Ivy on stackblitz, without Ivy it works fine.

Steps to reproduce:

1. create new app with ng new ivy-test --enable-ivy
2. add angular material
3. add MatMenuModule
4. add basic mat menu component from docs
5. open the menu

Expected Behavior

What behavior were you expecting to see?
It should work fine.

Actual Behavior

What behavior did you actually see?

core.js:7187 ERROR TypeError: Cannot read property 'createEmbeddedView' of undefined

Environment

  "dependencies": {
    "@angular/animations": "^8.0.0",
    "@angular/cdk": "^8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/material": "^8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.1",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }

• Browser(s): Google Chrome Version 74.0.3729.169 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 x64

[benneq]

Duplicate? https://github.com/angular/components/issues/16041

[josephperrott]

Closed #16041, instead using this issue as the tracking issue for this Ivy issue.

[pshurygin]

I'm having typechecking errors with ivy when using property binding like [overlapTrigger]="variable" (fullTemplateTypeCheck=false). I wonder if this has the same root cause.
__ng_typecheck__.ts(752,9): error TS2339: Property 'yPosition' does not exist on type 'HTMLElement'. __ng_typecheck__.ts(753,9): error TS2339: Property 'xPosition' does not exist on type 'HTMLElement'. __ng_typecheck__.ts(754,9): error TS2339: Property 'overlapTrigger' does not exist on type 'HTMLElement'.

[devversion]

That is tracked as part of #16028

[shawndotey]

Closed #16041, instead using this issue as the tracking issue for this Ivy issue.

Wait, now this is closed and I am still having the exact same issue after ng update, deleting node_modules and npm installing to:

"@angular/cdk": "^8.0.1", "@angular/core": "^8.0.2", "@angular/forms": "^8.0.2", "@angular/material": "^8.0.1",

[benneq]

Maybe the fix will come with material 8.0.2?

[devversion]

The issue was caused by a ngcc bug. Therefore the fix is not coupled to a release of Angular Material. The ngcc fix landed in the following versions of Angular already: 8.1.0-rc.0, 8.1.0-next.3, 8.1.0-next.2.

[shawndotey]

Thank you @devversion.

[Jamie-Vangeysel]

yarn list v1.17.3
├─ @angular-devkit/[email protected]
├─ @angular-devkit/[email protected]
├─ @angular-devkit/[email protected]
├─ @angular-devkit/[email protected]
├─ @angular-devkit/[email protected]
├─ @angular-devkit/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
├─ @angular/[email protected]
└─ @angular/[email protected]
✨ Done in 0.45s.

Still having this issue

[mjamin]

I also still have that issue when trying to build a library with angular-cli.

dependencies:
@angular/animations 8.2.4
@angular/cdk 8.1.4
@angular/common 8.2.4
@angular/compiler 8.2.4
@angular/core 8.2.4
@angular/forms 8.2.4
@angular/material 8.1.4
@angular/platform-browser 8.2.4
@angular/platform-browser-dynamic 8.2.4
@angular/router 8.2.4

devDependencies:
@angular-devkit/build-angular 0.803.2
@angular-devkit/build-ng-packagr 0.803.2
@angular/cli 8.3.2
@angular/compiler-cli 8.2.4
@angular/language-service 8.2.4
ng-packagr 5.5.0
typescript 3.4.5

[vrkansagara]

Error :- Property 'overlapTrigger' does not exist on type 'HTMLElement'.

~~~html

            <button mat-menu-item>
                <mat-icon>account_circle</mat-icon>
                <span>My Profile</span>
            </button>

~~~
any solution for this ?

[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._}