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.