How to create angular2 library which could be supported by all script loaders

Question

How can I create a javascript file that contains an Angular 2 module that can be used by other applications, but is loaded at runtime directly from a centralized server and is NOT bundled into a specific application's code?

Think of this as a CDN for an Angular 2 library. The requirement is that the consumers of this library will include a single script on their page.

It is a requirement to implement it this way, so I am not interested in any answers that suggest bundling the library into the individual application's output files. The library script must be loaded directly from the library's server at runtime.

• The centralized web app is called CustomAuth
• CustomAuth has a single Angular 2 module called CustomAuthModule
• CustomAuthModule exposes several services and components that can be used by external Angular 2 applications.

Here is the desired workflow (from a high level).

• A developer wants to use CustomAuth in their Angular2 application called BookLibrary.
• On the developer's index page, they add a script include that points to http://server-url/CustomAuth/script. The consumer should not be required to know anything about module loaders like systemjs or webpack.
• In their angular2 code, they import stuff from the CustomAuth module (services, components, etc...).
• When they compile their application using the angular-cli, it will not include the CustomAuth code, but will instead assume that it will be loaded on the fly at runtime.

I've done a lot of research on this, and I'm not having any luck figuring it out. Any help would be greatly appreciated.

Bak

i think you can create polyfil js for your module, like in plunker example we include angular 2 polyfil embed.plnkr.co/w2FVfKlWP72pzXIsfsCU. this way it will allow user to import js file which user can import in thier index.html and use its module. – Spirula

Answer 1

You can achieve this with ES6 + Angular2 + Webpack.

Before going into that, Let me explain what is umd module system.

The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others)

As quoted above, UMD is a pattern where the libraries created with this pattern would support all the modules/script loaders like requirejs, webpack, browserify, systemjs etc. I.e the libraries which followed the UMD pattern would be recognized by all the major module systems (AMD, CommonJS, ES6 and Vanilla JS).

This is the way that all the libraries in the CDN works.

Now, even you have to follow the same i.e UMD pattern. Since your library is on angular2, i would suggest you to go with ES6, Angular2 and Webpack.

You have to set these configs to get the library in the UMD format, so that it could be used by any script loaders.

output: {
    path: __dirname + '/lib', // path to output
    filename: outputFile, // library file name
    library: libraryName, // library name
    libraryTarget: 'umd', // the umd format
    umdNamedDefine: true // setting this to true will name the AMD module
  },

Once your webpack output bundle is ready (umd module), then any user can inject your library into the index page and start using your angular2 components regardless of script loaders/ modules systems they use.

There is a nice example here and he explained this here

Q: How would a consumer of our library include this umd bundle in their Angular 2 application?

Ans: Since your library is going to be a UMD module, user can include the library based on the script loader/module system they are using with their application.

For example. Vanilla JS:

    <script src="http://example.com/your_lib.js"></script>
    <script>
        // Your_Lib will be available and will attach itself
        // to the global scope.
        var html = Your_Lib.render();
    </script>

RequireJS (AMD):

    <script src="http://example.com/require.js"></script>
    <script> requirejs config goes here </script>
    <script>
        define(['your_lib', function(Your_Lib) {
             var html = Your_Lib.render();
        }])
    </script>

SystemJS (CommonJS):

var map = {
            '@angular': 'node_modules/@angular',
             ....
            'your_lib': 'example.com/your_lib.js'
        };
        var config = {
            defaultJSExtensions: true,
            map: map,
            packages: packages
        };
        System.config(config);

Then you can import your library as usual.

Webpack:

In Index.html

In webpack.config.js

{
    externals: {
        // require("your_lib") is external and available
        //  on the global var Your_Lib
        "your_lib": "Your_Lib"
    }
}

And your library would be available as Your_Lib in the global scope.

Glosseme

How would a consumer of our library include this umd bundle in their Angular 2 application? – Bak

@Bak Updated the answer – Glosseme

@JaganathanBantheswaran Nice. Will this work with angular-cli? – Zygapophysis

I did try with angular-cli. You could try it and let me know. – Glosseme

Sounds like this is the best solution available. Thanks. – Bak