Error message: Issue with AWS Serverless Lambda and Angular - TypeError: express function not defined

I'm encountering an issue when trying to deploy my application from localhost:4200 to AWS serverless Lambda. The error in cloudwatch logs is causing a 

500 {"message": "Internal server error"}
response when I access the URL.

My understanding of AWS is limited, and I'm simply attempting to run a basic hello world application on AWS. I followed tutorials on YouTube and blogs:

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)"
    ]
}

In my serverless.yml file:

# 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

... (rest of the code remains unchanged for brevity)

When reviewing my package.json, it seems that I have included dependencies such as Express, yet there are still issues with the deployment. Any assistance would be greatly appreciated.

angulartypescriptamazon-web-servicesaws-lambdaaws-serverless

Answer №1

I was struggling to figure out how to make this work, but luckily I came across a solution on a GitHub repository. After downloading it, the serverless lambda deployment worked perfectly. The example provided is based on Angular 8, so hopefully it will work just as well for version 9.

Check out the Angular Serverless Starter Repo here

Answer №2

I found a solution for my issue by adding esModuleInterop = false to the tsconfig file.

While I stumbled upon the answer on Stack Overflow, there wasn't much explanation provided. However, after consulting the official Typescript documentation, I learned that setting esModuleInterop helps in emitting __importStar and __importDefault helpers for runtime babel ecosystem compatibility, while also enabling --allowSyntheticDefaultImports for typesystem compatibility.

--allowSyntheticDefaultImports allows default imports from modules with no default export, affecting typechecking but not code emit.

It seems that combining --allowSyntheticDefaultImports with esModuleInterop could potentially be the most effective approach. Yet, for my case, simply turning esModuleInterop off did the trick perfectly.

The initial source of this insight was a comment on GitHub.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a getStaticProps error while using Typescript with Next.js

I encountered an issue with the following code snippet: export const getStaticProps: GetStaticProps<HomeProps> = async () => { const firstCategory = 0; const { data }: AxiosResponse<MenuItem[]> = await axios.post( ...

reactjstypescriptnext.js

Tips for combining Angular 2 with a current J2EE Spring project and deploying them on the same PORT

I currently have a project with Spring on the back-end and AngularJS 1 on the front-end. When I start the Spring server, it only opens one port for me: 8080 which allows me to access REST APIs and the AngularJS front-end components. https://i.stack.imgur. ...

springangularnpm

When using the Ng --version command on a development package, it throws an error

I encounter an error with a development package when cloning a repository. I would greatly appreciate any advice on how to resolve this issue. https://i.stack.imgur.com/DBp5r.png ...

javascriptnode.jsangularnpm

Utilize a solution to handle limited storage space in lambda functions for temporary data,

Looking to create a Lambda function that can fetch an s3 object, save it to the /tmp directory within the function, and then use crypto.createHash(algorithm) on the object. However, I'm facing a challenge with objects larger than 500MB due to Lambda&a ...

node.jsaws-lambda

Having trouble applying [formControl] to a set of radio buttons in Angular2

Currently, I am encountering an issue with a list of groups of radio buttons in Angular2. My objective is to bind the value of each group of radio buttons using [formControl]. However, when implementing this, the radio buttons seem to lose their normal mut ...

angularangular2-forms

Unable to modify the active property of the specified object as it is read-only

Presented here is the interface: export interface ProductCommand extends ProductDetailsCommand { } This is the ProductDetailsCommand interface: export interface ProductDetailsCommand { id: string; active: boolean; archive: boolean; title: ...

javascriptangulartypescript

Refresh a Google chart without having to reload the entire page

I currently have a button that allows me to refresh the data on my page in case there is new data available through an API. Although this button successfully refreshes my datatable, it does not redraw the Google charts I have integrated into my project usi ...

angulartypescriptgoogle-visualization

Encountering difficulties with a custom Firestore service when attempting to extend it after updating to Angular 9

My custom class that wraps Angular Firestore is designed to be extended and used throughout my application. However, after updating to Angular 9, this setup no longer functions properly. For the complete code snippet, visit . The abstract class wrapper: ...

angulartypescriptfirebasegoogle-cloud-firestoreangular9

Converting text data into JSON format using JavaScript

When working with my application, I am loading text data from a text file: The contents of this txt file are as follows: console.log(myData): ### Comment 1 ## Comment two dataone=1 datatwo=2 ## Comment N dataThree=3 I am looking to convert this data to ...

javascriptangulartypescriptecmascript-6

Talebook by Syncfusion

I'm completely new to Storybook and I am currently exploring the possibility of creating a Storybook application that showcases a variety of controls, including Syncfusion controls and other custom controls that I will be developing in the future. Ha ...

angularstorybooksyncfusion

Form an object using elements of a string array

Trying to convert a string array into an object. The string array is as follows : let BaseArray = ['origin/develop', 'origin/master', 'toto/branch', 'tata/hello', 'tata/world']; I want the resulting obje ...

javascriptarraystypescriptobject

What is the best way to integrate my Angular keycloak setup with an idphint attribute?

I have successfully integrated the angular keycloak adapter from https://www.npmjs.com/package/keycloak-angular to connect with our keycloak server. Currently, I am exploring the idphint attribute to redirect the request to a different identity provider. ...

angularkeycloakkeycloak-services

Can storing JWT in the windows object be considered a secure method for easy retrieval when required?

I have received an access token (JWT) in the URL. For example: . Is it secure to save this token in the window object? For instance: window.jwt = Token If so, how can it be utilized (extracting the JWT from the Window object and carrying out subsequent ...

angularreactjs

Improving the method to change a string into a string literal in TypeScript

Utilizing a third-party tool that has specified editorStylingMode?: 'outlined' | 'underlined' | 'filled'; I have set the value in my environment.ts file (in Angular) as shown below export const environment = { productio ...

angulartypescript

Unable to establish a connection with ngModel despite the FormsModule module being successfully imported

I'm currently following the tutorial Tour of Heroes and I've reached a point where I need to add my first input field. Even though I have included FormsModule in AppModule, I keep getting an error saying "ng Can't bind to '{ngModel}&apo ...

angularangular5

The `ngx-infinite-scroll` feature does not function properly on mobile devices when used in conjunction with the

I'm currently working on an Angular project that utilizes the mat-sidenav layout and routing. I came across an issue when trying to display a list of elements from a database using ngx-infinite-scroll. Following the user guide for ngx-infinite-scroll, ...

angular

Utilizing data from the home component in another component: A guide

Here is the code I am working with, showcasing how to utilize (this.categoryType) in another component: getCategoryDetails(){ return this.http.get('ip/ramu/api/api/…') .map((res:Response) => res.json()); } The above code snippet is utilize ...

angulartypescriptionic-framework

Why styled-components namespace problem in React Rollup build?

I designed a "UI Library" to be utilized in various projects using ReactJS + TypeScript + styled-components and Rollup. However, I am currently encountering issues with conflicting classNames. I am aware that styled-components offers a plugin for creating ...

javascriptreactjstypescriptstyled-componentsrollupjs

Error TS2322: The function expecting a type of 'FormEventHandler<HTMLFormElement>' cannot be assigned the type '(data: TicketFullDTO) => Promise<void>'

I am currently working on creating an edit form to modify data from a database based on its ID. Here is my approach: import React, {FormEvent, useEffect, useState} from "react"; import TextField from "@material-ui/core/TextField" ...

javascriptreactjstypescriptmaterial-ui

The functionality of the Angular application is not compatible with Edge browser

Encountering an issue with loading my dashboard on Edge (works fine on Chrome). The page fails to load, unlike in Chrome. The problem seems to be linked to the code snippet ColorScale.js.pre-build-optimizer.js: /** * Set up color sca ...

angularinternet-explorernpm