ignoreUnusedDeps: primeng dialog mask element not cleared from the DOM when closed

[alaindeurveilher]

With what library do you have an issue?

native-federation

Reproduction of the bug/regression with instructions

When using components with overlays/masks from primeNG, the overlayed elements and masks are not cleared/removed/hidden when attempting to close those elements.

To reproduce the issue, clone the repository: https://github.com/alaindeurveilher/overlay-components.git

The main component contains a button which opens a dialog

There are 2 branches

• "master" is the app with Angular/PrimeNG without Native Federation.
  • on master, the dialog opens correctly, and when closing the dialog, everything is working as expected and the backdrop is cleared
• "with-native-federation" is the same app configured as a shell with native federation
  • on with-native-federation, when closing the dialog, the backdrop mask div element is not cleared from the dom

Expected behavior

Example for the Dialog: All the DOM must be cleaned upon closing the dialog, the mask element should be cleared.

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

Native Federation: 20.1.6
Angular: 20.2.3
PrimeNG: 20.0.1

The application is zoneless. See the default federation.config.js on the repo for more information.

Other information

It's the same behaviour for all kinds of component that use a sort of overlay or a mask: popover, etc.

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

• Yes
• No

[alaindeurveilher]

Alright, here is a breakthrough. I created a new branch with a possible fix: with-native-federation-working-without-flag-ignoreUnusedDeps
https://github.com/alaindeurveilher/overlay-components/tree/with-native-federation-working-without-flag-ignoreUnusedDeps

So the problem seems to come from the new feature ignoreUnusedDeps.
So what I did is the following:

• turn the flag off in the federation.config.js (plus some adjustments acoordingly)

const { withNativeFederation, share, shareAll } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
    ...share({
      '@primeuix/themes': {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
        includeSecondaries: true,
        build: 'separate',
      },
      // '@angular/platform-browser/animations': {
      //   singleton: true,
      //   strictVersion: true,
      //   requiredVersion: 'auto',
      // },
      // '@angular/animations': {
      //   singleton: true,
      //   strictVersion: true,
      //   requiredVersion: 'auto',
      // },
    }),
  },

  externals: [
    "chart.js/auto"
  ],

  skip: [
    'rxjs/ajax',
    'rxjs/fetch',
    'rxjs/testing',
    'rxjs/webSocket',
    // Add further packages you don't need at runtime
  ],

  // Please read our FAQ about sharing libs:
  // https://shorturl.at/jmzH0

  features: {
    // New feature for more performance and avoiding
    // issues with node libs. Comment this out to
    // get the traditional behavior:
    ignoreUnusedDeps: false // <---- this is the main change required
  }
  
});

note: the commented parts with the animations modules is just to show that the problem is not about animations itself

• move all the dependencies that should belong to dev to the devDependencies.

{
  "name": "overlay-components",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "prettier": {
    "printWidth": 100,
    "singleQuote": true,
    "overrides": [
      {
        "files": "*.html",
        "options": {
          "parser": "angular"
        }
      }
    ]
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "20.2.3",
    "@angular/cdk": "20.2.1",
    "@angular/common": "^20.2.0",
    "@angular/compiler": "^20.2.0",
    "@angular/core": "^20.2.0",
    "@angular/forms": "^20.2.0",
    "@angular/platform-browser": "^20.2.0",
    "@angular/router": "^20.2.0",
    "@primeuix/themes": "^1.2.3",
    "primeicons": "^7.0.0",
    "primeng": "^20.0.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0"
  },
  "devDependencies": {
    "@angular-architects/native-federation": "^20.1.6",
    "@angular-devkit/build-angular": "^20.2.0",
    "@angular/build": "^20.2.0",
    "@angular/cli": "^20.2.0",
    "@angular/compiler-cli": "^20.2.0",
    "@softarc/native-federation-node": "^2.0.10",
    "@tailwindcss/postcss": "^4.1.12",
    "@types/jasmine": "~5.1.0",
    "es-module-shims": "^1.5.12",
    "jasmine-core": "~5.9.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "postcss": "^8.5.6",
    "tailwindcss": "^4.1.12",
    "tailwindcss-primeui": "^0.6.1",
    "typescript": "~5.9.2"
  },
  "engines": {
    "node": ">=22.12"
  },
  "packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
}

This solution (or maybe this workaround?) is a bit annoying because:

1. without the new feature we need some extra work to maintain the federation.config.js file
2. we also need extra work on the package.json. The packages moved from dependencies to devDependencies where added in dependencies because that what it's done when following all the official installation guides of those libs TailwindCSS, Native Federation...

So there might still be some fix to provide for this problem when the new feature ignoreUnusedDeps is on.
Thank you.