AWS无服务器Lambda + Angular - TypeError: express不是一个函数

Question

该应用程序在localhost:4200中运行良好。但是当我通过无服务器Lambda迁移到AWS时，我在cloudwatch日志中得到了这个错误。我猜是因为当我访问url时，我得到了500 {"message": "Internal server error"}。

我对AWS一无所知。我只是想在AWS中运行hello world应用程序。下面是youtube和博客https://www.youtube.com/watch?v=l3t8cjykf00

https://www.youtube.com/watch?v=N-6LtzJezsk

https://www.twilio.com/blog/angular-universal-javascript-node-js-aws-lambda

2020-03-26T22:48:18.030Z    undefined   ERROR   Uncaught Exception  
{
    "errorType": "TypeError",
    "errorMessage": "express is not a function",
    "stack": [
        "TypeError: express is not a function",
        "    at Object.<anonymous> (/var/task/dist/server.js:95287:15)",
        "    at __webpack_require__ (/var/task/dist/server.js:21:30)",
        "    at module.exports.extendStatics (/var/task/dist/server.js:85:18)",
        "    at Object.<anonymous> (/var/task/dist/server.js:88:10)",
        "    at Module._compile (internal/modules/cjs/loader.js:778:30)",
        "    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)",
        "    at Module.load (internal/modules/cjs/loader.js:653:32)",
        "    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:585:3)",
        "    at Module.require (internal/modules/cjs/loader.js:692:17)"
    ]
}

serverless.yml

# generated by @ng-toolkit/serverless
service: app2

plugins:
  - serverless-apigw-binary
  - serverless-api-compression

provider:
  name: aws
  runtime: nodejs10.x
  memorySize: 192
  timeout: 10
  stage: production
  region: eu-central-1

package:
  exclude:
   - src/**
   - node_modules/**
   - firebug-lite/**
   - e2e/**
   - coverage/**
   - '!node_modules/aws-serverless-express/**'
   - '!node_modules/binary-case/**'
   - '!node_modules/type-is/**'
   - '!node_modules/media-typer/**'
   - '!node_modules/mime-types/**'
   - '!node_modules/mime-db/**'

custom:
  contentCompression: 1024
  apigwBinary:
    types:
      - '*/*'

functions:
  api:
    handler: lambda.universal
    events:
      - http: ANY {proxy+}
      - http: ANY /

package.json

"dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/forms": "~9.1.0",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/platform-server": "~9.1.0",
    "@angular/router": "~9.1.0",
    "@babel/compat-data": "^7.8.0",
    "@ng-toolkit/serverless": "^8.1.0",
    "@ng-toolkit/universal": "^7.1.2",
    "@nguniversal/common": "0.0.0",
    "@nguniversal/express-engine": "0.0.0",
    "@nguniversal/module-map-ngfactory-loader": "0.0.0",
    "aws-serverless-express": "^3.3.6",
    "cors": "^2.8.5",
    "domino": "^2.1.3",
    "express": "^4.17.1",
    "react-scripts": "3.4.1",
    "rxjs": "~6.5.4",
    "serverless-api-compression": "^1.0.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.0",
    "@angular/cli": "~9.1.0",
    "@angular/compiler-cli": "~9.1.0",
    "@angular/language-service": "~9.1.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.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.4.0",
    "opencollective": "^1.0.3",
    "protractor": "~5.4.0",
    "serverless": "^1.60.0",
    "serverless-apigw-binary": "^0.4.4",
    "ts-loader": "^6.2.1",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.8.3",
    "webpack-cli": "^3.3.10"
  },
  "resolutions": {
    "@babel/preset-env": "^7.8.0"
  }

Answer 1

所以我花了好大力气才让它起作用。我没有一个具体的东西来解决这个问题，但是经过一些搜索，我偶然发现了这个github代码库。我下载了它，无服务器的lambda部署工作正常。这个例子使用了angular 8，但希望9也是一样的。

Angular Serverless Starter Repo

Answer 2

对我来说起作用的是在tsconfig文件中设置esModuleInterop = false。

Found the answer here，但没有对此做出解释。但是，查看the official docs for Typescript，esModuleInterop执行以下操作：

发出__importStar和__importDefault助手以实现运行时babel生态系统兼容性，并启用--allowSyntheticDefaultImports以实现类型系统兼容性。

--allowSyntheticDefaultImports定义为：

允许从没有默认导出的模块进行默认导入。这不会影响代码发出，只是类型检查。

也许在使用esModuleInterop的同时启用--allowSyntheticDefaultImports是最有效、最可靠的方式。但到目前为止，将esModuleInterop设置为false非常有效。

Originally found on GitHub.