时间戳

首页 > 解决方案 > AWS Amplify Ionic 5 Angular 10 构建错误

angular - AWS Amplify Ionic 5 Angular 10 构建错误

问题描述

我们公司的团队遇到了一个我们似乎无法找到解决方案的问题，我希望这里有人可以帮助我们。我们在 Angular 10/Ionic 5 项目中使用 AWS Amplify，但确实收到以下错误：

Uncaught ReferenceError: exports is not defined
at Module../node_modules/@aws-sdk/middleware-serde/build/deserializerMiddleware.js (vendor.js:344144)
at __webpack_require__ (bootstrap:84)
at Object../node_modules/@aws-sdk/middleware-serde/build/index.js (index.ts:1)
at __webpack_require__ (bootstrap:84)
at Module../node_modules/@aws-sdk/client-cognito-identity/dist/es/commands/CreateIdentityPoolCommand.js (CognitoIdentityClient.ts:302)
at __webpack_require__ (bootstrap:84)
at Module../node_modules/@aws-sdk/client-cognito-identity/dist/es/CognitoIdentity.js (vendor.js:183202)
at __webpack_require__ (bootstrap:84)
at Module../node_modules/@aws-sdk/client-cognito-identity/dist/es/index.js (index.ts:1)
at __webpack_require__ (bootstrap:84)

这是我们的 package.json 的一个片段。我想知道这个问题是否与 webpack 有关，或者是否与 Angular/Typescript/Ionic 相关。

 {
      "private": true,
      "dependencies": {
        "@angular/animations": "^10.0.2",
        "@angular/cdk": "^10.0.1",
        "@angular/common": "^10.0.2",
        "@angular/core": "^10.0.2",
        "@angular/forms": "^10.0.2",
        "@angular/material": "^10.0.1",
        "@angular/platform-browser": "^10.0.2",
        "@angular/platform-browser-dynamic": "^10.0.2",
        "@angular/router": "^10.0.2",
        "@auth0/angular-jwt": "^4.2.0",
        "@aws-amplify/ui-angular": "^0.2.9",
        "@ionic-native/camera": "^5.27.0",
        "@ionic-native/code-push": "^5.27.0",
        "@ionic-native/contacts": "^5.27.0",
        "@ionic-native/core": "^5.27.0",
        "@ionic-native/deeplinks": "^5.27.0",
        "@ionic-native/diagnostic": "^5.27.0",
        "@ionic-native/file": "^5.27.0",
        "@ionic-native/file-opener": "^5.27.0",
        "@ionic-native/file-transfer": "^5.27.0",
        "@ionic-native/google-plus": "^5.27.0",
        "@ionic-native/photo-viewer": "^5.27.0",
        "@ionic-native/push": "^5.27.0",
        "@ionic-native/splash-screen": "^5.27.0",
        "@ionic-native/status-bar": "^5.27.0",
        "@ionic/angular": "^5.2.2",
        "@types/chai": "^4.2.11",
        "@types/chai-as-promised": "^7.1.2",
        "@types/cucumber": "^6.0.1",
        "@types/gapi": "0.0.39",
        "@types/gapi.auth2": "0.0.52",
        "@types/gapi.client": "^1.0.3",
        "@types/gapi.client.drive": "^3.0.8",
        "@types/gapi.client.people": "^1.0.2",
        "@types/gapi.client.sheets": "^4.0.9",
        "@types/google.analytics": "0.0.40",
        "ajv": "^6.12.2",
        "aws-amplify": "^3.0.18",
        "aws-amplify-angular": "^5.0.18",
        "aws-sdk": "^2.708.0",
        "chromedriver": "^83.0.0",
        "code-push": "3.1.5",
        "com-sarriaroman-photoviewer": "^1.2.5",
        "cordova": "^9.0.0",
        "cordova-android": "^9.0.0",
        "cordova-ios": "^6.1.0",
        "cordova-plugin-camera": "4.1.0",
        "cordova-plugin-code-push": "1.12.5",
        "cordova-plugin-contacts": "^3.0.1",
        "cordova-plugin-device": "2.0.3",
        "cordova-plugin-dialogs": "2.0.2",
        "cordova-plugin-file": "6.0.2",
        "cordova-plugin-file-opener2": "3.0.2",
        "cordova-plugin-file-transfer": "1.7.1",
        "cordova-plugin-googleplus": "^8.5.0",
        "cordova-plugin-ionic-keyboard": "^2.2.0",
        "cordova-plugin-ionic-webview": "5.0.0",
        "cordova-plugin-splashscreen": "5.0.4",
        "cordova-plugin-statusbar": "2.4.3",
        "cordova-plugin-whitelist": "1.3.4",
        "cordova-plugin-zip": "^3.1.0",
        "cordova-support-google-services": "^1.4.1",
        "cordova.plugins.diagnostic": "^5.0.2",
        "core-js": "^3.6.5",
        "ionic": "^5.4.16",
        "ionic-cli": "0.0.0",
        "ionic-plugin-deeplinks": "^1.0.20",
        "moment": "^2.27.0",
        "ng2-pdf-viewer": "^6.3.1",
        "phonegap-plugin-multidex": "^1.0.0",
        "phonegap-plugin-push": "^2.3.0",
        "rxjs": "~6.5.5",
        "tslib": "^2.0.0",
        "zone.js": "~0.10.3"
      },
      "devDependencies": {
        "@angular-devkit/architect": "^0.1000.0",
        "@angular-devkit/build-angular": "~0.1000.0",
        "@angular-devkit/core": "^10.0.0",
        "@angular-devkit/schematics": "^10.0.0",
        "@angular/cli": "~10.0.0",
        "@angular/compiler": "^10.0.2",
        "@angular/compiler-cli": "^10.0.2",
        "@angular/language-service": "^10.0.2",
        "@ionic/angular-toolkit": "^2.2.0",
        "@types/jasmine": "^3.5.11",
        "@types/jasminewd2": "^2.0.8",
        "@types/node": "^14.0.14",
        "chai": "^4.2.0",
        "chai-as-promised": "^7.1.1",
        "chalk": "^4.1.0",
        "clear": "^0.1.0",
        "clui": "^0.3.6",
        "codelyzer": "^5.2.2",
        "cucumber": "^6.0.5",
        "figlet": "^1.4.0",
        "inquirer": "^7.2.0",
        "jasmine-core": "~3.5.0",
        "jasmine-spec-reporter": "~5.0.2",
        "karma": "~5.1.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~3.0.3",
        "karma-jasmine": "~3.3.1",
        "karma-jasmine-html-reporter": "^1.5.4",
        "minimist": "^1.2.5",
        "open": "^7.0.4",
        "protractor": "~7.0.0",
        "protractor-cucumber-framework": "^6.2.1",
        "ts-node": "^8.10.2",
        "tslint": "~6.1.2",
        "typescript": "^3.8.2",
        "webdriver-manager": "^12.1.7",
        "webpack-bundle-analyzer": "^3.8.0"
      }
    }

我们还包括（tsconfig.app.json）：

"angularCompilerOptions": {
    "enableIvy": false,
    "fullTemplateTypeCheck": false
  },

我发现 AWS Amplify 和 Ionic/Angular 存在不同问题的多个来源，但它们似乎与您的问题不同。

标签： angulartypescriptionic-frameworkaws-amplifyionic-native

解决方案

遇到了同样的问题（Angular 10）并按照此处aws-sdk-js的GitHub 问题页面上的解决方法解决了该问题。

简而言之，您必须遵循以下两个步骤：

  1. 安装节点类型npm i --save-dev @types/node （我知道这很奇怪，因为我们在前端应用程序上，但 AWS 开发工具包确实需要节点类型）

  2. 添加文件"types": ["node"]的"compilerOptions"部分tsconfig.app.json。

就我而言，tsconfig.app.json文件变为：

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

推荐阅读