After much searching, I have finally discovered a method to create an npm module. Here is the process I followed:
Step 1: Establish a folder named "helloworld"
To begin, create an empty folder with any name you prefer (for example, "helloworld"). This folder will serve as the container for all your module files.
Step 2: Initialize npm
Next, open a command window in the newly created folder and execute the command npm init, just like when setting up any npm package. You'll need to specify details such as the package name, description, main file, and other relevant information. If you intend to develop a module using Typescript, remember to input main.ts as the main file during the setup process. Upon completion, running this command will generate a package.json file within your folder.
Step 3: Install necessary dependencies
Now, proceed to install Angular along with rxjs and zone.js (dependencies required by Angular). Issue the command
npm install --save @angular/core rxjs zone.js
. The resulting
package.json should resemble mine as shown below:
{
"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: Include an additional script "prepublish"
Take note of the extra line under my script section: "prepublish". This line will prove useful later on; when preparing to publish our package, npm will trigger the prepublish command (before uploading your files to the npm server). In this case, the command executes tsc to compile your .ts file(s) into a .js file. Make sure to have a corresponding tsconfig.json file available for this task.
Step 4: Create a "tsconfig.json" file
The tsconfig.json file comes into play during the compilation of .ts file(s) to .js file. Below is an example configuration:
{
"compilerOptions": {
"removeComments": true,
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"declaration": true,
"emitDecoratorMetadata": true, // Required for Angular
"experimentalDecorators": true, // Required for Angular
"sourceMap": false,
"outDir": "./dist", // Output directory
"lib": ["es6", "dom"],
"typeRoots": [
"./node_modules/@types"
]
},
"files": [
"./index.ts" // File to compile
],
"include": [
"lib" // Where your files are located
],
"exclude": [
"node_modules"
]
}
Step 5: Set up folders "dist" and "lib", along with creating an "index.ts" file
Create two directories namely dist and lib. Store compiled files in dist and source files in lib. Additionally, create an index.ts file which will export your component(s) located in the lib folder.
Here's what my index.ts looks like:
export * from "./lib/helloworld.component";
Step 6: Develop helloworld.component.ts within the lib folder
Navigate to the lib directory and craft your component file - helloworld.component.ts. A sample content for this file could be:
import { Component } from "@angular/core";
@Component({
selector: "helloworld",
template: "Hello cool world, I'm your npm component !"
})
export class HelloWorldComponent {
}
Step 7: Generate a ".gitignore" and ".npmignore" file
Prior to publication, prepare a .gitignore file (if planning to host code on Git) and a .npmignore file. Exclude the node_module directory and generated files from being stored in Git. See examples below:
.idea
node_modules
dist
*.iml
Similarly, tailor the .npmignore by omitting the .ts files:
.idea
*.iml
*.ts
Step 8: Execute either the publish command or link for testing the module
If desiring to assess the module before deployment to npm servers, run npm link in the root package folder (at the same level as package.json). Subsequently, execute npm link helloworld in an Angular project to integrate your package as if it were from npm servers - allowing validation of its functionality within your project.
To officially publish on npm servers, use npm publish. Remember, for updates, re-run npm publish post altering the package version. To facilitate version upgrading, issue
npm version [patch | minor | major]
for updating patch, minor, or major versions accordingly!