Nx: Cannot find module with Application specific Tsconfig paths

[johnRambo2k14]

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.

[vsavkin]

@johnRambo2k14 could you expand on what the issue is currently? You can set up path mappings in your application right now. The webpack builder will pick up the tsconfig inside your application.

If this doesn't work, could you provide a repro?

[johnRambo2k14]

@vsavkin

I sadly can't provide the repo since its private. I did manage to successfully setup path mappings within my project however, they must be declared in the root tsconfig.json of the nrwl project. My query was to setup mappings within specific projects that are within the apps folder.

Doing this in my opinion would make managing the code more easier, but as a temporary workaround I declared all the mappings within the tsconfig.json at the root of the repo.

[FrozenPandaz]

@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.

[aromero86]

@FrozenPandaz hi

@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.

Is this resolved today? I have the same problem

Thanks

[alexfriedl]

@FrozenPandaz hi

@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.

Is this resolved today? I have the same problem

Thanks

Me too

[billyjov]

Same Problem here

[shinjucommunications]

Same problem still exists here ;)

[curiouscod3]

Same here

[joaovitorzv]

same

[nhhockeyplayer]

same here too

[Gargamil]

same

[joelkesler]

Same here ➕