Problem with aws-amplify library and Native Federation 19

[tsapasMi33]

For which library do you need help?

native-federation

Question

Hello,

We are trying to set up a new project on Angular 19.1.1 and Native Federation 19.0.5. we would like to use the aws-amplify client which comes from the package aws-amplify 6.12.1.

Amplify client works just fine in a classic project with the same versions.
After installing native federation and running the schematic the application builds (certain packages need to be skipped to do so).
And then the following errors show up in the browser's console

.

I am not really sure if this is an amplify or native federation related issue so a duplicate question will be addressed to the amplify team.

for reference here is the package.json

{
"name": "nep-socle-front",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --port 4000",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "^19.1.1",
"@angular/common": "^19.1.1",
"@angular/compiler": "^19.1.1",
"@angular/core": "^19.1.1",
"@angular/forms": "^19.1.1",
"@angular/platform-browser": "^19.1.1",
"@angular/platform-browser-dynamic": "^19.1.1",
"@angular/router": "^19.1.1",
"@aws-amplify/core": "6.9.1",
"@ngx-translate/core": "^16.0.4",
"@ngx-translate/http-loader": "^16.0.1",
"@primeng/themes": "^19.0.5",
"@softarc/native-federation-node": "^2.0.10",
"angular-oauth2-oidc": "^19.0.0",
"aws-amplify": "^6.12.1",
"chart.js": "4.4.7",
"chartjs": "0.3.24",
"es-module-shims": "^1.10.1",
"font-awesome": "^4.7.0",
"primeflex": "^3.3.1",
"primeicons": "^7.0.0",
"primeng": "^19.0.5",
"rxjs": "~7.8.1",
"tslib": "^2.8.1",
"uuid": "^11.0.5",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-architects/native-federation": "^19.0.5",
"@angular-devkit/build-angular": "^19.1.1",
"@angular/cli": "^19.1.1",
"@angular/compiler-cli": "^19.1.1",
"@types/jasmine": "^5.1.5",
"angular-eslint": "^19.0.2",
"eslint": "^9.18.0",
"eslint-config-prettier": "^10.0.1",
"eslint-plugin-prettier": "^5.2.2",
"eslint-plugin-unused-imports": "^4.1.4",
"jasmine-core": "^5.5.0",
"karma": "^6.4.4",
"karma-chrome-launcher": "^3.2.0",
"karma-coverage": "^2.2.1",
"karma-jasmine": "^5.1.0",
"karma-jasmine-html-reporter": "^2.1.0",
"prettier": "^3.4.2",
"prettier-eslint": "^16.3.0",
"typescript": "~5.7.3",
"typescript-eslint": "^8.20.0"
}
}

And the fedration.config

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

module.exports = withNativeFederation({
shared: {
...shareAll({
singleton: true,
strictVersion: true,
requiredVersion: 'auto',
}),
...share({
'@primeng/themes/aura': {
singleton: true,
strictVersion: true,
requiredVersion: 'auto',
transient: true,
includeSecondaries: false,
build: 'separate',
},
}),
},

skip: [
'rxjs/ajax',
'rxjs/fetch',
'rxjs/testing',
'rxjs/webSocket',
'os',
'path',
'fs/promises',
'child_process',
'util',
'fs',
'url',
'http',
'stream',
'crypto',
'https',
'http2',
// Add further packages you don't need at runtime
],

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

Could this be an issue in the way we share the library?
We have tried different combinations of import flags but none seems to resolve the issue.

Thank you in advance for any suggestions/solutions

[manfredsteyer]

Hi,

I think we should totally be able to make amplify work here. It seems to be in good shape (it provides ESM and a modern package.json).

Can you please provide a reproduction of the issue?

[tsapasMi33]

Hi,
thank you for the speedy response.

What kind of reproduction would help (StackBlitz?). Not really sure if this would work.

I can describe how to reproduce the issue.

1. Initialize a new angular project @19.1.1 (latest at the moment)
2. install aws-amplify@ 6.12.1 (latest at the moment)
3. configure amplify with a back-end for testing
   At this point in a classic app everything should work
4. Install native federation@latest and run schematic for shell.
   At this point the error shown in original thread occurs.
   Different configurations have given different error messages. From our understanding the Amplify singleton which holds the config is not shared correctly (?).

Additional info, not sure if relevant: We use the amplify client with an appsync and an api gateway. Our project is not an amplify project entirely.
The Amplify.configure() is called in the appConfig inside provideAppInitializer()

As this is my first time reporting an issue and have no previous experience, please let me know what kind of reproduction i could provide.

Thank you again for any insights.

[manfredsteyer]

Yes, some kind of StackBlitz or GitHub-Demo project would be nice. I don't know amplify, so it's a bit hard for me to reproduce the issue.

[tsapasMi33]

Hi again Manfred and thank you for your help.

Here is a link to a project which demonstrates the issue:
https://github.com/tsapasMi33/untitled1.git

In the master branch the project has no issues and works just fine.
In the second branch I have just installed Native Federation following the instructions in the doc and the project is broken.
Although the error messages differ with our actual project the issue seems to be the same.
Also we have noticed that vite adds errors like the one following message in the console.

[vite] (client) Pre-transform error: Failed to load url aws-amplify (resolved id: aws-amplify) in C:/Use...

This was not the case with previous Angular versions (19.0.6). I am not really sure if this is a serious error or a false alarm, and I am not able to debug it and find solutions right now. In case this error rings a bell please let me know. In the worst case scenario I can roll back to 19.0.6.

Also let me add to this point that we set up a project and used module federation with webpack and the library seems to be working out-of-the-box

In case you cannot connect to the back end please let me know.

Thanks again!

[tsapasMi33]

Hi, I created a third branch where I set the transient flag to true in shareAll and skipped some packages.
this branch shows the exact error message we have in our project.

Thanks!

[manfredsteyer]

Hi @tsapasMi33

Big thanks for the example, and sorry for the delay. I will look into it asap.

Best wishes,
Manfred