How can I use Angular 19 SSR with Docker? - Stack Overflow

I created a fresh Angular 19 SSR app and I would like to use it with Docker.

But I faced a lot of issues.

Dockerfile:

FROM node:23

WORKDIR /app

COPY package*.json ./

RUN npm install

RUN npm install -g @angular/cli@latest

COPY . .

RUN npm run build:ssr

EXPOSE 4200

CMD ["npm", "run", "serve:ssr"]

Script form package.json:

  "scripts": {
    "ng": "ng",
    "build:ssr": "ng build && ng run chapter-alert-front:server",
    "serve": "ng serve",
    "serve:ssr": "node dist/chapter-alert-front-server/main.js",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:chapter-alert-front": "node dist/chapter-alert-front/server/server.mjs"
  },

angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "chapter-alert-front": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/chapter-alert-front",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": ["src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "4kB",
                  "maximumError": "8kB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/chapter-alert-front-server",
            "main": "src/main.server.ts",
            "tsConfig": "tsconfig.app.json"
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "chapter-alert-front:build:production"
            },
            "development": {
              "buildTarget": "chapter-alert-front:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": ["zone.js", "zone.js/testing"],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": ["src/styles.scss"],
            "scripts": []
          }
        }
      }
    }
  }
}

tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node"]
  },
  "files": ["src/main.ts", "src/main.server.ts", "src/server.ts"],
  "include": ["src/**/*.d.ts"],
  "exclude": ["src/test.ts", "**/*.spec.ts"]
}

I'm really struggling to understand how to use the SSR part of angular with Docker. What I'm missing? Or I'm doing wrong?

My goal is just to start the app like I was in my local computer.

With the above code, all work fine but the app doesn't launch. That look normal because the code just run a node app.js ... Which part I need to change?

After some test if I replace

"build:ssr": "ng build && ng run chapter-alert-front:server"

by

"build:ssr": "ng build && ng run chapter-alert-front:serve

It work only in my local computer, but when Docker build the image, it seems to have a infinite load.

The Docker image is part of a Docker compose, but the Docker compose work fine, i'm sure there is no issue from there.

The part representing my Angular app in my Docker compose

  front:
    build:
      context: ./chapter-alert-front
    volumes:
      - .\chapter-alert-front:/app
      - /app/node_modules
    ports:
      - "4200:4200"

The container output with "build:ssr": "ng build && ng run chapter-alert-front:server"

2025-02-04 22:01:19 
2025-02-04 22:01:19 > [email protected] serve:ssr
2025-02-04 22:01:19 > node dist/chapter-alert-front-server/main.js
2025-02-04 22:01:19

If anyone can please, help me a bit, thanks a lot.

EDIT 02/05/2025 : I completly delete the project and create a new one. I had not change anything on the package.json and angular.json

The Dockerfile I use :

FROM node

WORKDIR /app

COPY package*.json /app

RUN npm i

RUN npm install -g @angular/cli@latest

COPY . /app 

EXPOSE 4200

CMD [ "ng", "serve", "--host", "0.0.0.0", "--poll", "2000" ]

It work.

But, the first time I launched it, he give me a error that I can't reproduce.

I just deleted the bind mount, restart my compose, and put back the bind mount. After that everything work.

volumes:
  - .\chapter-alert-front:/app
  - /app/node_modules

I don't really understand where the error come from. Maybe something related to the node_modules or a file/folder not exactly the same ?