This project provides a template for an angular 2 project setup with JSPM. You can copy or use it as an inspiration for your own projects.
Clone this repo
git clone https://github.com/flaviait/ng2-jspm-template.git
You need to install a node.js version >= 4.0.0, since this project uses ES2015 language features.
At the moment of writing this, WEB-18904 for the JetBrains IDE has not yet been implemented. If you use it, please vote for it :)
Because of this we have our jspm dependencies duplicated in the npm configuration (this should not be too much overhead, since npm caches the deps).
All the source files are placed inside the src
directory.
There are three important entry points:
src/styles/main.scss
contains the global styles. This is the place to put css frameworks and global font settings for example.src/main.ts
is the entry point for the application in production mode.src/main.dev.ts
is the entry point for development mode.
To install the development dependencies, simply run
npm run dev-install
To start the dev server, run
npm start
The development mode of this template is optimized to support frontend developers with a fast workflow.
It makes use of the following technologies:
- The JSPM development bundling watches the bundled source files and incrementally rebundles the application on change. This speeds up the page load, since the client does not have to trigger a bunch of HTTP requests during dependency resolution and transpilation.
- The hot-module-reloading watches the source files for changes
and reloads only the modules affected by a change. This is much faster than reloading the whole page.
With
@ngrx/store
the global application state is kept across module reloads. - A livereload server is watching the
src/main.scss
file and triggers a reload of the corresponding css.
To install only the production dependencies, run
npm i --production
To create a distribution build (should be run on the ci system), run
npm run dist
To launch a dist server which provides the processed files, run
npm run dist-start
To create a build and then launch the server, simply run
npm run dist-server