CODEWITHSUNDEEP
angulartypeormtsconfignomachine-nx
Danilo Bassi
Danilo Bassi

Reputation: 358

TypeScript tsconfig extend compilerOption paths instead of override

I'm using NX to host a monorepo with my frontend and my backend. My issue is that I'd like to share my TypeORM entities between my backend and frontend, but on the frontend side, instead of using the main typeorm decorators, I'd like to use the shim decorators.

currently, I'm doing something like this. On my apps/frontend/tsconfig.json I have this:

{
  "compilerOptions": {
    "target": "es2022",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "paths": {
      "typeorm": ["node_modules/typeorm/typeorm-model-shim.js"],
      "@project/dtos/*": ["shared/dtos/src/*"],
      "@project/entities": ["shared/entities/src"],
      "@project/entities/*": ["shared/entities/src/*"],
      "@project/frontend/*": ["shared/frontend/*"]
    }
  },
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.editor.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ],
  "extends": "../../tsconfig.base.json",
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

and on my tsconfig.base.json (at the root of the project)

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["ES2023", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@project/dtos/*": ["shared/dtos/src/*"],
      "@project/entities": ["shared/entities/src"],
      "@project/entities/*": ["shared/entities/src/*"],
      "@project/frontend/*": ["shared/frontend/*"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

Note that on the frontend tsconfig file I had to repeat my tsconfig.base.json paths adding the typeorm shims operator. This was done because if I only left "typeorm": ["node_modules/typeorm/typeorm-model-shim.js"], there, I'll be missing all the other paths. Is there any solution to ADD instead of override all the other paths? Because It seems that I will be adding more paths on the future, and I'd like to keep them on the root tsconfig.base.json only.

Upvotes: 1

Views: 28

Answers (1)

Joep Kockelkorn
Joep Kockelkorn

Reputation: 312

As far as I know there currently is no way to extend a tsconfig on property level. It's either redeclare and duplicate + extend, or use as is.

There are other solutions in the makings though. An issue is currently being openly discussed for over a year in the Typescript repository. Please see this comment by James Henry from nx for some concrete solution directions. Unfortunately, as far as I'm aware, Angular does not yet support Typescript project references, so your milage may vary. But that could change in the near future:

Note, Angular doesn't work with TypeScript project references yet but we're looking into various options to make it happen. (source)

Another alternative solution you could try is moving all path aliases to the tsconfig.base.json and using the @nx/enforce-module-boundaries eslint rule by nx (link) to disallow usage in certain libraries/projects.

Upvotes: 1

Related Questions