AWS Serverless Lambda + Angular - TypeError: express is not a function

Question

The application works fine in localhost:4200. But when I move to AWS via serverless Lambda, I get this error in cloudwatch logs. And I guess because of that I am getting 500 {"message": "Internal server error"} when I access the url

I have no knowledge about AWS. Just trying to run a hello world application in AWS. Followed below youtube and blogs 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"
  }

@Lereveme: Not yet. Even I spent a couple of hours last nigh, no luck yet... :( — SK.
– SK., Commented Apr 2, 2020 at 17:13

Lereveme · Accepted Answer · 2020-04-02 16:01:58Z

2

So I was having a really hard time getting this to work. I didn't have a specific thing to solve this problem but after some searching stumbled across this github repo. I downloaded it and the serverless lambda deploy worked correctly. The example uses angular 8 but hopefully it is the same for 9.

Angular Serverless Starter Repo

answered Apr 2, 2020 at 16:01

Lereveme

1,6742 gold badges18 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SK. Over a year ago

You are correct, I didn't get it working, but as you mentioned, with that github repo, I deployed my application in AWS (about 2-3 days back). But I am still trying to understand I am doing wrong when I write the code myself.

Lereveme Over a year ago

@SK. - I upgraded to 9 and changed a bunch of setting from the starter template to match my project and everything still works. I was on Angular 7 before and plan to just move the component and artifacts into this new project. Probably easier. Good luck

SK. Over a year ago

I did upgrade to 9, but still didn't work. Would you mind providing what all setting changes you did...

Michael Podsiadly · Accepted Answer · 2020-05-15 19:06:21Z

What worked for me was setting esModuleInterop = false in the tsconfig file.

Found the answer here but didn't have an explanation to it. However, looking at the official docs for Typescript, esModuleInterop does the following:

Emit __importStar and __importDefault helpers for runtime babel ecosystem compatibility and enable --allowSyntheticDefaultImports for typesystem compatibility.

--allowSyntheticDefaultImports is defined as:

Allow default imports from modules with no default export. This does not affect code emit, just typechecking.

Maybe enabling --allowSyntheticDefaultImports along with esModuleInterop would be the most efficient and reliable way to go about it. But so far, setting esModuleInterop to false worked like a charm.

Originally found on GitHub.

Collectives™ on Stack Overflow

AWS Serverless Lambda + Angular - TypeError: express is not a function

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related