TS Typings for Docker variable ENV error when using SSR

Question

I followed this tutorial to use env variable in Angular with docker

Everything seems quite easy to configure, however when I build my project, there is error

...\server\main.js:12952
apiUrl: $ENV.API_URL || "http://localhost:3000",
        ^
ReferenceError: $ENV is not defined
   

I suspect the src/typings.d.ts to be forgotten

src/typings.d.ts

declare var $ENV: Env;

interface Env {
  API_URL: string,
}

Should I modify the tsconfig files ? there is no clear documentation about it.

• tsconfig.json

  {
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
   }
  }
  

• tsconfig.app.json

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

• tsconfig.server.json

  {
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "./out-tsc/server",
    "target": "es2016",
    "types": [
      "node"
    ]
  },
  "files": [
    "src/main.server.ts",
    "server.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "./src/app/app.server.module#AppServerModule"
  }
  }
  

• tsconfig.spec.json

  {
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jasmine"
    ]
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
  ]
  }
  

Update

The custom webpack code

"projects": {
    "name-of-the-project": {
      //...
      "architect": {
        "build": {
          "builder":"@angular-builders/custom-webpack:browser"_,
          "options": {
            "customWebpackConfig": {
                "path":"custom-webpack.config.js"
            },
            //...
        //...
    }

custom-webpack.config.js

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      $ENV: {
        API_URL: JSON.stringify(process.env.API_URL)
      }
    })
  ]
};

UPDATE

I did all from scratch and the tutorial is working only without SSR (ng add @nguniversal/express-engine). After installing SSR the typings.d.ts is not taken into account anymore :(

Step to reproduce the issue:

ng new app

follow tutorial listed in the first line of this post

create dockerfile

#stage 1
FROM node:latest as node
WORKDIR /app
COPY package*.json ./
RUN npm install
# SET ENVIRONMENT VARIABLES
ENV ENVIRONMENT=production1
ENV SomeAPIKey="This is not an API Key"
ENV SomeOtherAPIKey="This is not another API Key"
COPY . .
RUN npm run build --prod

#stage 2
FROM nginx:alpine

COPY --from=node /app/dist/app /usr/share/nginx/html

EXPOSE 80

Build docker :

docker build . test

Run docker :

docker run test

It works !!!

If now I add ng add @nguniversal/express-engine

I have to replace my dockerfile to take into account SSR but then I have this error :(

Compiled successfully.
/Users/xxx/Dev/app/dist/app/server/main.js:116
    environment: $ENV.ENVIRONMENT,
                 ^

ReferenceError: $ENV is not defined