ignoreUnusedDeps seems to cause Angular Material not working. "Component ID generation collision detected" warnings and errors #1016
Description
With what library do you have an issue?
native-federation
Reproduction of the bug/regression with instructions
Using Angular Material in a shell/remote setup is causing warnings and errors regarding Angular Material. (remote is a web component/angular element)
From small reproduce app:
And from our app:
The error: "ERROR Error: mat-form-field must contain a MatFormFieldControl." is thrown many times and seems to be caused by the same problem, as the error does not appear when accessing the remote directly in the browser without the shell.
The number of warnings increases the more components you use so it seems like Angular Material is not shared correctly between the shell and remote.
Reproduction of the bug/regression with instructions
I have created two repositories
- Shell: https://github.com/sys-alex-matic/Native-federation-Angular-Material-issue (localhost:4200)
- Remote: https://github.com/sys-alex-matic/Native-federation-Angular-Material-issue-remote (localhost:3000)
Spin up the two applications and open http://localhost:4200/. Click on link mfe1 which loads the micro frontend which causes the warnings.
Bonus info: When I only used Angular Material components in the remote and not in the shell* there were no warnings.
*shell had dependency to Angular Material and theme setup in styles.scss but no use of Material components.
Expected behavior
Angular Material should work without any issue with ignoreUnusedDeps.
In our setup removing ignoreUnusedDeps in the shell seems to fix the problem. If I also remove ignoreUnusedDeps from the remote it causes another error:
Versions of Native/Module Federation, Angular, Node, Browser, and operating system
native-federation version 20.1.7
angular cli version 20.3.12
node version 22.21.1
browser: Chrome
Other information
Seems very similar to this issue from June 2026: #875
We are actually using Module Federation but ran into the same problem so tried to change to Native Federation but the same problem just the error is different:
app.component.html:10 ERROR ɵNotFound: NG0201: No provider found for InjectionToken _ViewRepeater. Source: Standalone[OverviewComponent]. Find more at https://v20.angular.dev/errors/NG0201
at createRuntimeError (root_effect_scheduler.mjs:924:19)
at NullInjector.get (root_effect_scheduler.mjs:1494:27)
at R3Injector.get (root_effect_scheduler.mjs:2052:33)
at R3Injector.get (root_effect_scheduler.mjs:2052:33)
at R3Injector.get (root_effect_scheduler.mjs:2052:33)
at ChainedInjector.get (debug_node.mjs:13494:36)
at lookupTokenUsingModuleInjector (debug_node.mjs:1718:39)
at getOrCreateInjectable (debug_node.mjs:1766:12)
at ɵɵdirectiveInject (debug_node.mjs:13545:19)
at ɵɵinject (root_effect_scheduler.mjs:1061:60)
And a lot of warnings:
node_modules_angular…s_mjs-_b9231.js:628 NG0912: Component ID generation collision detected. Components '_StructuralStylesLoader' and '_StructuralStylesLoader' with selector 'structural-styles' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID. Find more at https://v20.angular.dev/errors/NG0912
I would be willing to submit a PR to fix this issue
- Yes
- No