angular 2 directive as npm package

Question

I've a directive that I want to publish on npm. I read the doc here and after that here is what I did:

• Copy the .js file that is compiled from the .ts file. ( I didn't copy the map file)
• Make new folder on desktop and paste it there
• npm init and npm publish
• create new project and npm install --save-dev my published package

However it doesn't find the name of the directive when I'm trying to declare it in the module

@NgModule({
  declarations: [
    AppComponent,
    MyDirective //this is not found
  ],

The js file appears in the module folder though

Answer 1

Just in case someone in the future might be struggling as I did here are the big steps.

1. npm init the folder so it has a package.json and add necessary devDependencies
2. compile .ts to js
3. tell npm to ignore .ts files in .npmignore:

 node_modules
 npm-debug.log
 *.ts
 !*.d.ts

I hope I didn't miss anything, in any case the tutorials above in the accepted answer will help

Answer 2

You imported import {...} from 'your-package-name/your-main-js'; it, right?

Here's a nice guide to create npm packages for Angular2.

https://medium.com/@OCombe/how-to-publish-a-library-for-angular-2-on-npm-5f48cdabf435#.coog6uf98

If you want to create a component package, remember to inline your templates/styles ! Otherwise your app will be broken..

Or you could use a script like this https://github.com/ludohenin/gulp-inline-ng2-template to inline those templates/styles..

Maybe this repo as a starting point will help: https://github.com/mxii/ng2-offclick

You can also take a look at these resources:

• http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/
• http://myrighttocode.org/blog/typescript/angular2/components/npm/angular2-npm-components
• https://github.com/jvandemo/generator-angular2-library
• https://www.reddit.com/r/Angular2/comments/52vz2b/how_to_publish_component_as_library/