AWS Amplify Auth Error in Angular project using pre-existing backend: "Error: Amplify has not been configured correctly."

Question

我正在尝试更新我在 2020 年构建的项目，该项目不再有效，但我一直运行关注这个问题。

[ERROR] 04:09.562 AuthError - 
            Error: Amplify has not been configured correctly. 
            The configuration object is missing required auth properties.
            This error is typically caused by one of the following scenarios:

            1. Did you run `amplify push` after adding auth via `amplify add auth`?
                See https://aws-amplify.github.io/docs/js/authentication#amplify-project-setup for more information

            2. This could also be caused by multiple conflicting versions of amplify packages, see (https://docs.amplify.aws/lib/troubleshooting/upgrading/q/platform/js) for help upgrading Amplify packages.

我创建了一个新的 angular (Ionic) 项目，看看我是否可以查明问题所在，但这个问题又出现了。我按照文档设置放大，但我们已经有一个后端，所以我运行 amplify pull --appId XXXXXX --envName XXXX 得到 aws-exports.js。

我已经完成了npm i aws-amplify @aws-amplify/ui-angular
我试过删除 node-modules 和 package-lock.json，然后运行ning npm i
我已将 aws-exports.js 重命名为 aws-exports.ts 并将其添加到我的 ts-config.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts",
    "src/aws-exports.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

在main.ts中我添加了

import Amplify, { Auth } from 'aws-amplify';
import awsmobile from './aws-exports';

Amplify.configure(awsmobile);
Auth.configure(awsmobile); // I've tried both with and without this line

我已经按照文档实现了 Authenticator UI 组件。

如有任何信息，我们将不胜感激！我已经通读了关于这个问题的多个话题，none 的建议奏效了。

这是我的 aws-exports.ts 的内容（数据已编辑！）

const awsmobile = {
    "aws_project_region": "eu-west-2",
    "aws_appsync_graphqlEndpoint": "https://XXXXX.appsync-api.eu-west-2.amazonaws.com/graphql",
    "aws_appsync_region": "eu-west-2",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": "XXXXX",
    "aws_cognito_identity_pool_id": "eu-west-2:XXXXX",
    "aws_cognito_region": "eu-west-2",
    "oauth": {},
    "aws_cognito_username_attributes": [],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [],
    "aws_cognito_mfa_types": [],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [],
    "aws_mobile_analytics_app_id": "XXXXX",
    "aws_mobile_analytics_app_region": "eu-west-1"
};

export default awsmobile;

编辑： 我还尝试了运行ning amplify init 并创建了一个新的 Amplify 项目，但问题仍然存在。我做了运行 amplify push

这是我的 package.json:

{
  "name": "XXXX",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "@aws-amplify/ui-angular": "^2.0.11",
    "@capacitor/app": "1.1.0",
    "@capacitor/core": "3.4.0",
    "@capacitor/haptics": "1.1.4",
    "@capacitor/keyboard": "1.2.1",
    "@capacitor/status-bar": "1.0.7",
    "@ionic/angular": "^6.0.0",
    "aws-amplify": "^4.3.13",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.1",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "~13.0.1",
    "@angular/compiler": "~13.0.0",
    "@angular/compiler-cli": "~13.0.0",
    "@angular/language-service": "~13.0.0",
    "@capacitor/cli": "3.4.0",
    "@ionic/angular-toolkit": "^5.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.4.4"
  },
  "description": "An Ionic project"
}

编辑： 正如 Juicy-g 所建议的，我尝试使用

"@aws-amplify/auth": "^4.3.14", 
"@aws-amplify/core": "^4.3.14"

和

import { Amplify } from '@aws-amplify/core'; 
import { Auth } from '@aws-amplify/auth'; 
import awsmobile from './aws-exports'; 
Amplify.configure(awsmobile); 
Auth.configure(awsmobile);

我仍然得到相同的结果。最新版的@aws-amplify/auth好像有内部问题所以匹配了最新版的@aws-amplify/core

Answer 1

事实证明，这是由于我们不得不将我们的项目从旧的 Amplify 项目迁移过来，因为它最终处于不可恢复的状态。它没有正确连接到我们的 Cognito 用户池，因此 aws-exports.js

中没有提供所有需要的信息

我不太清楚为什么它不能用于新项目和新的放大项目，但它现在可以工作了。

我遗漏了 aws_user_pools_id 和 aws_user_pools_web_client_id 字段。提供他们手动解决了问题。

AWS Amplify Auth Error in Angular project using pre-existing backend: "Error: Amplify has not been configured correctly."

AWS Amplify Auth Error in Angular project using pre-existing backend: "Error: Amplify has not been configured correctly."

angular

amazon-web-services

aws-amplify

amplifyjs

aws-amplify-sdk-js