Sharing Top Content from the Angular-sphere.

How to build and publish an Angular module – Cyrille Tuzi – Medium

  • Angular modules are delivered in UMD format , so your rollup.config.js should be set .
  • Respect the Angular rule: never use browser-specific APIs (like the DOM) directly .
  • Your module is a feature module, only the final user should import BrowserModule, in the app root module.
  • Creating your Angular module: pitfalls
  • Angular modules you’ve used will be listed in the peerDependencies .

When I created angular-async-local-storage, it was easy to create an Angular module and use it directly in my app. But as it could help other developers, I wanted it to be a reusable module, packaged…

@SitePointJS: How to build an Angular module and publish it on npm #AngularJS

(This post is about Angular 2.)

When I created angular-async-local-storage, it was easy to create an Angular module and use it directly in my app. But as it could help other developers, I wanted it to be a reusable module, packaged and consumed like any other Angular modules.

I struggled with this building part. I found almost no documentation about this, so I tried to copy how the official Http module works. Now it’s done, I’m sharing my experience on how to build and publish an Angular module.

This part is quite the same as creating a module in your app : import the modules you need, declare components, directives or pipes, or provide some services. There is just a few points to be aware of.

First, never import BrowserModule. Your module is a feature module, only the final user should import BrowserModule, in the app root module. If you need the common directives (*ngIf, *ngFor…), import CommonModule.

If your module is about creating new components, directives or pipes, do not forget to export them. Declared ones are only accessible inside your module.

Most importantly, do not mix components/directives/pipes and services in the same module. Why?

If this is not clear for you, you should read the official NgModule documentation chapter, and the FAQ, as it’s an important (and confusing) point in Angular.

…), you should try/catch errors.

, and your components or services (the user will need to import them to inject them where they are needed).

Components/directives/pipes won’t be imported directly by the user, but you need to export them to be AoT compatible (thanks to Isaac Mann for this info).

It’s where I started to struggle. So I managed to copy how official Angular modules work, like the HttpModule. They use:

of my module:

should be set consequently. Here is an example:

is the conventional path and name used by Angular modules.

Rollup requires a moduleName for the UMD format. It will be a JavaScript object, so do not use special characters (no dashes).

decorator), but your bundle should not include Angular.

Why? Angular will already be included by the user app. If your module includes it too, it will be there twice, and there will be fatal (and incomprehensible) errors.

You can now build your module bundle. You can save command lines in npm scripts :

Then:

Note that transpiling is not done directly by TypeScript, you should use the Angular compiler (ngc) : it’s TypeScript with some additional Angular magic.

directory.

. For example :

Some specific points :

directory (displayed on npm repository).

And with a configured npm account, you can now publish your module:

And anytime you need to update your module, just rebuild, change the version number, update the changelog and publish again.

How to build and publish an Angular module – Cyrille Tuzi – Medium

Comments are closed, but trackbacks and pingbacks are open.