Angular 19 application builder ESM interop error with third party dependency `__dirname`

[synthet1c]

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

Yes

Description

When including the library typeorm using the default angular.json config with the new application builder there is an ESM interop error with the build system due to typeorm depending on the app-root-path module which uses the CommonJS global constant __dirname.

The documentation refers to CommonJS being compatible with third-party dependencies.

Please provide a link to a minimal reproduction of the bug

https://github.com/synthet1c/angular-typeorm-mvp

Please provide the exception or error you saw

ReferenceError: __dirname is not defined
    at node_modules/app-root-path/index.js (/Users/founts/projects/angular-typeorm-mvp/.angular/cache/19.2.4/angular-typeorm-mvp/vite/deps_ssr/typeorm.js:2730:26)
    at __require2 (/Users/founts/projects/angular-typeorm-mvp/.angular/cache/19.2.4/angular-typeorm-mvp/vite/deps_ssr/chunk-SOE35BD4.js:47:50)
    at node_modules/typeorm/connection/ConnectionOptionsReader.js (/Users/founts/projects/angular-typeorm-mvp/.angular/cache/19.2.4/angular-typeorm-mvp/vite/deps_ssr/typeorm.js:5362:51)
    at __require2 (/Users/founts/projects/angular-typeorm-mvp/.angular/cache/19.2.4/angular-typeorm-mvp/vite/deps_ssr/chunk-SOE35BD4.js:47:50)
    at node_modules/typeorm/globals.js (/Users/founts/projects/angular-typeorm-mvp/.angular/cache/19.2.4/angular-typeorm-mvp/vite/deps_ssr/typeorm.js:57301:37)
    at __require2 (/Users/founts/projects/angular-typeorm-mvp/.angular/cache/19.2.4/angular-typeorm-mvp/vite/deps_ssr/chunk-SOE35BD4.js:47:50)
    at node_modules/typeorm/index.js (/Users/founts/projects/angular-typeorm-mvp/.angular/cache/19.2.4/angular-typeorm-mvp/vite/deps_ssr/typeorm.js:59834:26)
    at __require2 (/Users/founts/projects/angular-typeorm-mvp/.angular/cache/19.2.4/angular-typeorm-mvp/vite/deps_ssr/chunk-SOE35BD4.js:47:50)
    at eval (/Users/founts/projects/angular-typeorm-mvp/.angular/cache/19.2.4/angular-typeorm-mvp/vite/deps_ssr/typeorm.js:60148:28)
    at async ESModulesEvaluator.runInlinedModule (file:///Users/founts/projects/angular-typeorm-mvp/node_modules/@angular/build/node_modules/vite/dist/node/module-runner.js:1049:5)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 19.2.4
Node: 20.14.0
Package Manager: npm 10.7.0
OS: darwin arm64

Angular: 19.2.3
... common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.4
@angular-devkit/build-angular   19.2.4
@angular-devkit/core            19.2.4
@angular-devkit/schematics      19.2.4
@angular/cli                    19.2.4
@angular/ssr                    19.2.4
@schematics/angular             19.2.4
rxjs                            7.8.2
typescript                      5.7.3
zone.js                         0.15.0

Anything else?

I've attempted to configure custom-webpack builder to shim __dirname but didn't have any luck with that and don't feel it's the right approach as I would lose the benefit of vite.

[alan-agius4]

You can add the following at the top of your server.ts to shim the __dirname and __filename.

//@ts-ignore
globalThis.__dirname = import.meta.dirname;
//@ts-ignore
globalThis.__filename = import.meta.filename;

[synthet1c]

@alan-agius4 Unfortunately, that didn't work. Same error. https://github.com/synthet1c/angular-typeorm-mvp/tree/shim-dirname-in-server. I tried both before and after the imports in the server.ts file with 2 separate commits.

[alan-agius4]

That approach only works during ng serve. You can mark that package as external by modifying your angular.json like this:

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      "outputPath": "dist/angular-typeorm-mvp",
      "index": "src/index.html",
      "browser": "src/main.ts",
      "externalDependencies": [
        "app-root-path"
      ]
    }
  }
}

Note: This requires app-root-path to be installed when you deploy the application.

[synthet1c]

That Unfortunately didn't work either. Same error. [vite] (ssr) Error when evaluating SSR module ./server.mjs: __dirname is not defined

It points to this in the compiled file. module.exports = lib(__dirname);

// node_modules/app-root-path/index.js
var require_app_root_path2 = __commonJS({
  "node_modules/app-root-path/index.js"(exports, module) {
    "use strict";
    var lib = require_app_root_path();
    module.exports = lib(__dirname);
  }
})

Do you think this bug report should be to typeorm, rather than angular?

[alan-agius4]

Can you change the "externalDependencies": ["app-root-path"] to "externalDependencies": ["typeorm"]?

TypeORM currently has an open issue regarding ESM support. See: typeorm/typeorm#10801

[synthet1c]

@alan-agius4 Perfect! Thanks for your help!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}