#ngMetadata Quickstart Sample project to quickstart an Angular 1.x application with Typescript using ngMetadata to be ready to easly migrate to NG2 when it'll be ready!
##Prerequisite Prerequisite that you need to install before starting project
- Download and install node >4.x
- Globally install Typescript , typings
npm i -g typescript
npm i -g typings
- Optionally install
npm i -g http-server
to serve page locally
##Installation and Run Clone this repo and then simply install the dependency and run it:
npm install
npm start
Open your browser and go to http://localhost:8080
###Initial setup (JUST DONE) This step was JUST DONE to produce the repository in the current state, so you don't need to redone it! But it may be useful to know how to start from scratch.
npm init -y
npm i --save angular reflect-metadata systemjs ng-metadata
npm i --save-dev typescript tslint
npm i -g typings
typings init
typings install jquery angular --save --ambient
####Folder structure
\ - app <-- contains all your Typescript code
| \ - components
| | \ - my-app.component.ts <-- sample component
| | - app.module.ts <-- define app module
| \ - startup.ts <-- entry point boostrap angular app
|
| - dist <-- output directory for transpiled code TS->JS
| - index.html <-- initial page that load ambient dependency: SystemJS, Reflect-metadata
| - system.conf.js <-- SystemJS configuration for loading module starting from 'app/startup' entrypoint
\ - tsconfig.json <-- configure compiler (tsc) to build Typescript code
Configure tsconfig.json to build Typescipt app files and output js to dist
folder,
and setup SystemJS into systemjs.conf.js
to load the Angular app
module bootstrapping it with ngMetadata from app/startup
.
And finally setup some scripts in package.json to automate build
and serve
###OTHER SETUP AND SAMPLE This repo contains other SystemJS config and TS sample, to test different setup checkout branches:
browserify
sample with TS compiled using Browserify + Tsify to build single bundle from commonjs/node modulesbundle
sample with TS compiler set with outFile to produce dist/app-bundle.js using systemoutdir
sample with TS compiler set with outDir to produce all js in dist folder using commonjsplugins
sample using SystemJS plugins to load external component html and include css stylestest
sample showing how to configure test with karma (contrib by Michael de Lang @Oipo)