nx: Cannot find module with Application specific Tsconfig paths

I have an issue where I want to use set up paths within my tsconfig.app.json which resides within in application (not at the root level of the project).

Ideally I want to set up shortnames for my imports for that application only and not just throw in the tsconfig.json which resides in the root of the workspace.

I dont want to expose paths within my tsconfig.app.json to my entire workspace.

Here is what my tsconfig.app.json looks likes:

{
    "extends": "../../tsconfig.json",
    "compilerOptions": {
        "outDir": "../../dist/out-tsc/apps/configuration",
        "types": [],
        "baseUrl": "./src",
        "paths": {
            "@assets/*": [
                "/assets/*"
            ],
            "@auth/*": [
                "/app/auth/*"
            ],
            "@environments/*": [
                "/environments/*"
            ],
            "@store/*": [
                "/app/store/*"
            ],
            "@shared/*": [
                "/app/shared/*"
            ],
            "@ui/*": [
                "/app/ui/*"
            ],
            "@brands/*": [
                "/app/brands/*"
            ],
            "@tests/*": [
                "/app/tests/*"
            ]
        }
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ],
    "include": [
        "**/*.ts"
    ]
}

And here is my tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "types": [
      "jest"
    ],
    "paths": {
      "@applications/*": [
        "./libs/*"
      ],
      "@applications/backend": [
        "./libs/backend/src/index.ts"
      ],
      "@applications/env": [
        "./libs/env/src/index.ts"
      ]
    }
  }
}

Would be great if you have have a solution or workaround.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (2 by maintainers)

Most upvoted comments

@johnRambo2k14

I believe you want app-specific tsconfig path mappings.

However, I am not sure that is possible using typescript at this time. I threw together a simple typescript (only typescript, no Nx, no Angular) project to demonstrate it: https://github.com/FrozenPandaz/nx-examples/tree/simplets.

It seems like this is not possible using typescript because "extends" in tsconfigs do a shallow extension… meaning if you have a path setting in tsconfig.child.json which extends tsconfig.parent.json which also has a path setting, the path setting from tsconfig.child.json entirely overrides the path setting from tsconfig.parent.json. What you could do (not recommended), is to duplicate the path mapping for every single app… However, your workspace is most likely going to contain a lot more libs which means there’s going to be a lot of duplicated path settings throughout the apps.

I am afraid we cannot help with this issue through Nx… Perhaps an issue at https://github.com/Microsoft/TypeScript would be more appropriate.

+11

FrozenPandaz on Oct 5, 2018

Late to the party, but it seems that you can set the baseUrl and Paths at the root.

So, while you may not be able to, per project, do this:

"paths":{
	"@/* : ["/*"]
{

It appears that in the root tsconfig.base.json you can do this:

"paths" : {
  "@app1/* : ["apps/app1/src/*"]
}

In some ways this is actually better as you can consistently reference dependencies across apps/libs (assuming you’ve set implicitDependencies in nx.json).

davidmoshal on Feb 9, 2021

For reference to people having issues with “Module not found” error. Provided tsconfig.app.json’s baseUrl directs to application source, where it seems that it should direct to workspace root. For me links between modules started working when I either removed the baseUrl from tsconfig.app.json or pointed it to worspace root. Your tsconfig.json (or in latest nx it’s tsconfig.base.json) that lives in workspace root should still have the baseUrl and it seems to be correct.

wifilinker on Oct 26, 2021