How do I package & release Angular2 plugins?

Question

Within my app, I've created several attribute & structural directives which I think would be extremely useful to others. However, after searching the Angular2 docs, google & stack overflow, I'm unable to find any guides on how to package & release individual plugins.

How can I bundle a directive into a package that can be installed and imported into other projects?

score 0 · Answer 1 · edited May 23 '17 at 11:46

You can package your library using the tsc compiler. The key thing to understand at this level is that using the following configuration, you can't concat compiled JS files directly to obtain a single JS file.

At the TypeScript compiler configuration:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": false,
    "stripInternal": true,
    "module": "system",
    "moduleResolution": "node",
    "noEmitOnError": false,
    "rootDir": ".",
    "inlineSourceMap": true,
    "inlineSources": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

In the HTML

System.config({
  packages: {
    app: {
      defaultExtension: 'js',
      format: 'register'
    }
  }
});

As a matter of fact, these JS files will contain anonymous modules. An anonymous module is a JS file that uses System.register but without the module name as first parameter. This is what the typescript compiler generates by default when systemjs is configured as module manager.

So to have all your modules into a single JS file, you need to leverage the outFile property within your TypeScript compiler configuration.

This question could give you some additionnal hints:

How do I actually deploy an Angular 2 + Typescript + systemjs app?

You can also use webpack to package libraries (and applications). You could have a look at what ng2-select does. See this configuration file:

https://github.com/valor-software/ng2-select/blob/master/webpack.config.js

How do I package & release Angular2 plugins?

1 Answers1