{"id":16429045,"url":"https://github.com/ocombe/ng-conf-library","last_synced_at":"2025-03-23T07:33:37.767Z","repository":{"id":151132067,"uuid":"56920106","full_name":"ocombe/ng-conf-library","owner":"ocombe","description":"How to create a library for Angular 2 - ng-conf 2016","archived":false,"fork":false,"pushed_at":"2016-05-10T19:57:55.000Z","size":19,"stargazers_count":25,"open_issues_count":0,"forks_count":10,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-02T05:53:16.444Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ocombe.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-04-23T13:17:49.000Z","updated_at":"2019-07-08T13:31:11.000Z","dependencies_parsed_at":"2023-05-22T17:30:53.537Z","dependency_job_id":null,"html_url":"https://github.com/ocombe/ng-conf-library","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/ocombe%2Fng-conf-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ocombe%2Fng-conf-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ocombe%2Fng-conf-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ocombe%2Fng-conf-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ocombe","download_url":"https://codeload.github.com/ocombe/ng-conf-library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244283211,"owners_count":20428153,"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":[],"created_at":"2024-10-11T08:20:30.497Z","updated_at":"2025-03-23T07:33:37.517Z","avatar_url":"https://github.com/ocombe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# How to create a library for Angular 2 - ng-conf 2016\nThis is a basic setup for Angular 2 (or TypeScript in general) libraries, if you want something more advanced check out [Angular 2 Library Seed](https://github.com/preboot/angular2-library-seed)\n\n### 1. Init the project\n- Create a repository on Github:\n\t- Use the name of your library\n\t- Init with a readme, a license (MIT), and a .gitignore file (type node)\n\n- Git clone that repository locally\n- Go to that repository and type `npm init` // [Video](https://youtu.be/LHKrJGW_QX0)\n\t- For the name of your library: no spaces, no special characters (except dashes \u0026 underscore) and all in lowercase\n\t- Give the name of your library to the main file. Example: my-lib.js\n\t- Don't bother with the test command for now\n\n- Install the dev dependencies for Angular 2: `npm install -D @angular/core @angular/compiler @angular/common @angular/platform-browser @angular/platform-browser-dynamic es6-shim@^0.35.0 es6-promise@^3.0.2 reflect-metadata@0.1.2 rxjs@5.0.0-beta.6 zone.js@^0.6.12` (-D means save in package.json as a dev dependency)\n- Add Angular 2 as a peer dependency in your package.json file\n```js\n\"peerDependencies\": {\n  \"@angular/common\": \"^2.0.0-rc.0\",\n  \"@angular/compiler\": \"^2.0.0-rc.0\",\n  \"@angular/core\": \"^2.0.0-rc.0\",\n  \"@angular/platform-browser\": \"^2.0.0-rc.0\",\n  \"@angular/platform-browser-dynamic\": \"^2.0.0-rc.0\"\n}\n```\n\n### 2. Write a service\n- Create a folder named `src`\n- In this folder add a Typescript file for your service, the name of the file doesn't matter\n- Write a simple service (don't forget to export it) // [Video](https://youtu.be/3miw5X6pUDA)\n- Create a main Typescript file at the root named after your library and export * from your library // [Video](https://youtu.be/H_kZ7vLowBw)\n\n### 3. Typescript \u0026 typings\n- Install Typescript \u0026 typings: `npm install -D typescript typings`\n- Create 2 file at the root named `tsconfig.json` \u0026 `typings.json`\n- In `tsconfig.json` write:\n```js\n{\n  \"compilerOptions\": {\n    \"noImplicitAny\": true,\n    \"module\": \"commonjs\",\n    \"target\": \"es5\",\n    \"emitDecoratorMetadata\": true,\n    \"experimentalDecorators\": true,\n    \"inlineSourceMap\": true,\n    \"inlineSources\": true,\n    \"declaration\": true,\n    \"moduleResolution\": \"node\"\n  },\n  \"files\": [\n\n  ]\n}\n```\n- In `typings.json` write:\n```js\n{\n  \"ambientDevDependencies\": {\n    \"jasmine\": \"github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#dd638012d63e069f2c99d06ef4dcc9616a943ee4\"\n  },\n  \"ambientDependencies\": {\n    \"es6-shim\": \"github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2\",\n    \"node\": \"github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#aee0039a2d6686ec78352125010ebb38a7a7d743\"\n  }\n}\n```\n- In the file `tsconfig.json` edit the `files` property and add the following (rename `ng-conf-library` with the name of your lib): // [Video](https://youtu.be/dv7ml7LXuqM)\n```\n\"./typings/main.d.ts\",\n\"./ng-conf-library.ts\",\n\"./src/service.ts\"\n```\n- In `package.json` add a prepublish script with `typings install \u0026\u0026 tsc` // [Video](https://youtu.be/dv7ml7LXuqM?t=11s)\n- Test that script with the command `npm run prepublish` // [Video](https://youtu.be/dv7ml7LXuqM?t=20s)\n- Add a `typings` property in your `package.json` and add it the name of your main typings file (extension .d.ts) that was just created by your prepublish script // [Video](https://youtu.be/dv7ml7LXuqM?t=36s)\n\n### 4. Tests\n- Install karma \u0026 its dependencies: `npm install -D karma karma-phantomjs-launcher phantomjs-prebuilt karma-jasmine karma-typescript-preprocessor@0.0.21 jasmine-core systemjs`\n- Create a file named `karma.conf.js` and copy the content of [this file](https://github.com/ocombe/ng-conf-library/blob/master/karma.conf.js) in it\n- Create a file named `karma-test-shim.js` and copy the content of [this file](https://github.com/ocombe/ng-conf-library/blob/master/karma-test-shim.js) in it\n- Create a `test` folder and create a file named `service.spec.ts`\n- Add this new file to the files property of `tsconfig.json` // [Video](https://youtu.be/fsEZiCkos-Q)\n- Edit the test script of `package.json` and type `tsc \u0026\u0026 karma start` // [Video](https://youtu.be/fsEZiCkos-Q?t=6s)\n- Write some tests // [Video](https://youtu.be/fsEZiCkos-Q?t=13s)\n- Run the tests with `npm test` // [Video](https://youtu.be/fsEZiCkos-Q?t=2m24s)\n\n### 5. Publish\n- Create a file `.npmignore` and copy the content of `.gitignore` in it\n- Fix `.gitignore` to avoid the commit of generated files. Add the following at the end:\n```\n# Generated #\n*.js\n!karma.conf.js\n!karma-test-shim.js\n*.map\n*.d.ts\ntypings\n```\n- Fix `.npmignore` to avoid publishing the Typescript files \u0026 the test files. Add the following at the end:\n```\n# Dev #\n*.ts\n!*.d.ts\ntests\nkarma.conf.js\nkarma-test-shim.js\n```\n- Update the `prepublish` script in `package.json` to run your tests with `typings install \u0026\u0026 npm test`\n- Check the version and publish your library with `npm publish` !\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Focombe%2Fng-conf-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Focombe%2Fng-conf-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Focombe%2Fng-conf-library/lists"}