If you're looking to develop a component and turn it into a library, here's how you can do it:
1. Building the Component
To start off, create your `foo.component.ts` file along with its associated HTML template. It's recommended to include inline CSS within the `styles` attribute of the `@Component` decorator.
Remember to specify `moduleId: module.id` in `@Component` to establish a relative path connection between the template and the component.
2. Compiling the Code
You'll need to compile your component using `tsc` and a `tsconfig` setup similar to the following:
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"inlineSources": false,
"declaration": false,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"stripInternal": true,
"skipLibCheck": true
},
"files": [
"index.ts",
"typings/index.d.ts"
]
}
3. Publishing on npm
Start by creating your `.npmignore` file, an example structure is shown below:
.idea
*.ts
!*.d.ts
/typings.json
/typings/
/node_modules/
/.gitignore
/.npmignore
/.travis.yml
/test
/karma.conf.js
/karma-test-shim.js
/rollup.config.js
/rollup-min.config.js
/systemjs.config.js
/tsconfig.json
/tsconfig-build.json
If you're not utilizing a JetBrains IDE, remove the entry for `.idea`.
Next, configure your publishing settings in the `package.json`:
"publishConfig": {
"registry": "https://registry.npmjs.org/"
}
Once everything is set up correctly, proceed to publish using `npm publish`.
Example
For an illustration of an external library compatible with `angular2`, take a look at:
https://github.com/noemi-salaun/ng2-logger/
Or explore this resource for a more current version with webpack compatibility:
https://github.com/kaiu-lab/serializer
Though not a component, these examples showcase well-implemented publishing configurations, bundling strategies, and testing methodologies.