How to create an Angular 2+ component and put it on npm

Question

I am stuck on how to create an AngularX (2+) component and publish it on npm. My goal is to publish a modal component I created in my current Angular App, but for now I just want to create a <hello-world> component. I want my component to be written in TypeScript too.

What steps should I follow to achieve this ? I think I have to start with a npm init, maybe npm install --save @angular/core ? And which files should I create, how should I write them ? (i.e. : I should add a tsconfig.json ?)

Answer 1

I finally found a way to do this, here is my way to create a npm module :

Step 1 : create a folder "helloworld"

First, create an empty folder (you can name it like you want, here I'll name it "helloworld"). It will contain all your files for the module

Step 2 : npm init

Then, you have to open a command window in the folder you just created and type npm init, like any npm package. You'll define your package name, description, main file, and some other datas. If you want to create a module with Typescript, type main.ts when it will ask you for the main file. Once finished, this command will generate a package.json file in your folder.

Step 3 : npm install --save @angular/core rxjs zone.js

Now you have to install Angular and rxjs + zone.js (depedencies needed by Angular). So now, type the command npm install --save @angular/core rxjs zone.js. You should have a file who looks like mine, Here is my package.json :

{
  "name": "helloworld",
  "version": "1.0.0",
  "description": "my first npm package",
  "main": "index.ts",
  "scripts": {
    "prepublish" : "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/core": "^4.2.5",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.12"
  }
}

Step 3.1 : add an extra script "prepublish"
Maybe you noticed that I have an extra line on my script value : "prepublish". This line will be usefull later; when we will publish our package (before sending your files on the npm server) npm will call the prepublish command. Here, this command will call tsc to compile your .ts file(s) in a .js file. To do that, you'll also need a file named tsconfig.json.

Step 4 : create a file "tsconfig.json

This file will be used when you will compile your .ts file(s) in a .js file. Here is my tsconfig.json file :

{
  "compilerOptions": {
    "removeComments": true,
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "declaration": true,
    "emitDecoratorMetadata": true,  //  Needed by Angular
    "experimentalDecorators": true, // Needed by Angular
    "sourceMap": false,
    "outDir": "./dist",             // Output directory  
    "lib": ["es6", "dom"],
    "typeRoots": [
      "./node_modules/@types"
    ]
  },
  "files": [
    "./index.ts"                     // File to compile
  ],
  "include": [
    "lib"                            // Where you files are stored
  ],
  "exclude": [
    "node_modules"
  ]
}

Step 5 : Create folders "dist" and "lib", create a "index.ts" file

Now you have to create two directories : dist and lib. dist will contain the compiled files and lib will contain your files. Create a index.ts file too which will include all your component(s) which need to be exported in the lib folder.

Here is my index.ts file :

export * from "./lib/helloworld.component";

Step 6 : Create helloworld.component.ts inside the lib folder

Then, go to your lib folder and create your component file : helloworld.component.ts. Here is mine :

import { Component } from "@angular/core";

@Component({
    selector: "helloworld",
    template: "Hello cool world, I'm your npm component !"
})
export class HelloWorldComponent {      
}

Step 7 : Create a ".gitignore" and ".npmignore" file

Now your component is ready, before publishing it, you have to write a .gitignore file (if you want to publish your code on Git) and a .npmignore file. You don't need to store the folder node_module nor the generated files on Git. So here is my .gitignore : (I added .idea and *.iml because I'm using IntelliJ Idea which creates a folder and a file.iml)

.idea
node_modules
dist
*.iml

Then, do almost the same for the .npmignore which just doesn't need your ts files :

.idea
*.iml
*.ts

Step 8 : run the publish command or link to test your module

If you want to test your module before sending it to npm servers, go to your root package folder (at the same level than the package.json) and run npm link. Once done, go to an Angular project and run npm link helloworld : It will get your package like if it was on npm server and you can use it in your project to check if everything is good.

If you want to publish it on npm servers, run npm publish. Just remember, if you want to update your package, you just have to re-run npm publish after you updated your package version. To do that, just run npm version [patch | minor | major] to upgrade your patch or minor/major version !