Angular Serverless deployment to AWS appends base-href to url, causing redirect to 404error

Question

I'm trying to deploy an angular 7 website onto aws serverless. Being new to this, I followed this tutorial: https://coursetro.com/posts/code/165/Deploying-your-Angular-App-to-a-Serverless-Environment-

After deployment, my url gets appended with an additional 'production/' which i'm assuming is due to my base-href setup.

This causes unnecessary redirecting to 404. Does anyone know how to avoid this? Navigating with the menu works perfectly though

URL Entered:

https://7z48go76gd.execute-api.ap-southeast-1.amazonaws.com/production

After it loads:

https://7z48go76gd.execute-api.ap-southeast-1.amazonaws.com/production/production

I've tried playing around with the environment.prod.ts, environment.serverless.ts and also the package.json file with different variations but no luck.

environment.serverless.ts/environment.prod.ts:

export const environment = {
  production: true,
  BASE_URL: 'https://tj2rdz0qn1.execute-api.ap-southeast-1.amazonaws.com/production',
  // when you deploy your app to your own server you should replace the BASE_URL with the target domain for example:
  // BASE_URL: 'https://site-preview.angular-templates.io',
  baseHref: '/'
};

package.json:

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "lint": "ng lint crc-web",
    "build:client-and-server-bundles": "ng build --prod && ng run crc-web:server:production",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
    "compile:server": "tsc -p server.tsconfig.json",
    "serve:ssr": "node dist/server",
    "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": "ng run crc-web:server && webpack --config webpack.server.config.js --progress --colors",
    "build:server:serverless": "ng run crc-web:server:serverless && webpack --config webpack.server.config.js --progress --colors --max_old_space_size=8192",
    "fix-memory-limit": "cross-env LIMIT=2048 increase-memory-limit"
  },

Answer 1

it doesn't solve the problem. when it is deployed to api gateway, it is under /production https://7z48go76gd.execute-api.ap-southeast-1.amazonaws.com/production

the base-href has to be /production for angular to work in api gateway. otherwise you have no access to the https://7z48go76gd.execute-api.ap-southeast-1.amazonaws.com

when it is binded to a custom domain, it needs the base-href to be /

I am having the same issue, anyone knows how to resolve it?

Answer 2

Try this:

npm run build:prod:deploy

The script build:prod:deploy won't overwrite your base-href.

The script npm run build:serverless:deploy sets the base-href to '/production/' (take a look at the build:browser:serverless script in package.json).

This seems like an inconsistency in Serverless Angular Universal and can lead to multiple problems with API Gateway stages or custom domains.

If this didn't solve your problem, please post the contents of src/app/app-routing.module.ts and serverless.yml

Answer 3

I had the same issue. In package.json changing the script build:browser:serverless to ng build --prod resolved the issue.