Problem in [email protected] with [email protected] and [email protected]

[tsapasMi33]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

GraphQL API, REST API, Authentication

Amplify Version

v6

Amplify Categories

No response

Backend

Other

Environment information

  System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1365U
    Memory: 12.50 GB / 31.66 GB
  Binaries:
    Node: 22.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.99)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @angular-architects/native-federation: ^19.0.5 => 19.0.5
    @angular-devkit/build-angular: ^19.1.1 => 19.1.1
    @angular/animations: ^19.1.1 => 19.1.1
    @angular/cli: ^19.1.1 => 19.1.1
    @angular/common: ^19.1.1 => 19.1.1
    @angular/compiler: ^19.1.1 => 19.1.1
    @angular/compiler-cli: ^19.1.1 => 19.1.1
    @angular/core: ^19.1.1 => 19.1.1
    @angular/forms: ^19.1.1 => 19.1.1
    @angular/platform-browser: ^19.1.1 => 19.1.1
    @angular/platform-browser-dynamic: ^19.1.1 => 19.1.1
    @angular/router: ^19.1.1 => 19.1.1
    @aws-amplify/core: 6.9.1 => 6.9.1
    @aws-amplify/core/internals/adapter-core:  undefined ()
    @aws-amplify/core/internals/aws-client-utils:  undefined ()
    @aws-amplify/core/internals/aws-client-utils/composers:  undefined ()
    @aws-amplify/core/internals/aws-clients/cognitoIdentity:  undefined ()
    @aws-amplify/core/internals/aws-clients/pinpoint:  undefined ()
    @aws-amplify/core/internals/providers/pinpoint:  undefined ()
    @aws-amplify/core/internals/utils:  undefined ()
    @aws-amplify/core/server:  undefined ()
    @ngx-translate/core: ^16.0.4 => 16.0.4
    @ngx-translate/http-loader: ^16.0.1 => 16.0.1
    @primeng/themes: ^19.0.5 => 19.0.5
    @softarc/native-federation-node: ^2.0.10 => 2.0.18
    @types/jasmine: ^5.1.5 => 5.1.5
    angular-eslint: ^19.0.2 => 19.0.2
    angular-oauth2-oidc: ^19.0.0 => 19.0.0
    aws-amplify: ^6.12.1 => 6.12.1
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    chart.js: 4.4.7 => 4.4.7
    chart.js-auto:  undefined ()
    chart.js-helpers:  undefined ()
    chartjs: 0.3.24 => 0.3.24
    es-module-shims: ^1.10.1 => 1.10.1
    eslint: ^9.18.0 => 9.18.0 (8.57.1)
    eslint-config-prettier: ^10.0.1 => 10.0.1
    eslint-plugin-prettier: ^5.2.2 => 5.2.2
    eslint-plugin-unused-imports: ^4.1.4 => 4.1.4
    font-awesome: ^4.7.0 => 4.7.0
    jasmine-core: ^5.5.0 => 5.5.0 (4.6.1)
    karma: ^6.4.4 => 6.4.4
    karma-chrome-launcher: ^3.2.0 => 3.2.0
    karma-coverage: ^2.2.1 => 2.2.1
    karma-coverage-coffee-example:  1.0.0
    karma-jasmine: ^5.1.0 => 5.1.0
    karma-jasmine-html-reporter: ^2.1.0 => 2.1.0
    prettier: ^3.4.2 => 3.4.2
    prettier-eslint: ^16.3.0 => 16.3.0
    primeflex: ^3.3.1 => 3.3.1
    primeicons: ^7.0.0 => 7.0.0
    primeng: ^19.0.5 => 19.0.5
    rxjs: ~7.8.1 => 7.8.1
    rxjs/ajax:  undefined ()
    rxjs/fetch:  undefined ()
    rxjs/operators:  undefined ()
    rxjs/testing:  undefined ()
    rxjs/webSocket:  undefined ()
    tslib: ^2.8.1 => 2.8.1
    typescript: ~5.7.3 => 5.7.3
    typescript-eslint: ^8.20.0 => 8.20.0
    uuid: ^11.0.5 => 11.0.5 (9.0.1, 8.3.2)
    zone.js: ~0.15.0 => 0.15.0
  npmGlobalPackages:
    corepack: 0.30.0
    npm: 10.9.2

Describe the bug

We are trying to set up a project with angular 19.1.1 and [email protected].
The set up works fine in classic Angular style.
After installing Native Federation and running the schematics the app builds (certain packages need to be skipped in federation.config.js to do so)
The following errors show up in the browser and the app does not start.

As I am not sure if this is a Native federation or Amplify problem a duplicate issue has been posted to the native federation team.

For reference package.json and federation.config.js will be appended at the end of the issue.

Different configurations have given other messages. Our suspicis is that the Amplify singleton is not correctly shared between other classes that need it.

Certain error messages were about making a call before calling Amplify.configure() which was not the case as we could always recover the config via Amplify.getConfig() before the calls in question and it was present,

Expected behavior

Work out-of-the-box as in microfront-end example in https://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html (Module Federation used in example)

Reproduction steps

1. Create angular project @19.1.1 (latest at the moment)
2. install [email protected]
3. Test as a classic angular app to see if everything works fine
4. Install native Federation @19.0.5 and run shell schematics
5. skip packages (as in federation.config.js)
6. Errors should show in browser's console

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

function amplifyInitializer(): void {
Amplify.configure(
{
API: {
GraphQL: {
endpoint: getEndpoint(),
region: 'eu-west-3',
defaultAuthMode: 'oidc',
},
REST: {
api: {
endpoint: 'https://**********.execute-api.eu-west-3.amazonaws.com/v1',
region: 'eu-west-3',
},
},
},
},
{
API: {
GraphQL: {
headers: async () => {
return {
Authorization: 'Bearer ' + sessionStorage.getItem('access_token'),
host: 'fpl3kbwtxzdklbivpdsmk6uuru.appsync-api.eu-west-3.amazonaws.com',
};
},
},
REST: {
headers: async () => {
return {
'X-Api-Key': '*******kC1j',
Authorization: 'Bearer ' + sessionStorage.getItem('access_token'),
};
},
},
},
Auth: {
tokenProvider: new CustomTokenProvider(),
},
}
);
}

class CustomTokenProvider implements TokenProvider {
async getTokens(): Promise<AuthTokens | null> {
const accessToken = sessionStorage.getItem('access_token');
if (!accessToken) {
return null;
}

return {
  accessToken: {
    payload: this.decodeJWT(accessToken),
    toString: () => accessToken,
  },
};

}

private decodeJWT(token: string): Record<string, string> {
try {
const payload = token.split('.')[1];
return JSON.parse(atob(payload));
} catch (e) {
console.error(e);
return {};
}
}
}

function getEndpoint() {
return https://cloudfront.***********.com/graphql?header=${btoa( JSON.stringify({ host: 'fpl3***************.appsync-api.eu-west-3.amazonaws.com', Authorization: 'Bearer ' + (sessionStorage.getItem('access_token') ?? ''), }) )}&payload=e30=;
}

this method is called inside a a provideAppInitializer in app.config.ts

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[cwomack]

Hello, @tsapasMi33 and thanks for opening this issue. It looks like you have a duplicate dependency for @aws-amplify/core in your package.json (possibly after upgrading from v5 or a lower version). Can you please remove this and see if it resolves the issue?

[tsapasMi33]

Hi @cwomack and thank you for your help.

I added the dep while trying to find a solution to the issue. removing it does not solve the issue.

I have set up a project where the problem is reproduced:
https://github.com/tsapasMi33/untitled1.git

In case that helps, I have also opened an issue with the Native Federation Team here:

angular-architects/module-federation-plugin#734.

Let me also add to this point that we have set up a project with Module Federation and the library seems to be working out of the box.

Let me know if i can provide more info.

Thanks!

[cwomack]

@tsapasMi33, thank you for linking the associated issues and providing a sample repo! I haven't personally used Native Federation so I'll look into this a follow up after trying to reproduce this locally.

[tsapasMi33]

Hi @cwomack,

Just letting you know that a solution was proposed by Manfred Steyer (Native Federation).

you can check out this thread: angular-architects/module-federation-plugin#734

In short, we have to import Amplify from the internal package (@aws-amplify/core) to get it to work correctly as an issue is caused with the internally shared singleton.

We are still getting some warnings on the browser regarding the hub (No direct interaction on our part).

Would be great to have it to work out of the box though as is the case with module federation.

In case any news come up please give me a heads up.

Thank you!!

[HuiSF]

Hi @tsapasMi33 I read the thread you linked above, the suggested shared transient dependency settings makes sense to me, as the singleton that resides in @aws-amplify/core shall be shared across your app runtime.

However, a quick note that the @aws-amplify namespaced packages are not expected to be used directly. aws-amplify is the only package that should be installed and used in this case, which ensures underlying namespaced packages’ versions working in harmony. The original issue should be caused by that multiple instances of @aws-amplify/core were created.

For the warning specifically, it should be the same cause that multiple instances of an internal symbol were created.

[tsapasMi33]

Hi @HuiSF and thank you for the response.

Originally we were importing everything from aws-amplify. Except certain types. Not sure if that matters
The proposed workaround by ManfredSteyer in the other thread seems to work except the warning which seems to have no serious effect effect in our case.
As I don't have full knowledge of the internals of nativeFederation or aws-amplify plugin, I am not able to say why the problem happens. In a similar setup with module federation everything works just fine.

I just tried a setup with [email protected] and @angular-architects/[email protected] and I can verify that it works with this import
import { Amplify } from '@aws-amplify/core';
and as soon as I import from aws-amplify it breaks.

Hope this gives some more info.
Hopefully we can get it to work

Please let me know if I can provide any more information.

Thank you!

[cwomack]

@tsapasMi33, importing things explicitly from the @aws-amplify/core package can cause unexpected behaviors and we don't recommend doing this. The issue here seems to be more on the native-federation package side rather than something we can address on the Amplify side.

We'll close this issue on our repo down, but can reopen it if the linked issue #734 on Native Federation's side has more needed from us.

[manfredsteyer]

Hi,

I have analyzed this case.

The issue for Native Federation is that the symbol ADD_OAUTH_LISTENER is imported using two different paths. This is not an issue when everything is compiled together because the bundler finds out that the same symbol is meant. However, Federation compiles each entry point separately to be loaded via an Import Map later. In this case, this results in two different Symbols.

The solution for this would be change one import in singleton/Amplify.js

import { ADD_OAUTH_LISTENER } from '@aws-amplify/core/internals/utils';

This import is in general more accurate IMHO because according to the exports in the package.json, @aws-amplify/core/internals is an own (secondary) entry point. Hence, we should not reference it via relative paths.

Also, I made sure that AMPLIFY_SYMBOL in singleton/Amplify.mjs and libraryUtils.ts is also imported from @aws-amplify/core/internals/utils.

Do you think you can add these modifications to support compilation modes using externals loaded via Import Maps?

Best wishes,
Manfred

[yuanaiho]

Hi, we're also experiencing this issue. We have a reproduction available if that would be helpful - https://github.com/HYuanAi/native-federation-amplify.

While using the library with native-federation, multiple instances seem to be instantiated and hence no operations could be done since it complains that no configurations has been done (when it has been on another instance). For your information, we are only using the library for auth purposes, without am Amplify backend - https://docs.amplify.aws/angular/build-a-backend/auth/use-existing-cognito-resources/#use-auth-resources-without-an-amplify-backend

[tsapasMi33]

Hi again @cwomack,
Could the issue be reopened and looked into after the insights by @manfredsteyer.
Thank you