how to publish angular 2 typescript library on npm

I have created a typescript library for angular 2 which facilitates the to access my backend service.

So far it's a private repo, but I want to upload it as an open source library to github and register it on npm.

I'm not really sure what to do now, since documentation on this subject is not easy to find.

the folder structure looks like this:

src
|--sdk.ts // entry point
|--services
   |--auth.ts
   |--database.ts
   |--5 more ts files
|--utils
   |--utils.ts
   |--interfaces.ts
|--tests (8 ..spec.ts files)

my entry point (sdk.ts) looks like this

import { NgModule, ModuleWithProviders } from '@angular/core';
import { Injectable } from '@angular/core';
import { SelfbitsDatabase } from './services/database';
import { SelfbitsAuth } from './services/auth';
import { SelfbitsAppConfig } from './utils/interfaces';
import { SelfbitsFile } from './services/file';
import { SelfbitsUser } from './services/user';
import { SelfbitsDevice } from './services/device';
import { SelfbitsPush } from './services/push';
import { HttpModule } from '@angular/http';

@Injectable()
export class SelfbitsAngular {
    constructor(
        public auth : SelfbitsAuth,
        public database : SelfbitsDatabase,
        public file : SelfbitsFile,
        public user : SelfbitsUser,
        public device: SelfbitsDevice,
        public push : SelfbitsPush
    ){}
}

export const SELFBITS_PROVIDERS:any[] = [
    SelfbitsAngular,
    SelfbitsAuth,
    SelfbitsDatabase,
    SelfbitsFile,
    SelfbitsUser,
    SelfbitsDevice,
    SelfbitsPush
];

@NgModule({
    providers:SELFBITS_PROVIDERS,
    imports:[ HttpModule ]
})

export class SelfbitsAngularModule{
    static initializeApp(config:SelfbitsAppConfig):ModuleWithProviders{
        return {
            ngModule:SelfbitsAngularModule,
            providers:[
                { provide: 'SelfbitsConfig', useValue: config }
            ]
        }
    }
}

and here's the webpack.config.js which doesn't really do what I want...

module.exports = {
    entry:'./src/sdk.ts',
    output:{
        path: helpers.root('dist'),
        filename:'selfbitsangular2sdk.js'
    },
    resolve: {
        extensions: ['', '.js', '.ts']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude:'/test/',
                loaders: ['ts-loader']
            }
        ]
    }
};

I'm not sure if webpack is even the right choice..or wether is should be bundled and minified or not. Any hints and tipps are welcome!

Cheers


ANSWERS:


Angular University has a good, step by step, tutorial on publishing an Angular 2 library to npm that addresses your concerns/questions.

You can provide a bundled and unbundled version if you wish, I would always provide an unbundled version though. In my libraries I do not provide a bundled version and leave it up to the consumer to bundle and minify.


For those who are still trying to figure out how to do it:

  1. Create your library using @jvandemo's Angular Lib Yeoman generator

  2. After that you just run: npm adduser and npm publish


The publishing process itself is pretty easy:

# Login with your existing npm user
npm login

# Bump library version
npm version --patch

# Publish your library
npm publish

The hardest part is to correctly prepare the content of your package.json and the folder that will hold you build library (one of the common way to name it is dist).

Your dist folder should contain files that are ready to be consumed by Angular JIT projects as well as by Angular AOT projects. It is also should contain your library bundle that is ready to be consumed by the browser directly (let's say via SystemJS).

In a result your dist folder should contain the following files:

  • index.umd.js - UMD bundle that is ready for SystemJS consumption
  • index.umd.min.js - minified version of the bundle to save user's traffic
  • index.umd.js.map, index.umd.min.js.map - for debugging purpose
  • *.js — [produced by tsc, remember that ngc is a wrapper] compiled JavaScript representation of the component or service *.ts files of your library.
  • *.d.ts — [produced by tsc, remember that ngc is a wrapper] declaration files. Since *.ts files with types are being transpiled to *.js files that don’t support typings the TypeScript Compiler needs to put all types information to separate *.d.ts files in order to be able to use those *.js files in TypeScript projects later. By the way, there is a DefinitelyTyped project with a lot of type definitions that have been already contributed for a plenty of JS non-TypeScript libraries.
  • *.metadata.json — metadata associated with the current component (or NgModule). It is kind of JSON representation of the objects we pass to the @Component, @NgModule decorators. This file contains the information that project’s (not library’s) NGC will need that was in the original library *.ts files but was not included in the *.d.ts files.

In this case your package.json should be notified about your build files via main, module and typings fields:

 {
   ...
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",
   "typings": "./dist/index.d.ts",
   ...
 }

You may find more detailed description of what files should be in dist folder and how to compile them in How to create AOT/JIT compatible Angular 4 library with external SCSS/HTML templates article



 MORE:


 ? Webpack built typescript files-modules are empty objects
 ? Webpack built typescript files-modules are empty objects
 ? Webpack built typescript files-modules are empty objects
 ? how to get webpack to bundle node_modules for angular 1
 ? how to get webpack to bundle node_modules for angular 1
 ? how to get webpack to bundle node_modules for angular 1
 ? Using globalize with webpack 2 and typescript
 ? webpack cannot resolve flux/utils
 ? How to create a grunt task that compiles typescript and creates a map for JavaScript files
 ? How to use the "__webpack_public_path__" variable in my WebPack configuration?