DEV Community

How to Deploy Angular Universal to Vercel

Jonathan Gamble on December 28, 2021

Update - Angular 17.2 - 3/2/24 While you still can't get Vercel Edge deployments to work until the nodejs dependencies problem is resol...

Read full post

Mick • Nov 30 '23

Hey! Did you try it out with the new Angular 17 yet? They added integrated SSR support to Angular. Now running "ng serve" or "ng build" automatically starts SSR server, thats awesome!

Anyway, Vercel now throws the error:

Cannot find module '../dist/server/main'

The server folder looks way different now and has .mjs modules instead of .js.

Angular 16:

Angular 17:

Wolfram Sokollek • Feb 24

I came up with this solution for the app/index.js:

async function loadServer() {
  const serverModule = await import('../dist/apps/{your-app}/server/server.mjs');
  return serverModule.app;
}

export default loadServer().then(app => app());

Jonathan Gamble • Nov 30 '23 • Edited

Try with this on the import file:

const server = require('../dist/angular-vercel/server/server');

module.exports = server.app();

And just keep all the package.json the same without editing it.

Mick • Nov 30 '23 • Edited

Ahhhh I totally forgot about the api/index.js and was wondering here he gets this server/main from ... :) Anyway I could NOT get it to work yet! I tried to all different kind of imports and renaming the file from index.js to index.mjs but I couldnt find the correct way yet. Maybe you have a look at it?

import server from '../dist/angular-vercel/server/server';

module.exports = server.app();

import app from '../dist/server/server.mjs';

module.exports = app();

Nothing works...

Btw the package.json is now significantly different! Thats because ng build already builds browser and server app, so no more need for build:ssr! This also means build/deploy time went from 2 minutes to 1 minute :)

Jonathan Gamble • Nov 30 '23

You have to use require because it is JS. Did you try my code? You're importing 'server.mjs'... hence server/server.

Mick • Nov 30 '23

I think thats the first thing tried but in mjs there is no require allowed anymore when I remember correct. I renamed index.js to index.mjs because it was not working.

Jonathan Gamble • Dec 1 '23

It works doing what I said:
angular-ssr-vercel-hazel.vercel.app/

github.com/jdgamble555/angular-ssr...

Mick • Dec 1 '23 • Edited

I got it exactly like you, I double checked everything, I dont know what I am missing. Error:

Cannot find module '../dist/server/server'
Require stack:

/var/task/api/index.js Did you forget to add it to "dependencies" in package.json?

My outputPath is just dist.

Are you on Node 20 maybe? Because I cant use Node 20 because the version they use is not compatible with @angular/animations:

error @angular/animations@17.0.5: The engine "node" is incompatible with this module. Expected version "^18.13.0 || >=20.9.0". Got "20.5.1"

EDIT: Nope, same error with Node 20 when I add --ignore-engines flag to yarn.

Mick • Dec 1 '23

Found it! The outputPath in angular.json actually need to be dist/something and cant be just dist. I dont know why but maybe it has something todo with how Vercel deploys the files.

Doesnt work:

dist/
  - server/
  - browser/

Works:

dist/
  - something/
       - server/
       - browser/

Thats an important info! Will you update the article to Angular 17 or write a new one?

Jonathan Gamble • Dec 1 '23

I didn't change any settings. It defaults to Node 18. I also didn't edit package.json at all. Make sure you're using js and not ts. You can leave me your repo and I can look.

Mick • Dec 1 '23 • Edited

I am pretty sure that your example does not work, too:

angular-ssr-vercel-hazel.vercel.ap...

-> Your function is crashing. Probably with the same error as mine:

Error [ERR_REQUIRE_ESM]: require() of ES Module /var/task/dist/yo/server/server.mjs not supported.

And the reason that you see a website on your example is:

The page (index.html) is a built-time prerendered static html page
The request does NOT go through your serverless function
You can confirm this by setting prerender to false in you angular.json -> You will now see that the normal browser website is served and your ssr serverless function never runs.

If you want we can take a look together but how can I contact you? Or maybe you already find the reason why...

Btw I also see Vercel compiling my index.js:

Warning: Node.js functions are compiled from ESM to CommonJS. If this is not intended, add "type": "module" to your package.json file.
Compiling "index.js" from ESM to CommonJS...

Jonathan Gamble • Dec 1 '23

You're right, but its not detecting my vercel.json file at all! Not sure why. It just loads the regular browser files and never runs the serverless function, and no errors.

Mick • Jan 4

Did you find anything out in the meantime?

Jonathan Gamble • Mar 2

@mickl @trongthuong96 @wolfsoko - Hey guys, I got it working thanks to all of your ideas. See the updated post with a demo.

Mick • Jan 4 • Edited

Angular 17

A lot has changed :) Build times went down from 2:30 min to 1:00 min!

Please note that (according to my findings) it does NOT work if you set outputPath in angular.json just to dist. It needs to be dist/my-project, otherwise it does not work for some reason.

package.json: No need to change anything, SSR is already included in Angular. If you are upgrading from Angular < 17 you can remove the :ssr scripts and the vercel-build script:

"start": "ng serve",
"build": "ng build",

vercel.json:

{
  "version": 2,
  "public": true,
  "name": "my-project",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/api"
    }
  ],
  "functions": {
    "api/index.js": {
      "includeFiles": "dist/my-project/**"
    }
  }
}

api/index.js

const server = import('../dist/my-project/server/server.mjs');

module.exports = server.app;

Jonathan Gamble • Jan 5

What does your package.json look like?

Mick • Jan 5

You dont change anything in Angular 17 SSR is already integrated:

"start": "ng serve",
"build": "ng build",

Jonathan Gamble • Jan 5 • Edited

My function doesn't seem to be working, but I think Angular now works with ssr out of the box so it may be a moot point !? - angular-vercel-ssr.vercel.app/api

angular-vercel-ssr.vercel.app/

Mick • Jan 5

If you upgraded your project then use the angular.json from a fresh Angular 17 project because a lot has changed there!

Jonathan Gamble • Jan 5

Do you have a working link where the "api" folder that holds the function also works? I created a new project for testing. It seems to work out of the box (with no changes at all), but I think my function is not working. Is your function working when you navigate to /api?

Jonathan Gamble • Jan 5

I was able to get it to work both ways api now forwarding to regular. See article changes for how. However, I think it may now work out-of-the-box if we don't do any changes at all.

Mick • Jan 5

Yes it works fine. It redirects me to "/". If I disable JavaScript I see the prerendered pages. I see in you example you export server.app() while it should be server.app. Maybe thats the cause?

Jonathan Gamble • Jan 5

I'm using a module to import it and it works. See the top of the article for the updates. Also, again, I think Angular SSR may work with Vercel now out of the box and none of this is necessary.

Mick • Jan 5

Why do you think it works out of the box? I tried removing vercel.json and api folder but it just shows 404 because build is now creating browser and server folder). If I go to /browser it displays the static index.html (without going through server first) and fails to load all the scripts.

Mick • Jan 10

@jdgamble555 I tried your code:

import * as server from '../dist/angular-vercel-ssr/server/server.mjs';

export default server.app();

But for me it only works like this:

const server = import('../dist/angular-vercel-ssr/server/server.mjs');

module.exports = server.app;

Jonathan Gamble • Jan 10

Did you add "type": "module" to package.json?

Thuong • Dec 22 '23

Angular 17: file api/index.js:

Vercel.json:

Render on the home page:

Because by default the home page is not rendered. Don't know why { "source": "/(.*)", "destination": "/api" } doesn't automatically redirect to the home page.

(I used google translate)

Mick • Jan 4 • Edited

It kinda works but for all static files (javascript, css, images) it returns the prerendered html page again. Does ist work for you?

It works with: "includeFiles": "dist/MYPROJECT/**

Thuong • Jan 5

I found a solution to work without redirecting the home page. Just rename index.html in src to index1.html. And in angular.json "index": "src/index1.html".

Mick • Jan 5

I dont have this problem! Just check my example and use the angular.json from a fresh Angular 17 project.

Raihan Nismara • Jan 8

is it working now ssr on vercel?

Mick • Jan 8

Yes works fine!

Lee Hodges • Feb 24 '22 • Edited

Thanks for this! I made a few changes to my setup so I'm not always running production environments when I want to hit say staging backend.

Strip out "vercel-build": "npm run build:ssr" from package.json
Update "build:ssr" to "ng build --configuration production && ng run project-name-here:server"

Create vercel.sh in your root directory of the project

if [[ $VERCEL_GIT_COMMIT_REF == "main" ]]; then
  echo "This is our production branch"
  npm run build:ssr
elif [[ $VERCEL_GIT_COMMIT_REF == "master" ]]; then
  echo "This is our production branch"
  npm run build:ssr
else
  echo "This is not our production branch"
  npm run build:staging-ssr
fi

The above is just looking at what branch is being deployed, if it's main/master build:ssr will run if its any other branch my staging-environment deployment script will run.

Settings on Vercel for the project add custom build command of sh vercel.sh

Amaury Gonçalves Costa • Jun 24 '22 • Edited

Thanks man for this!! It has saved me, rsss. Thanks 4 share!

Mick • Oct 2 '23

Thanks a lot for the article! Does this also work with Vercel Edge Runtime, which is just a subset of the Node API?

Jonathan Gamble • Oct 2 '23 • Edited

I have not tested it, but there is no reason it shouldn't work on the edge, as it is just JavaScript. You can try adding this to the index.js:

export const config = {
  runtime: 'edge',
};

vercel.com/docs/edge-network/caching

Let me know if you figure it out!

Mick • Oct 17 '23 • Edited

It would require to also set the response header as written in the docs BUT I tried it out and it doesnt work:

Error: The Edge Function "api/index" is referencing unsupported modules:

dist/server/main.js: crypto, fs, http, https, net, os, path, querystring, stream, string_decoder, timers, tty, url, zlib, node:fs, node:path

There is an open feature request to remove the dependencies of Angular Universal (e.g. remove Express) so it can work on workers that dont support full Node API like Vercel Edge Functions or Cloudflare Pages BUT it will probably be closed if it doesnt get 20 upvotes in the next week:

github.com/angular/angular-cli/iss...

Jonathan Gamble • Oct 18 '23 • Edited

Yup, I just tried it and go the same error. Normally in Node.js, you could use the "browser" key in package.json to ignore certain imports, but the edge uses Deno. Until this gets resolved (I upvoted BTW), I don't see Angular Universal being possible on Vercel or any Edge. However, AnalogJS may be a different thing.

Mick • Dec 21 '23

Did you find anything out in the meantime?

Mick • Jan 4

I got it working thangs to @trongthuong96 ! I posted it on top level

Jonathan Gamble • Jan 4

Ok, great, could you post the working config?

Mick • Jan 4

Posted it on top level

Corentin • Mar 13

Hi, I'm trying to push my Angular app (v16.2) to Vercel with SSR. I followed the steps and the deployment works fine. However, when I inspect the page source, I only see an <app-root> tag with nothing inside, indicating that the site isn't rendered server-side. I'm having trouble understanding why this is happening.

Jonathan Gamble • Mar 13

Did you follow the index renaming and prerendering off part as well? I have also only tested on Angular 17.

Abhinav • Jan 4 • Edited

Hey, this is my configuration but i am getting errors as show below.

api/index.js

vercel.json

package.json

using Angular V17

Please let me know on how to fix this. Thanks

Sukhpreet Singh • Sep 29 '22

Thanks for sharing this man! this is helpful

but one problem I am facing is my app is not server-rendered.

the home url is working but only the static version (with cookies disabled)
but any other url is taking more than 10 seconds to respond, resulting in 504 function timeout error.

could you please help my out?
Thanks

Jonathan Gamble • Sep 29 '22

You may have a loop in your code. Make sure to test it with npm run dev:ssr first. Usually it is a login code that should only be ran on the frontend.

George Knap • Oct 6 '23

why is your functions pointing to dist/YOUR_PROJECT_NAME/browser/** ?
Shouldn't it be from .../server/**?

Jonathan Gamble • Oct 6 '23

No, the server is the index.js file. That is for the static files like images, css, etc

Klalib • Nov 25 '22

Thanks for this, How can i used with i18n ?

Jonathan Gamble • Oct 2 '23

Not sure about that, never used i18n on any framework. Post here if you figure it out!

Hieu Tran • Jul 13

I do like this:
api/en/index.js

export default import('../../dist/langs/server/en/server.mjs')
  .then(module => module.app());

api/vi/index.js

export default import('../../dist/langs/server/vi/server.mjs')
  .then(module => module.app());

vercel.json:

{
    "version": 2,
    "public": true,
    "name": "langs",
    "rewrites": [
      {
        "source": "/vi/(.*)",
        "destination": "/api/vi"
      },
      {
        "source": "/en/(.*)",
        "destination": "/api/en"
      }
    ],
    "functions": {
      "api/en/index.js": {
        "includeFiles": "dist/langs/en/**"
      },
      "api/vi/index.js": {
        "includeFiles": "dist/langs/vi/**"
      }
    },
    "redirects": [
      { "source": "/", "destination": "/en", "permanent": false }
    ]
  }

And angular.json

"projects": {
    "langs": {
      ...
      "i18n": {
        "locales": {
          "vi": {
            "translation": "src/locales/messages.vi.xlf",
            "baseHref": "/vi/"
          },
          "en": {
            "translation": "src/locales/messages.xlf",
            "baseHref": "/en/"
          }
        }
      }
...
  }
}

I don't know how to make it work with the default language (en) to use "baseHref": "/"

Mick • Oct 12 '23 • Edited

Thanks for the article!! One little thing: Instead of step 2 and 3 you could just go to the Vercel website and tell it to run "npm run build:ssr" or "yarn build:ssr".

Jonathan Gamble • Oct 12 '23

Well you have to have the Vercel config file anyway, so this actually skips that step.

Anupam Samanta • Jan 30

Using angular 17 ssr. This guide helped me a lot. Thank you.

Francois La Cock • Aug 3 '23

Thank you!! That worked like a charm after I got 404 not found errors on Vercel.