How to publish Angular 1.5 module written in TypeScript on NPM correctly?

I am trying to publish an NPM module to use it with Webpack in another project. The module is written in TypeScript and contains the Angular 1.5 module. So far I have come up with something like this:

import {ExampleDirective} from './example/ExampleDirective';
import {ExampleComponent} from './example/ExampleComponent';
import {IExampleInterface} from './example/IExampleInterface';
import {ExampleFilter} from './utils/ExampleFilter';
import {ExampleClass} from './example/ExampleClass';
import {ExampleService} from './example/ExampleService';

// export everything that you want to access directly in TS code outside the package
export {
    IExampleInterface, ExampleClass, ExampleService
}

// add to the module everything that should be available via Angular DI mechanism
angular.module('my.components', [])
    .directive('example1', ExampleDirective.factory())
    .component('example2', new ExampleComponent())
    .filter('example3', ExampleFilter.filter)
    .service('ExampleService', ExampleService);

The file above is called index.ts and imports / exports all TS code for consumption. Then I have the following package.json:

{
  "name": "my-components",
  "version": "0.0.6",
  "main": "lib/index.ts",
  "typings": "lib/index",
  "files": [
    "lib/"
  ],
  "scripts": {
    "prepublish": "typings install && tsc"
  },
  "dependencies": {
    "angular": "1.5.*",
    "lodash": "4.13.*",
    "moment": "2.14.*"
  },
  "peerDependencies": {
    "bootstrap": "3.3.*",
    "font-awesome": "4.6.*"
  },
  "devDependencies": {
    "typescript": "1.8.*",
    "typings": "1.3.*"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "declaration": true,
    "outDir": "lib"
  },
  "files": [
    "src/index.ts",
    "typings/index.d.ts"
  ]
}

and typings.json:

{
  "globalDependencies": {
    "angular": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular.d.ts#060060dc34ef700a6ea9e00ccee69b570ff3c242",
    "lodash": "github:DefinitelyTyped/DefinitelyTyped/lodash/lodash.d.ts#83f954972eea14a29161a0d9b9e602c4f8f824d1",
    "moment": "github:DefinitelyTyped/DefinitelyTyped/moment/moment.d.ts#56295f5058cac7ae458540423c50ac2dcf9fc711",
    "moment-node": "github:DefinitelyTyped/DefinitelyTyped/moment/moment-node.d.ts#8886ae591751e8a8237fa855617745768f0b1bdf"
  }
}

When I start npm publishing, everything is compiled from the / src folder, and the JS code along with the TS definitions is in the / lib folder as desired. After publishing, I can use directives and components in my HTML templates and implement services.

However, there is one problem: when I need to import TS definitions wherever I need to import them as follows:

import {ExampleClass, IExampleInterface, ExampleService} from 'my-components/lib/index';

instead, for example:

import {ExampleClass, IExampleInterface, ExampleService} from MyComponents;

, , IDE (IntelliJ Ultimate) . index.ts, ? NPM/ TypeScript/typings/Webpack. .

+4

Source: https://habr.com/ru/post/1651271/


All Articles