Guide on exporting a submodule within a TypeScript package

Question

Guide on exporting a submodule within a TypeScript package

My aspiration is to develop a Typescript library that emulates the structure of popular libraries like RxJS and Angular Material, which are divided into submodules.

RxJS and Angular exhibit a way to import features using syntax like this:

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

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

Despite studying RxJS's source code on Github in an attempt to replicate this behavior, I have not been successful.

I aim to provide a similar importing experience by allowing users to bring in a class with

import { foo } from 'package/bar'

;

While my library compiles without error, attempting to import it consistently results in a

Cannot resolve dependency 'package/foo'

issue. Oddly enough, importing without specifying the submodule, such as import { test } from package, works perfectly fine.

I have experimented with using paths in tsconfig but have yet to find a solution. It's possible that I am implementing it incorrectly.

How can I accomplish this type of importing functionality?

javascript typescript ecmascript-6

Answer 1

Answer №1

To achieve this, consider organizing your "sub-modules" in separate directories (even though they are technically part of the same module) and create an index.ts file in each directory to export the desired content.

For instance, I applied this approach in my NodeJs package called Flowed. You can implement it like this:

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

The corresponding index.ts file can be found here for reference.

In my case, I also made all content available from the root directory. Therefore, the previous line could also be written as:

import { FlowManager } from 'flowed';

Answer 2

To achieve this, consider organizing your "sub-modules" in separate directories (even though they are technically part of the same module) and create an index.ts file in each directory to export the desired content.

For instance, I applied this approach in my NodeJs package called Flowed. You can implement it like this:

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

The corresponding index.ts file can be found here for reference.

In my case, I also made all content available from the root directory. Therefore, the previous line could also be written as:

import { FlowManager } from 'flowed';

Guide on exporting a submodule within a TypeScript package

Answer №1

Similar questions

What is the best way to initiate a function upon each page load?

Title: Propagating error responses through nested async/await try/catch blocks in NodeJS

What is the best way to check the difference between the current date and time with another date and

Unable to find '.file.scss' in the directory '../pages'

An application running on Node.js/Express and hosted on Digital Ocean encounters the "Cannot get /" error message

Filtering for Material Autocomplete is limited to the getOptionLabel field

Ajax is working effectively as the first post is successful and the second post is able to retrieve data

Differentiating between ng-show and ng-if in AngularJS

The specified function is not recognized within the HTMLButtonElement's onclick event in Angular 4

What is the best way to focus on an object using a particular variable in javascript?

What is the process for integrating a Browserify library module into a project as a standard file?

Error: Unable to assign property '_id' to a string

Preventing default link behavior when a linked element is clicked: A guide

Display the concealed mat-option once all other options have been filtered out

Loading identical code in two different div elements

Ways to enhance the functionality of an input component

Tips for resolving the "Page Not Found" error in your NextJs application

Tips for making sure there is a delay in between each axios call in a React

Steps for setting up and shutting down the server during integration testing with Express and Supertest on NodeJS

confirmation message upon completing a form submission