1

I have a lib in a folder with subfolders, with some typescript files, and some of those depends of other files in other subfolders.

I want to include some of those files like it were local in another project. A similar function is available in visual studio (add reference file/folder), but was unable to reproduce with typescript/vscode.

Tried multiples ways like direct import and with the tsconfig (paths, includes, reference projects,etc) but all of those have problems to achieve that. I ended making symbolic links, but not the best solution.

Just to be clear:

  • I don't want to have a node_module/typings in each subfolder library
  • I don't want a precompiled project with each subfolder library
  • I just want a file in another folder like it were local in a project

Thanks in advance

Demo Repository

Knight Lore
  • 43
  • 3
  • 7
  • I was also going to suggest symbolic links but it sounds like you have already reached that conclusion. Have you considered [using local modules as npm package depencies](https://stackoverflow.com/questions/15806241/how-to-specify-local-modules-as-npm-package-dependencies)? – Wex Mar 08 '19 at 21:29
  • Your question is unclear. Please provide an example of a file structure. – Nino Filiu Mar 08 '19 at 22:11
  • Thanks @Wex, I've tried the npm links once, but caused some conflicts with webpack and the installation in other enviroments becomes complex, not to mention that the file needs to be compiled with his modules, etc. Maybe I asking too much... :) – Knight Lore Mar 08 '19 at 22:27

1 Answers1

1

If I understand correctly, "rootDirs" sounds like it accomplishes exactly what you are trying to achieve.

Using ‘rootDirs’, you can inform the compiler of the roots making up this “virtual” directory; and thus the compiler can resolve relative modules imports within these “virtual” directories as if were merged together in one directory.

Edit: Here's an update to your config to allow your node_modules to be shared with the projects in the lib folder. Note that you'll need to move your tsconfig to a parent directory that both these folders share, eg the root project directory:

        "baseUrl": ".",
        "paths": {
            "*": ["app/node_modules/*"]
        },
        "rootDirs": [
            "app/src",
            "lib",
        ]
Wex
  • 15,539
  • 10
  • 64
  • 107
  • Yes, tried that, but if o try to open the file (opening the symbol, etc) it complains about the missing types. I was able to make the code work sometimes, but the compiler starts to throw errors everywhere for missing modules (external modules), typings and dependencies. In visual studio (no vscode) it's possible to add a file like it exists in a local directory, at least in .net languages. – Knight Lore Mar 08 '19 at 22:08
  • 1
    Added a [demo](https://github.com/knightlore/demoref) repository. If you open the index in src and ctrl+click the Comp tag, it will open the file and complain about the missing react module. – Knight Lore Mar 08 '19 at 22:14
  • A couple things to note: 1) Your `react` error goes away if you `npm install` in your `app` folder. 2) You can actually do `import { Comp } from "./comp";` with the current `rootDirs` setup you have (this is what I meant when I said it gives you the feeling of having your `lib/component` folder be treated as though it were local). – Wex Mar 08 '19 at 22:58
  • Similarly, if you change `rootDirs` to `['src', '../lib']` your import would change to `import { Comp } from "./component/comp";` – Wex Mar 08 '19 at 22:59
  • Thanks again Wex. I followed your guide and I was able to import in different ways, and I have installed the react module with npm install, but still getting the error about the missing react in the comp.tsx. Typescript may generate valid code (even with the error), but keeps seeing the comp.tsx file where it is, and where it is don't have any module installed. – Knight Lore Mar 08 '19 at 23:27
  • My mistake, I misunderstood which file you were referring to. In any case, shouldn't be a problem. You can tell the typescript compiler to check `app/node_modules` when it does module resolution. I updated my answer to reflect this change. – Wex Mar 09 '19 at 01:10
  • Thanks again, Wex! As you say, if I move the tsconfig to a parent forlder I'm making the lib folder to be a child of the project, which is bascially what I'm doing with the symbolic links :) The thing is, i have lots of projects on that parent folder and a lib folder for many of those, so it's not exactly the solution I'm looking for. I simply think that typescript projects doesn't have the same feature that VS project has, so I will not find any exact solution. Anyway, you are being very helpful! Thank you for your time! PD: I can make the answer as correct if it was helpful for others. – Knight Lore Mar 09 '19 at 15:09