|
| 1 | +If you just want to use this package, then you *don't have to build it*. Instead, just grab the prebuilt package from NPM: |
| 2 | + |
| 3 | + npm install angular2-aspnet |
| 4 | + |
| 5 | +The rest of this file is notes for anyone contributing to this package itself. |
| 6 | + |
| 7 | +## How to build |
| 8 | + |
| 9 | +Run the following: |
| 10 | + |
| 11 | + npm install |
| 12 | + npm run prepublish |
| 13 | + |
| 14 | +Requirements: |
| 15 | + |
| 16 | + * Node, NPM |
| 17 | + * `tsc` installed globally (via `npm install -g typescript`) |
| 18 | + |
| 19 | +## Project structure |
| 20 | + |
| 21 | +This package is intended to be consumable both on the server in Node.js, and on the client. Also, it's written in TypeScript, |
| 22 | +which neither of those environments knows natively, but the TypeScript type definitions need to get delivered with the package |
| 23 | +so that developers get a good IDE experience when consuming it. |
| 24 | + |
| 25 | +The build process is therefore: |
| 26 | + |
| 27 | +1. Compile the TypeScript to produce the development-time (.d.ts) and server-side (.js) artifacts |
| 28 | + |
| 29 | + `tsc` reads `tsconfig.json` and is instructed to compile all the `.ts` files in `src/`. It produces a corresponding |
| 30 | + structure of `.js` and `.d.ts` files in `dist/`. |
| 31 | + |
| 32 | + When a developer consumes the resulting package (via `npm install angular2-aspnet`), |
| 33 | + |
| 34 | + - No additional copy of `angular2` will be installed, because this package's dependency on it is declared as a |
| 35 | + `peerDependency`. This means it will work with whatever (compatible) version of `angular2` is already installed. |
| 36 | + - At runtime inside Node.js, the `main` configuration in `package.json` means the developer can use a standard |
| 37 | + `import` statement to consume this package (i.e., `import * from 'angular2-aspnet';` in either JS or TS files). |
| 38 | + - At development time inside an IDE such as Visual Studio Code, the `typings` configuration in `package.json` means |
| 39 | + the IDE will use the corresponding `.d.ts` file as type metadata for the variable imported that way. |
| 40 | + |
| 41 | +2. Use the SystemJS builder to produce the client-side artifacts |
| 42 | + |
| 43 | + `build.js` uses the SystemJS Builder API to combine files in `dist/` into `.js` files ready for use in client-side |
| 44 | + SystemJS environments, and puts them in `bundles/`. The bundle files contain `System.register` calls so that any |
| 45 | + other part of your client-side code that tries to import `angular2-aspnet` via SystemJS will get that module at runtime. |
| 46 | + |
| 47 | + To make it work in an application: |
| 48 | + - Set up some build step that copies your chosen bundle file from `bundles/` to some location where it will |
| 49 | + be served to the client |
| 50 | + - Below your `<script>` tag that loads SystemJS itself, and above the `<script>` tag that makes the first call to |
| 51 | + `System.import`, have a `<script>` tag that loads the desired `angular2-aspnet.js` bundle file |
| 52 | + |
| 53 | + For an example, see https://github.com/aspnet/NodeServices/tree/master/samples/angular/MusicStore |
| 54 | + |
| 55 | + Of course, you can also bundle the `angular2-aspnet.js` file into a larger SystemJS bundle if you want to combine |
| 56 | + it with the rest of the code in your application. |
| 57 | + |
| 58 | +Currently, this build system does *not* attempt to send sourcemaps of the original TypeScript to the client. This |
| 59 | +could be added if a strong need emerges. |
0 commit comments