Search code examples
node.jsangularnpmwebstorm

How to publish a npm module that can be auto import in WebStorm?


I try to publish an easy module like follow:

the file list is:

|--[src]
|    |--[share]
|          |--share.moduel.ts
|          |--index.ts
|
|
|--package.json
|--index.ts

package.json

{
  "name": "my-common",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "typings": "index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

index.ts

export { ShareModule } from './src/share/index';

src/share.module.ts

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {FormsModule} from "@angular/forms";

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [],
  exports: [CommonModule,FormsModule]
})
export class ShareModule { }

src/index.ts

export { ShareModule } from './share.module';

After I publish the npm module,and then npm install my-common, I try to press Alt + Enter on code 'ShareModule' in order to auto organize import statement, but it doesn't show the tab "Add import statement" which works like the Angular2 HttpModulem, FormModule, etc.

So how could I make my own module that can be auto import by key Alt + Enter in WebStorm like other Angular2's official module? Are there some key point I missed?


Solution

  • Finally,I find how to make it work.

    Step 1 create two file in your **/src/** folder like follow:

    index.d.ts index.ts

    Step 2 edit your index.d.ts you show export the class you want to use Alt + Enter to import in WebStrom

    for example

    export declare class ShareModule {
    }
    

    Step 3 edit your index.ts like follow:

    export {ShareModule} from './share/share.module';
    

    Step 4 make two file in / folder like follow

    index.ts:

    export * from './src/index';
    

    index.d.ts:

    export * from './src/index'
    

    Finally, the files should like follow:

    
        |--[src]
        |    |--[share]
        |    |      |--share.moduel.ts
        |    |--index.ts
        |    |--index.d.ts
        |
        |
        |--package.json
        |--index.ts
        |--index.d.ts
    
    

    Now you can import your class by Alt + Enter