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

Question

I get a console error, when I want to run my angular app with AWS amplify. Building the app with ng start works, I only get a warning about using 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.

But when I want to load the app in my browser, I get the following console error and the app wont start.

I used the official guide from AWS Integrating Amazon Cognito With Web and Mobile Apps .

Here is my package.json file.

// 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"
  }
}

Does someone also get this error and know how to fix it? If I should provide more information, just let me know.

Answer 1

I shared a solution recently on Twitter .

You can remove these warnings adding the following code snippet at build.options.allowedCommonJsDependencies in 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"
    ]
  }
}

Gist: https://gist.github.com/gsans/8982c126c4fef668c094ff288f04241b

For more details you can read about this warning at the Angular docs: https://angular.io/guide/build#configuring-commonjs-dependencies