/angular15-typescript-jspm

Demo of using Angular ^1.5.8, Typescript ^2.0.0 and JSPM

Primary LanguageJavaScriptMIT LicenseMIT

angular15-typescript-jspm

Demo of using Angular ^1.5.8, Typescript ^2.0.0 and JSPM

Why use Angular 1 Components, Typescript and JSPM?

  • Angular Components
    1. Modular component-based architecture
    2. Predicatable one-way data flow
    3. 100% of the time, Angular component's simpler API compared to Angular directives, covers your use case 80% of the time
  • Typescript
    1. Use types only when you want to
    2. Type checking on your own code leads to better scalability in development process for large apps/large teams
    3. Not just for your code: type checking on 3rd party libraries with typings
  • JSPM
    1. Automated build process
    2. Automated dependency management
    3. Use es2015 modules today

Links

Installation

  1. Node and npm (go download it from the web or using your favorite package manager)
  2. VS Code (to get development experience outlined in this README)
  3. Tooling (from command line)
    1. jspm CLI (npm i -g jspm)
    2. TypeScript CLI (npm i -g typescript)
    3. Typings CLI (npm i -g typings)
    4. TSLint (npm i -g tslint)
    5. jspm registry config github - use Github personal access tokens (read docs on registry configuration here)
  4. clone repository (git clone https://github.com/sgwatgit/angular15-typescript-jspm.git)
  5. cd angular15-typescript-jspm
  6. Run npm install afterward to restore all the neccessary dependencies.
    • This will also run jspm install and typings install which will add client site dependencies and non-typescript library type support
  7. TSLint VSCode extension

App Structure

Directories

/.vscode/ contains VS Code project configuration (hides /node_modules/ and /jspm_packages/)

/jspm_packages/ client site application module dependencies (hidden in VS Code)

/node_modules/ development cycle module dependencies (hidden in VS Code)

/app/ main application files including entrypoint (main.ts) and angular component files (user-form.component.ts)

/typings/ Typescript definition files for non-Typescript libraries

Files

config.js SystemJs module loading configuration file managed by JSPM (contains dependencies at exact versions in the app)

index.html page in which the application runs

package.json Node module dependency list, project configuration (also includes JSPM package dependencies and defines valid Semver range)

tsconfig.json Typescript compilation configuration for project

tslint.json Tslint configuration for project Typescript linting

typings.json References to locations and versions of Typescript typings files

Usage

Build Process

Dev

  • npm run unbundle (if previously bundled)
  • npm start
    • This will launch the application running on a local server with browser-sync support

Production

  • npm run bundle or npm run bundle:prod
    • NOTE: Once bundled is created and injected, the app will be served from the generated build.js and therefore will break live-reloading while in development mode. To re-enable live-reloading for script, run npm run unbundle or npm start to remove the bundling and rebundle again once you are ready for deployment.
  • Copy build.js to server and add script tag. Ensure <user-list></user-list> tag exists on page to give angular component a hook.

Alternative Production

  • Update package.json scripts npm run bundle and npm run bundle:prod to jspm bundle instead of jspm bundle-sfx. This will produce a bundle which is not self-executing and will need to be imported into your page manually. It also does not include the module dependencies or the module loader so they will need to be added.
  • Copy config.js, build.js and jspm_packages/system.js to your server and add the following script tags
    • Note: If you need to support IE11 you will also need to deploy jspm_packages/system-polyfills.js but it does not need a <script> tag since system.js will pull it in automatically if needed.
<script src="/system.js"></script>
<script src="/config.js"></script>
<script src="/build.js"></script>
<script>
     System.import("app")
            .catch(function(err) { 
                console.error(err);
            });
</script>

License

MIT