{"id":13818267,"url":"https://github.com/davguij/angular-npm-module-seed","last_synced_at":"2025-07-24T10:37:26.643Z","repository":{"id":57178856,"uuid":"80068274","full_name":"davguij/angular-npm-module-seed","owner":"davguij","description":"Starting point for developing Angular modules and publishing them on NPM.","archived":false,"fork":false,"pushed_at":"2017-01-26T19:27:27.000Z","size":18,"stargazers_count":49,"open_issues_count":4,"forks_count":43,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-08T20:02:43.610Z","etag":null,"topics":["angular","seed"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davguij.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-25T23:26:14.000Z","updated_at":"2024-01-28T17:31:01.000Z","dependencies_parsed_at":"2022-09-09T17:30:51.144Z","dependency_job_id":null,"html_url":"https://github.com/davguij/angular-npm-module-seed","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davguij%2Fangular-npm-module-seed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davguij%2Fangular-npm-module-seed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davguij%2Fangular-npm-module-seed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davguij%2Fangular-npm-module-seed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davguij","download_url":"https://codeload.github.com/davguij/angular-npm-module-seed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248613124,"owners_count":21133442,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","seed"],"created_at":"2024-08-04T07:00:38.436Z","updated_at":"2025-04-12T18:30:37.862Z","avatar_url":"https://github.com/davguij.png","language":"TypeScript","readme":"# Angular NPM Module Seed\n## What's this?\nThis project intends to give an easy-to-use starter for developing and publishing an Angular NPM module, so that it then be installed through the regular `npm install` command by other users.\n\nThe whole project is heavily inspired by [Cyrille Tuzi](https://github.com/cyrilletuzi), through his [How to build and publish an Angular module](https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464#.qcwybm3pa) Medium post.\n\n## Getting ready\n* `fork` this repo and change its name to match your module's\n* `clone` your fork\n* review the `package.json` file contents and include your name, your module's name and any other information you find necessary. Also, make sure the listed dependencies and their version numbers are what you need them to be\n\n\u003e Don't pay attention to the `package-dist.json` file by now, we will get there later on.\n\n* `npm install` to install all dependencies or `yarn`\n\n## Coding time!\nYou'll probably want to write some awesome code now.\n\nThe seed includes a sample module file (`seed.module.ts`), as well as a sample service (`seed.service.ts`) and a sample public component (`seed.component.ts`), to get you inspired.\n\nSo now it's the time to either rename those files and the classes inside them to your liking, or ditching them and writing your stuff from scratch.\n\n## Now compile it!\nOnce you have some nice amount of code put into your services, components, filters..., it's probably a good time to compile your module and taste the rewards for your hard work. These are the steps:\n* open the `tsconfig.json` file and include in the `paths` value **all the modules** your project depends on, as the final bundle won’t include them directly\n* open the `rollup.config.js` file and change the following values\n```js\nexport default {\n\t// (...)\n\tdest: 'dist/bundles/npm-module-seed.umd.js', // change this to your module's name\n\t// (...)\n\tmoduleName: 'ng.npm-module-seed', // change this to your module's name\n\tglobals: {\n\t// Your module use Angular things (at least the NgModule decorator), \n\t// but your bundle should not include Angular.\n\t// So you need to set Angular as a global. And you need to know the UMD module \n\t// name for each module. It follows this convention: ng.modulename \n\t// Also, include the RXJS only if your module uses them.\n\t\t'@angular/core': 'ng.core',\n\t\t'@angular/common': 'ng.common',\n\t\t'rxjs/Observable': 'Rx',\n\t\t'rxjs/ReplaySubject': 'Rx',\n\t\t'rxjs/add/operator/map': 'Rx.Observable.prototype',\n\t\t'rxjs/add/operator/mergeMap': 'Rx.Observable.prototype',\n\t\t'rxjs/add/observable/fromEvent': 'Rx.Observable',\n\t\t'rxjs/add/observable/of': 'Rx.Observable'\n\t}\n}\n```\n* open the `package-dist.json` file (now is the right time to do it!) and change the details there. Keep in mind that **these details will only apply to the package you will publish to NPM.** Since we will only publish our generated `dist` folder, the building process will copy this file to the said folder and change its name. Make sure you include your module's dependencies (i.e. `@angular/core` and so on) as `peerDependencies`.\n* finally, `npm run build` will compile, tree-shake, uglify... your module's code into the `dist` folder.\n\n## Use your code locally\n\nIt would probably be a good idea to test your new module locally before publishing it to the NPM repository.\n\nI suggest creating a separate Angular project and importing your module into it. To do that, you'll need to run `npm link` inside your module's `dist` folder; then navigate to your testing project root and run `npm link {name-of-module}`. This will symlink your original module to the `node_modules` folder of your testing project.\n\nJust remember to run `npm run build` in your original module root folder so that its symlinked `dist` folder grabs the changes you make.\n\n## Publish your awesome module (finally!)\n\nOnce you're ready to publish your hard work so that the rest of us can take advantage of it, please follow this easy steps:\n* configure your NPM acount, if you haven't done it already, following [these instructions](https://docs.npmjs.com/getting-started/publishing-npm-packages)\n* navigate to your module's `dist` folder and run `npm publish`\n\nAnytime you need to update your module, just rebuild, change the version number and publish again.\n\n## Other stuff\n### To-do\n\n* Adding unit tests.\n* Explore using OpaqueTokens for referencing services.\n\n### Get in touch\n\nFeel free to drop me a line if you have an issue, doubt, problem or suggestion, even just to tell me what you think. You can leave an issue here or give me a shout on [Twitter](http://twitter.com/davguij).\n\n### License\n\nMIT\n","funding_links":[],"categories":["TypeScript","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavguij%2Fangular-npm-module-seed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavguij%2Fangular-npm-module-seed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavguij%2Fangular-npm-module-seed/lists"}