How to create a library for Angular 2 - ng-conf 2016

This is a basic setup for Angular 2 (or TypeScript in general) libraries, if you want something more advanced check out Angular 2 Library Seed

1. Init the project

Create a repository on Github:

Use the name of your library Init with a readme, a license (MIT), and a .gitignore file (type node) Git clone that repository locally

Go to that repository and type npm init // Video

For the name of your library: no spaces, no special characters (except dashes & underscore) and all in lowercase Give the name of your library to the main file. Example: my-lib.js Don't bother with the test command for now 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 [email protected] [email protected] zone.js@^0.6.12 (-D means save in package.json as a dev dependency)

Add Angular 2 as a peer dependency in your package.json file "peerDependencies": { "@angular/common": "^2.0.0-rc.0", "@angular/compiler": "^2.0.0-rc.0", "@angular/core": "^2.0.0-rc.0", "@angular/platform-browser": "^2.0.0-rc.0", "@angular/platform-browser-dynamic": "^2.0.0-rc.0" } 2. Write a service

Create a folder named src In this folder add a Typescript file for your service, the name of the file doesn't matter Write a simple service (don't forget to export it) // Video Create a main Typescript file at the root named after your library and export * from your library // Video 3. Typescript & typings

Install Typescript & typings: npm install -D typescript typings Create 2 file at the root named tsconfig.json & typings.json In tsconfig.json write: { "compilerOptions": { "noImplicitAny": true, "module": "commonjs", "target": "es5", "emitDecoratorMetadata": true, "experimentalDecorators": true, "inlineSourceMap": true, "inlineSources": true, "declaration": true, "moduleResolution": "node" }, "files": [

] } In typings.json write: { "ambientDevDependencies": { "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#dd638012d63e069f2c99d06ef4dcc9616a943ee4" }, "ambientDependencies": { "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2", "node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#aee0039a2d6686ec78352125010ebb38a7a7d743" } } In the file tsconfig.json edit the files property and add the following (rename ng-conf-library with the name of your lib): // Video "./typings/main.d.ts", "./ng-conf-library.ts", "./src/service.ts" In package.json add a prepublish script with typings install && tsc // Video Test that script with the command npm run prepublish // Video 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 4. Tests

Install karma & its dependencies: npm install -D karma karma-phantomjs-launcher phantomjs-prebuilt karma-jasmine [email protected] jasmine-core systemjs Create a file named karma.conf.js and copy the content of this file in it Create a file named karma-test-shim.js and copy the content of this file in it Create a test folder and create a file named service.spec.ts Add this new file to the files property of tsconfig.json // Video Edit the test script of package.json and type tsc && karma start // Video Write some tests // Video Run the tests with npm test // Video 5. Publish

Create a file .npmignore and copy the content of .gitignore in it Fix .gitignore to avoid the commit of generated files. Add the following at the end:

Generated

*.js !karma.conf.js !karma-test-shim.js *.map *.d.ts typings Fix .npmignore to avoid publishing the Typescript files & the test files. Add the following at the end:

Dev

.ts !.d.ts tests karma.conf.js karma-test-shim.js Update the prepublish script in package.json to run your tests with typings install && npm test Check the version and publish your library with npm publish !