Cannot find modul translations

[OlgaMaslova]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

Angular

Which UI component?

Authenticator

How is your app built?

ng build

Please describe your bug.

When following the guide (https://ui.docs.amplify.aws/components/authenticator?platform=angular#internationalization-i18n) for adding transaltions, the import cannot find the module transations.

Version of lib: "@aws-amplify/ui-angular": "^2.0.11",

What's the expected behaviour?

Import works

Help us reproduce the bug!

Code Snippet

import { translations } from '@aws-amplify/ui';

Additional information and screenshots

No response

[wlee221]

Hi, thanks for letting us know! This is a typo. It should be:

- import { translations } from '@aws-amplify/ui';
+ import { I18n } from 'aws-amplify';
I18n.putVocabularies(translations);
I18n.setLanguage('fr');

I18n.putVocabularies({
  fr: {
    'Sign In': 'Se connecter',
    'Sign Up': "S'inscrire",
  },
  es: {
    'Sign In': 'Registrarse',
    'Sign Up': 'Regístrate',
  },
});

I see this typo is on React/Vue as well. We'll get it resolved by this week.

[wlee221]

@OlgaMaslova Hi, I was mistaken on my previous comment. translations should be exported from @aws-amplify/ui, which @aws-amplify/ui-angular transitively depends on. Here's where it's exported fyi.

The docs snippet is still missing

+ import { I18n } from 'aws-amplify';

though.

Do you still experience this error? If so, can you share your package.json?

[OlgaMaslova]

Yes, I am still experiencing the same error

Extract from package.json: "dependencies": { "@angular/animations": "~12.2.2", "@angular/cdk": "^12.2.12", "@angular/common": "~12.2.2", "@angular/compiler": "~12.2.2", "@angular/core": "~12.2.2", "@angular/forms": "~12.2.2", "@angular/localize": "^12.2.12", "@angular/platform-browser": "~12.2.2", "@angular/platform-browser-dynamic": "~12.2.2", "@angular/router": "~12.2.2", "@asymmetrik/ngx-leaflet": "^6.0.1", "@aws-amplify/ui-angular": "^2.0.11", "@circlon/angular-tree-component": "^11.0.4", "@iconify/icons-bi": "^1.1.0", "@iconify/icons-ic": "^1.1.1", "@iconify/icons-mdi": "^1.1.1", "@ng-bootstrap/ng-bootstrap": "^10.0.0", "@ng-select/ng-select": "^7.3.0", "@ngx-translate/core": "^13.0.0", "@ngx-translate/http-loader": "^6.0.0", "@stripe/stripe-js": "^1.18.0", "@types/jquery": "^3.5.4", "@visurel/iconify-angular": "^11.0.0", "@zoom/videosdk": "^1.1.6", "apexcharts": "^3.29.0", "aws-amplify": "^4.2.0", "bootstrap": "^4.5.3", "crypto-js": "^4.1.1", "file-saver": "^2.0.2", "jquery": "^3.5.1", "js-levenshtein": "^1.1.6", "leaflet": "^1.7.1", "luxon": "^1.27.0", "ng-apexcharts": "^1.5.12", "ng2-pdf-viewer": "^6.4.1", "ngx-clipboard": "^14.0.1", "panzoom": "^9.4.1", "papaparse": "^5.3.1", "popper.js": "^1.16.1", "rxjs": "^6.6.3", "rxjs-compat": "^6.5.5", "ts-md5": "^1.2.7", "tslib": "^2.3.1", "uuid": "^8.3.0", "video.js": "^7.11.8", "xstate": "^4.20.2", "zone.js": "^0.11.4" }

[wlee221]

That's very weird, not sure why. Do you happen to have a lock file I can look at?

[OlgaMaslova]

package-lock.zip Here it is, hope would help...

[wlee221]

Ahh I see -- because aws-amplify depends on an old version of @aws-amplify/ui, there are duplicate versions of the @aws-amplify/ui package:

dependencies
├── aws-amplify@4.3.8
│   └── @aws-amplify/ui@2.0.3
├── @aws-amplify/ui-angular@2.0.11
│   └── @aws-amplify/ui@3.0.11

and @2.0.3 one won the duel and got hoisted to the top level.

[wlee221]

We plan to remove that outdated dependency off aws-amplify on its next major release. But regardless, this is a bug on our end and imo you should not even have to use @aws-amplify/ui directly. I'll bring this up to the team and keep you posted.

For the time being, you can try npm 8 overrides, or npm i @aws-amplify/ui@3.0.11 to manually have the @aws-amplify/ui version pinned. Sorry for the inconvenience.

[OlgaMaslova]

Thanks, glad it is figured out!