So my goal is to create a library in Typescript. My intention is to split up core parts of the library into submodules like RxJS or Angular Material.

RxJS and Angular both support imports like so:

// RxJS
import { map, filter } from 'rxjs/operators';

// Angular
import { MatButtonModule } from '@angular/material/button';

However, I am unable to replicate this myself.

My goal is to do something similar and allow you to import a class with import { foo } from 'package/bar;

I have looked at RxJS's source on Github and have tried replicating what they've done but it's not working.

The library piles fine but when I go about importing it I always get a Cannot resolve dependency 'package/foo' error. Meanwhile doing import { test } from package (without the submodule part) works pletely fine.

I've tried using paths in tsconfig to no avail. If that is the answer then I'm doing it wrong.

How do I go about doing this?

So my goal is to create a library in Typescript. My intention is to split up core parts of the library into submodules like RxJS or Angular Material.

RxJS and Angular both support imports like so:

// RxJS
import { map, filter } from 'rxjs/operators';

// Angular
import { MatButtonModule } from '@angular/material/button';

However, I am unable to replicate this myself.

My goal is to do something similar and allow you to import a class with import { foo } from 'package/bar;

I have looked at RxJS's source on Github and have tried replicating what they've done but it's not working.

The library piles fine but when I go about importing it I always get a Cannot resolve dependency 'package/foo' error. Meanwhile doing import { test } from package (without the submodule part) works pletely fine.

I've tried using paths in tsconfig to no avail. If that is the answer then I'm doing it wrong.

How do I go about doing this?

• javascript
• typescript
• ecmascript-6

Share Follow asked Dec 8, 2018 at 8:36 NoahNoah 18411 gold badge22 silver badges1010 bronze badges 9

• How are you bundling your library? Usually the deep imports are based on it bundled as an es6 module with the directory structure intact, if you bundle it as a umd or iife you can't do this. Are you using webpack? – David Sherman Commented Dec 8, 2018 at 10:29
• if you install your lib locally to node_modules, you should be able to import it like 'package/bar'. – ABOS Commented Dec 8, 2018 at 10:30
• @David I'm bundling using webpack but the dependency resolving error es from Typescript's own piler when I try and pile the project. – Noah Commented Dec 9, 2018 at 6:40
• @ABOS Doesn't work. I've used yarn link/npm link and published the package to npm and it still doesn't work. I've tried making 'bar' a sub-directory and put a index.js file there. Doesn't work either. Not sure what to do. – Noah Commented Dec 9, 2018 at 6:44
• Ah so it's only internal to the project then? Others don't have to be able to import your library like that? If so you'll just need the webpack path rewrite plugin. The issue is that while the typescript piler knows the paths under tsconfig.json, webpack is unaware of them. – David Sherman Commented Dec 9, 2018 at 8:58

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 3

In order to achieve that, you can create your "sub-modules" in different directories (although they are technically part of the same module), and create an index.ts on each of those directories exporting there whatever you want to publish.

For example, I have done this in my NodeJs package Flowed, and you can for example do this:

import { FlowManager } from 'flowed/dist/engine';

Where the corresponding index.ts file is this one if you want to check.

Although in my case I put also available all the stuff from the root, so the previous line would be equivalent to:

import { FlowManager } from 'flowed';