node.js - Angular 9 Node.js AWS - 从 'aws-sdk' 添加导入 AWS 后编译错误

Question

我一直在网络上尝试关于这个主题的所有方法，但没有成功，这是我在 StackOverflow 上的第一篇文章，如果我没有做到最好，我深表歉意。

错误:

 node_modules/aws-sdk/clients/dynamodbstreams.d.ts:92:38 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

92   export type BinaryAttributeValue = Buffer|Uint8Array|Blob|string;
                                        ~~~~~~
node_modules/aws-sdk/clients/ec2.d.ts:4439:23 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

4439   export type _Blob = Buffer|Uint8Array|Blob|string;
                           ~~~~~~
node_modules/aws-sdk/clients/ecr.d.ts:990:31 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

990   export type LayerPartBlob = Buffer|Uint8Array|Blob|string;
                                  ~~~~~~
node_modules/aws-sdk/clients/firehose.d.ts:206:22 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

采取的步骤

1. npm -i -d @类型/Node
2. 从 tsconfig 文件中删除了类型

3. 添加了 polyfills.ts 修复:

   (任何窗口).global = window;(任何窗口).process = { 环境:{调试:未定义}，};

文件

**angular.json:**
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "emsForest": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/emsForest",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "10mb",
                  "maximumError": "20mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "emsForest:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "emsForest:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "emsForest:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "emsForest:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "emsForest:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "emsForest",
  "cli": {
    "analytics": "4b8ead9f-656d-4d3f-8080-037f834cd184"
  },
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }
}

package.json

{
  "name": "ems-forest",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:browser:prod": "ng build --prod",
    "build:browser:serverless": "ng build --prod --base-href /production/",
    "build:serverless": "npm run build:browser:serverless && npm run build:server:serverless",
    "build:prod": "npm run build:browser:prod && npm run build:server:prod",
    "server": "node local.js",
    "build:prod:deploy": "npm run build:prod && npm run deploy",
    "build:serverless:deploy": "npm run build:serverless && npm run deploy",
    "deploy": "serverless deploy",
    "build:server:prod": "webpack --config webpack.server.config.js --progress --colors",
    "build:server:serverless": "webpack --config webpack.server.config.js --progress --colors"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.1",
    "@angular/cdk": "^9.2.0",
    "@angular/common": "^9.1.1",
    "@angular/compiler": "~9.1.1",
    "@angular/core": "~9.1.1",
    "@angular/forms": "~9.1.1",
    "@angular/localize": "^9.1.1",
    "@angular/material": "^9.2.0",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/router": "~9.1.1",
    "@ng-toolkit/serverless": "^8.1.0",
    "@types/gzip-js": "^0.3.1",
    "@types/hammerjs": "^2.0.36",
    "@types/lodash": "^4.14.149",
    "angular-bootstrap-md": "^9.0.1",
    "aws-sdk": "^2.655.0",
    "aws-serverless-express": "^3.3.8",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "buffer": "^5.5.0",
    "core-js": "^3.6.4",
    "cors": "~2.8.4",
    "cp-cli": "^1.1.0",
    "enhanced-resolve": "^4.1.1",
    "fetch": "^1.1.0",
    "file-saver": "^2.0.2",
    "fs": "0.0.1-security",
    "gzip-js": "^0.3.2",
    "hammerjs": "^2.0.8",
    "igniteui-angular": "^9.0.9",
    "igniteui-angular-core": "^9.0.1",
    "igniteui-angular-excel": "^9.0.1",
    "igniteui-angular-spreadsheet": "^9.0.1",
    "jszip": "^3.3.0",
    "lodash": "^4.17.15",
    "lzutf8": "^0.5.5",
    "minireset.css": "~0.0.4",
    "ngx-webstorage-service": "^4.1.0",
    "node-sass": "^4.13.1",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "^6.5.5",
    "sass": "^1.26.3",
    "stream": "0.0.2",
    "tslib": "^1.11.1",
    "web-animations-js": "^2.3.2",
    "xlsx": "^0.15.6",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.0",
    "@types/aws-sdk": "^2.7.0",
    "@angular/cli": "^9.1.0",
    "@angular/compiler-cli": "~9.1.1",
    "@angular/language-service": "~9.1.1",
    "@igniteui/angular-schematics": "~9.0.500",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.34",
    "@types/node": "^12.12.34",
    "codelyzer": "^5.2.2",
    "igniteui-cli": "~5.0.1",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.3",
    "opencollective": "^1.0.3",
    "protractor": "^5.4.3",
    "serverless": "1.40.0",
    "serverless-apigw-binary": "^0.4.4",
    "ts-loader": "4.2.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.8.3",
    "webpack-cli": "^3.3.11"
  }
}

tsconfig.app.json

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

src\tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

TS 文件，如果:“import AWS from 'aws-sdk'”被删除代码符合 ok

import { Component, OnInit } from '@angular/core';

import * as AWS from 'aws-sdk';


@Component({
  selector: 'app-admin-portal',
  templateUrl: './admin-portal.component.html',
  styleUrls: ['./admin-portal.component.scss']
})
export class AdminPortalComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

Answer 1

在 API 中 docs ，有人提到您要么将 "types": ["node"] 添加到项目的 tsconfig.app.json 文件，要么完全删除 "types"字段。

在数组中添加 Node 后它在我这边工作:

“编译器选项”:{ "outDir": "./out-tsc/app", “类型”:[“Node ”]

希望对您有所帮助。