Builder not working right with Angular Material - Attempting to attach an unknown Portal type

[JuNe98]

With what library do you have an issue?

native-federation

Reproduction of the bug/regression with instructions

I am using this lib in an NX monorepo. I am implementing a header-nav in a publishable lib which contains a mat-menu. When I try to use this header-nav and click the mat-menu trigger, I get the following error:

I have already opened a ticket at the official Angular components repo and @devversion could confirm that with your builder two CDK version are existing: angular/components#30686 (comment)

I have already built a reproduction of the error in a public repo: https://github.com/JuNe98/nx-menu-bug

I also can confirm that the error only come up in Angular Material Version 19.2.4 or newer. 19.2.3 works fine.

Expected behavior

I would expect open the mat-menu causing no error.

Versions of Native/Module Federation, Angular, Node, Browser, and operating system

Native Federation: 19.0.16
Angular: 19.2.3
Angular Material: >=19.2.4

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[devversion]

I don't have a lot of context about Module Federation here, but out of curiosity I've looked more. I believe the issue could be?! that the shared chunks that are now part of e.g. @angular/cdk/fesm2022 aren't picked up as "shared" because (thesis) this plugin/federation only picks up the chunk specified in the exports[entrypoint].default export condition?

module-federation-plugin/libs/mf/src/utils/share-utils.ts

Lines 201 to 213 in 8dbc749

	for (const key of keys) {
	// const relPath = exports[key]['default'];
	const secondaryName = path.join(parent, key).replace(/\\/g, '/');
	if (exclude.includes(secondaryName)) {
	continue;
	}
	result[secondaryName] = {
	...shareObject,
	// import: path.join(libPath, relPath)
	};
	}

[gremmil]

Same problem here, but with MatDialog, any solution?

Update: Downgrade Angular/Material, Angular/CDK, and Angular/Animations to stable version 18. The NG0912 warnings and Attempting to attach an unknown Portal type errors no longer occur.

Note: execute npm i --force

[ChristianLoosliVGT]

i have the same error and the same warnings. any updates here?

[gremmil]

Tengo el mismo error y las mismas advertencias. ¿Alguna actualización aquí?

Have you tried downgrading Angular Material? It worked for me.

[MKlingner]

I have created a workaround. This script is bundling the parts of cdk, that are important to me, into one cdk-bundle.
This will create just one javascript file references by native federation and fix the problem with double declared TemplatePortal class.
After that I have to change the imports from "@angular/cdk/portal" to "@angular/cdk/cdk-bundle" in my components.

import { glob } from "glob";
import path from "node:path";
import fs from "node:fs/promises";

const include = ["a11y", "drag-drop", "overlay", "portal", "scrolling"];

const includeRegex = new RegExp(`(${include.join("|")}).mjs$`);
const cdkPath = "./node_modules/@angular/cdk";
const cdkScriptPath = path.resolve(cdkPath, "fesm2022");
const definitionPath = path.resolve(cdkPath, "cdk-bundle");
const packageJsonFilePath = path.resolve(cdkPath, "package.json");
const bundleFilePath = path.resolve(cdkScriptPath, "cdk-bundle.mjs");
const definitionFilePath = path.resolve(definitionPath, "index.d.ts");

try {
  await fs.mkdir(definitionPath);
} catch (e) {
  if (e.code !== "EEXIST") {
    throw e;
  }
}
// read the package parts to include
const files = glob.sync(`${cdkScriptPath}/*.mjs`).filter((file) => {
  return (
    !file.match(/-[a-z0-9]{8}\.mjs$/) &&
    !file.match(/(testing|cdk-bundle)\.mjs$/) &&
    file.match(includeRegex)
  );
});
// create the definition file
await fs.writeFile(
  definitionFilePath,
  files
    .map((file) => {
      const fileName = path.basename(file).replace(/\.mjs$/, "");
      return `export * from '../${fileName}'`;
    })
    .join("\n"),
  { encoding: "utf-8" },
);

// create the bundle file
await fs.writeFile(
  bundleFilePath,
  files
    .map((file) => {
      const fileName = path.basename(file);
      return `export * from './${fileName}'`;
    })
    .join("\n"),
  { encoding: "utf-8" },
);

// update the package.json file
const packageJson = JSON.parse(
  await fs.readFile(packageJsonFilePath, { encoding: "utf-8" }),
);
packageJson.exports["./cdk-bundle"] = {
  types: "./cdk-bundle/index.d.ts",
  default: "./fesm2022/cdk-bundle.mjs",
};
await fs.writeFile(
  packageJsonFilePath,
  JSON.stringify(packageJson, null, 2),
  { encoding: "utf-8" },
);

[manfredsteyer]

It's connected to #819 and it will be solved very soon.

[manfredsteyer]

works now.