How do I include node modules in my tsconfig?

Question

I have some raw angular typescript components that I've put into a private NPM module to share across projects.

I import my components as I normally would with any other npm library but when I try and serve my app I get ./node_modules/@bit/myusername.test.global.test-component/test.component.ts is missing from the TypeScript compilation.

I tried adding my node_modules/@bit/myusername.test.global.test-component/**/*.ts to files in tsconfig.json but still get the same error.

    {
      "compileOnSave": false,
      "filesGlob": [
        "**/*.ts", //Local source, this is the default //generated source
        "node_modules/@bit/**/*.ts",  // "./node_modules/justinyoung3231.test.global.test-component/*.ts" //generated source

    ], 

//Add as many directories to the above list as needed
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Here's the package.json in my private module

{
  "_from": "@bit/myusername.test.global.test-component",
  "_id": "@bit/myusername.test.global.test-component@1.0.1",
  "_inBundle": false,
  "_integrity": {{removed}},
  "_location": "/@bit/myusername.test.global.test-component",
  "_phantomChildren": {},
  "_requested": {
    "type": "tag",
    "registry": true,
    "raw": "@bit/myusername.test.global.test-component",
    "name": "@bit/myusername.test.global.test-component",
    "escapedName": "@bit%2fmyusername.test.global.test-component",
    "scope": "@bit",
    "rawSpec": "",
    "saveSpec": null,
    "fetchSpec": "latest"
  },
  "_requiredBy": [
    "#USER",
    "/"
  ],
  "_resolved": "https://node.bitsrc.io/myusername.test.global.test-component/-/myusername.test.global.test-component-1.0.1.tgz",
  "_shasum": {{removed}},
  "_spec": "@bit/myusername.test.global.test-component",
  "_where": "/Users/HD/Desktop/_temp/booker",
  "bundleDependencies": false,
  "dependencies": {
    "@angular/core": "~7.0.0"
  },
  "deprecated": false,
  "devDependencies": {},
  "homepage": "https://bitsrc.io/myusername/test/global/test-component",
  "license": "SEE LICENSE IN LICENSE",
  "main": "test.component.ts",
  "name": "@bit/myusername.test.global.test-component",
  "peerDependencies": {},
  "version": "1.0.1"
}

How can I reference these files in my tsconfig?

What does your private package expose? Does it contain transpiled JavaScript code and corresponding TypeScript declaration files? Please have a look at two properties in the `package.json` file in your private package: `main` and `types` or `typings`. What do they say? If a package is published correctly, it should just work. — Karol Majewski, Dec 14 '18 at 20:58
updated my question to include the package.json of my private module. — Justin Young, Dec 14 '18 at 22:12
try to use "include". But, well... I don't know why didn't you just build package and add js file with .d.ts declaration inside of package — Volodymyr Baydalka, Dec 14 '18 at 23:14

score 0 · Answer 1 · answered Dec 16 '18 at 09:17

There are a few thing you should do:

set the saveDependenciesAsComponents in your bit.json file. Look here.
When you do bit import, to bring your components, do bit import --skip-npm-install in order to avoid the component package dependencies. This will fallback to the project dependencies due to node module resolution.

For those reading out of context, OP is trying to import angular components using bitsrc.io CLI. Right now there is no tolling support using angular and bit. In order to share components they have to live in very similar angular projects, so the angular compiler will take care of compilation.

How do I include node modules in my tsconfig?

1 Answers1