使用 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上分享了一個解決方案。

您可以在build.options.allowedCommonJsDependencies的angular.json中添加以下代碼片段來刪除這些警告

"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