bug(mat-menu): Attempting to attach an unknown Portal type #30686
Comments
|
Thanks for the report. We've tried to reproduce this a bit, but couldn't. We've recently landed some packaging changes for Material that would seem suspicious here, but after checking the If possible, could you share more information:
Edit: I tried a fresh Analog app with |
devversion
added
the
needs: clarification
|
@devversion thank you for checking. I am using I get the error on In my case I am developing microfrontends in an NX monorepo and I am facing this issue when I consume a library which holds my
{
"name": "shell",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"prefix": "app",
"sourceRoot": "apps/shell/src",
"tags": [],
"targets": {
"build": {
"executor": "@angular-architects/native-federation:build",
"options": {},
"configurations": {
"production": {
"target": "shell:esbuild:production"
},
"development": {
"target": "shell:esbuild:development",
"dev": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"executor": "@angular-architects/native-federation:build",
"options": {
"target": "shell:serve-original:development",
"rebuildDelay": 0,
"dev": true,
"port": 0
}
},
"extract-i18n": {
"executor": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "shell:build"
}
},
"lint": {
"executor": "@nx/eslint:lint"
},
"test": {
"executor": "@analogjs/vitest-angular:test"
},
"serve-static": {
"executor": "@nx/web:file-server",
"options": {
"buildTarget": "shell:build",
"port": 4200,
"spa": true
}
},
"esbuild": {
"executor": "@angular-devkit/build-angular:application",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "dist/apps/shell",
"index": "apps/shell/src/index.html",
"polyfills": ["zone.js", "es-module-shims"],
"tsConfig": "apps/shell/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"stylePreprocessorOptions": {
"includePaths": ["libs/public-components/src/styles"]
},
"assets": [
{
"glob": "**/*",
"input": "apps/shell/public"
}
],
"styles": [
"libs/public-components/src/styles/global.scss",
"apps/shell/src/styles.scss"
],
"scripts": [],
"browser": "apps/shell/src/main.ts"
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kb",
"maximumError": "8kb"
}
],
"outputHashing": "all"
},
"development": {
"assets": [
{
"glob": "**/*",
"input": "apps/shell/public",
"output": "/"
},
{
"glob": "app.config.json",
"input": "apps/shell/dev-configs/",
"output": "/assets/configs/"
},
{
"glob": "federation.manifest.json",
"input": "apps/shell/dev-configs/",
"output": "/assets/"
}
],
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve-original": {
"executor": "@nx/angular:module-federation-dev-server",
"options": {
"port": 4200,
"publicHost": "http://localhost:4200"
},
"configurations": {
"production": {
"buildTarget": "shell:esbuild:production"
},
"development": {
"buildTarget": "shell:esbuild:development",
"proxyConfig": "apps/shell/src/proxy.conf.json"
}
},
"defaultConfiguration": "development"
},
"stylelint": {
"executor": "nx-stylelint:lint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["apps/shell/**/*.scss"]
}
}
}
}
{
"name": "public-components",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "libs/public-components/src",
"prefix": "idp",
"projectType": "library",
"tags": [],
"targets": {
"build": {
"executor": "@nx/angular:package",
"outputs": ["{workspaceRoot}/dist/{projectRoot}"],
"options": {
"project": "libs/public-components/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "libs/public-components/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "libs/public-components/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
"test": {
"executor": "@nx/vite:test",
"outputs": ["{options.reportsDirectory}"],
"options": {
"reportsDirectory": "../../coverage/libs/public-components"
}
},
"lint": {
"executor": "@nx/eslint:lint"
},
"stylelint": {
"executor": "nx-stylelint:lint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["libs/public-components/**/*.scss"]
}
}
}
}Hope this helps :) |
|
@devversion I also get some strange warnings since 19.2.4:
Final component which holds my language selector looks like this:
Here is the HTML template for this component: <button mat-icon-button class="menu-button" #navMenuTrigger="matMenuTrigger" [matMenuTriggerFor]="navMenu" dmThemeAccent>
<mat-icon>apps</mat-icon>
</button>
<mat-menu #navMenu="matMenu" class="idp-nav-menu">
@for (item of allNavItemsBlock(); track $index) {
<ng-container *ngTemplateOutlet="navitem; context: { $implicit: item }"></ng-container>
} @if (isNavigationPinned()) {
<button mat-menu-item (click)="unpinMenu()">
<mat-icon>keep_off</mat-icon>
<span class="menu-item-label">{{ 'unpin' | t | cap }}</span>
</button>
} @else {
<button mat-menu-item (click)="pinMenu()">
<mat-icon>keep</mat-icon>
<span class="menu-item-label">{{ 'pin' | t | cap }}</span>
</button>
}
</mat-menu>
<div class="logo-outer-container">
<div class="logo-container">
<img [src]="headerNavConfig().logoUrl" alt="Logo" class="logo" />
</div>
</div>
<div class="actions-container">
<!-- @if(headerNavConfig().showLanguageSelector) { -->
<idp-language-selector></idp-language-selector>
<!-- } -->
<div class="user-info-circle" #userMenuTrigger="matMenuTrigger" [matMenuTriggerFor]="userMenu" tabindex="0" [matTooltip]="firstLastName()">
<span>{{ firstLetters() }}</span>
</div>
</div>
<mat-menu #userMenu="matMenu" class="idp-nav-menu">
<span mat-menu-item disabled>{{ firstLastName() }}</span>
<button mat-menu-item (click)="clickLogout()">
<mat-icon>logout</mat-icon>
<span class="menu-item-label">{{ 'logout' | t | cap }}</span>
</button>
</mat-menu>
<ng-template #navitem let-item>
<button mat-menu-item [disabled]="item.disabled" [routerLink]="item.link" class="idp-nav-item" [class.active]="currentPath.indexOf(item.link) >= 0">
<mat-icon>{{ item.icon }}</mat-icon>
<span>{{ item.titleTranslateKey ? (item.titleTranslateKey | t | cap) : item.title }}</span>
</button>
</ng-template> |
|
I will try to look into the information you shared, but as an immediate hint in case you are looking: These new warnings are a sign that somehow you end up with two versions of the Angular CDK. There are two versions bundled; and that's causing the issue. |
|
I will try reproduce this bug in a new repo and share it with you. |
|
@devversion I have successfully reproduced the bug in a new repo: https://github.com/JuNe98/nx-menu-bug If you think it's a builder problem, please let me know and I will open a ticket at https://github.com/angular-architects/module-federation-plugin |
|
@JuNe98 Thanks for the reproduction. That really helps. A few things:
I'll close this here as I don't think it's something we can act upon. Feel free to cc me on the federation issue. Happy to join the conversation; and if it doesn't work out as expected, we are surely happy to work together with e.g. Manfred 
|
|
@devversion thank you for your investigation and time. I have opened up a ticket there: angular-architects/module-federation-plugin#801 |
Is this a regression?
The previous version in which this bug was not present was
19.2.3
Description
Since
@angular/materialversion19.2.4I am getting the following error when I try to open amat-menu:It works smoothly with any Angular Material version before 19.2.4.
Reproduction
I was not able to reproduce this bug in stackblitz. I am not sure if it makes any differences but I am using NX in my repo.
EDIT: Successfully reproduced in a public repo: https://github.com/JuNe98/nx-menu-bug
My HTML template:
My component:
This are my dependencies:
Expected Behavior
Should open the
MatMenuwithout any erros.Actual Behavior
Nothing, only error in the console shows up.
Environment
The text was updated successfully, but these errors were encountered: