使用 AWS Amplify 构建 Angular 10 应用程序时出错

Question

当我想使用 AWS amplify 运行我的 Angular 应用程序时，出现控制台错误。使用ng start 构建应用程序有效，我只收到有关使用 commonJS 的警告。

WARNING in ...\node_modules\@aws-amplify\ui-components\dist\esm\loader.mjs depends on '@aws-amplify/core'. CommonJS or AMD dependencies can cause optimization bailouts.

但是当我想在浏览器中加载应用程序时，我收到以下控制台错误并且应用程序无法启动。

我使用了来自 AWS Integrating Amazon Cognito With Web and Mobile Apps 的官方指南。

这是我的 package.json 文件。

// package.json
{
  "name": "web-connect",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "prestart": "node prepare-build-info.js",
    "start": "ng serve",
    "prebuild": "node prepare-build-info.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "^0.1000.1",
    "@angular/animations": "~10.0.2",
    "@angular/cdk": "^10.0.1",
    "@angular/common": "~10.0.2",
    "@angular/compiler": "~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",
    "@aws-amplify/ui-angular": "^0.2.11",
    "aws-amplify": "^3.0.20",
    "aws-amplify-angular": "^5.0.20",
    "bootstrap": "^4.5.0",
    "core-js": "^3.6.5",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular/cli": "^10.0.1",
    "@angular/compiler-cli": "~10.0.2",
    "@angular/language-service": "~10.0.2",
    "@types/jasmine": "~3.5.11",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^14.0.19",
    "codelyzer": "~6.0.0",
    "git-describe": "^4.0.4",
    "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",
    "protractor": "~7.0.0",
    "ts-node": "^8.10.2",
    "tslint": "~6.1.2",
    "typescript": "3.9.6"
  }
}

是否有人也遇到此错误并知道如何解决？如果我需要提供更多信息，请告诉我。

Answer 1

我最近在Twitter分享了一个解决方案。

您可以在angular.jsonbuild.options.allowedCommonJsDependencies 中添加以下代码 sn-p 删除这些警告

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  ...
  "options": {
    "allowedCommonJsDependencies": ["crypto-js", "@aws-sdk/eventstream-marshaller", "buffer", "js-cookie", 
      "@aws-crypto", "zen-observable", "@aws-sdk/util-utf8-node", "@aws-crypto/sha256-js", "@aws-sdk/util-buffer-from",
      "@aws-sdk/smithy-client", "@aws-sdk/middleware-serde", "@aws-sdk/middleware-user-agent",
      "@aws-sdk/middleware-retry", "@aws-sdk/middleware-signing", "@aws-sdk/middleware-content-length",
      "@aws-sdk/middleware-host-header", "@aws-sdk/config-resolver", "@aws-sdk/s3-request-presigner",
      "@aws-sdk/util-format-url", "@aws-sdk/util-create-request", "@aws-sdk/property-provider",
      "axios", "@aws-sdk/fetch-http-handler", "@aws-sdk/protocol-http", "@aws-sdk/querystring-builder",
      "@aws-sdk/util-utf8-browser", "@aws-sdk/url-parser-browser", "@aws-crypto/sha256-browser",
      "@aws-sdk/url-parser-node", "@aws-sdk/util-uri-escape", "@aws-sdk/middleware-sdk-s3",
      "@aws-sdk/middleware-bucket-endpoint", "@aws-sdk/querystring-parser", "@aws-sdk/middleware-apply-body-checksum",
      "@aws-sdk/middleware-ssec", "@aws-sdk/middleware-expect-continue", "fast-xml-parser",
      "@aws-sdk/xml-builder", "@aws-sdk/md5-js", "@aws-sdk/hash-blob-browser",
      "@aws-sdk/eventstream-serde-browser", "@aws-sdk/middleware-location-constraint"
    ]
  }
}

要点： https://gist.github.com/gsans/8982c126c4fef668c094ff288f04241b

有关更多详细信息，您可以在 Angular 文档中阅读有关此警告的信息： https://angular.io/guide/build#configuring-commonjs-dependencies