Creating a Typescript NPM library

Question

I have a modelsdirectory (my-models) in my project that contains a few important typescript classes for my app.

I've been using it from within the app with no problems and, now I want to make it an npm package so I can import it in another project.

This is what I tried to do:

npm init in my-models directory (the one that contains all my models and classes)
npm link in my-models directory (the one that contains all my models and classes)
npm link my-models in another "client" project's root directory
import * from "my-models" in some files of the client project

The problem I have is that no matter what I do, I can't find a way to share all my Typescript classes and use them in another project. I run into trouble compiling my library and then when I make it compile, I cannot import classes in my client project. I get this error:

`File '.../services/my-models/index.d.ts' is not a module.ts(2306)

This is the package.json of my-models:

{
    "name": "my-models",
    "version": "0.9.0",
    "description": "API Client and models",
    "main": "dist/main.js",
    "types": "index.d.ts",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "dependencies": {
        "axios": "^0.19.0",
        "@types/axios": "^0.14.0"
    },
    "devDependencies": {
        "typescript": "^3.9.5"
    }
}

And this is an import in my client project where I try to import one of my models:

import { Student } from 'my-models'

But wait, I kind of made it work doing this:

import { Student } from 'my-models/dist/main'

Why? I'm saying in my-models's package.json that dist/main.js is the main file, why can't I just import * from "my-models"?

BTW, this is my-models/dist directory:

So not sure if I'm doing something wrong or how to do it correctly. Appreciate any help

user_1679126 · Answer

I use the Angular CLI to build NPM libraries even if they are not Angular projects. You can just delete the Angular dependencies from the package.json file and you have a world class TypeScript project setup for you with a great test pipeline.

npm install --global @angular/cli
ng new my-lib --create-application=false

cd my-lib
ng generate library my-lib

After you generate the library you can go into the projects/my-lib/src directory open the package.json file and get rid of the Angular dependencies. Now you have a blank TypeScript project.

ng build my-lib will build it

ng test my-lib will run the unit test

cd into the dist/my-lib folder and you can npm publish straight to npm.

Why hand roll a TypeScript build when you can leverage off the work of the Angular team?

Creating a Typescript NPM library

1 Answers