bump ver. 1.2.0: correctly handle external resource load with import …

…= require() + bundle close #1

.gitignore

@@ -1,9 +1,8 @@
 # Javascript
 node_modules
-typings/*
+typings
 dist
 npm-debug.log
-!typings/tempfix-plugin-tsc-issue-6615.d.ts
 
 ## OS X
 .DS_Store

README.md

@@ -26,14 +26,15 @@ This step was JUST DONE to produce the repository in the current state, so you d
 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  systemjs-plugin-css  system-text
+npm i --save  angular  reflect-metadata  ng-metadata 
+npm i --save  systemjs  system-text systemjs-plugin-css
 npm i --save-dev  typescript  tslint
+typings i -g
 typings init
 typings install  jquery  angular  --save  --ambient
 ```
 
-Folder structure
+####Folder structure
 ```
 \ - app                             <-- contains all your Typescript code
 |    \ - components
@@ -48,22 +49,23 @@ Folder structure
 |
 | - dist                            <-- output directory for transpiled code TS->JS
 | - index.html                      <-- initial page that load ambient dependency: SystemJS, Reflect-metadata 
-| - system.config.js                <-- SystemJS configuration for loading module starting from 'app/startup' entrypoint  
+| - 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](tsconfig.json) to build **Typescipt** app files and output js to `dist` folder, 
-and setup [SystemJS](https://github.com/systemjs/systemjs/blob/master/docs/config-api.md) into [systemjs.config.js](systemjs.config.js) 
+and setup [SystemJS](https://github.com/systemjs/systemjs/blob/master/docs/config-api.md) into [systemjs.conf.js](systemjs.conf.js) 
 to load the **Angular** `app` module bootstrapping it with ngMetadata from `app/startup` . 
 And finally setup some scripts in [package.json](package.json) to automate `build` and `serve`
 
 
 ###BRANCH `bundle`
-This branch show how to build a sample app with component-style architecture and use TS to bundle all the compiled code in app_bundle.js 
+This branch show how to build a sample app with component-style architecture and use TS to bundle all the compiled code into `dist/app_bundle.js` 
 - [AskCmp](app/components/ask.component.ts) is a class that shows how to write a *dumb component* using inline template + ngMetadata `@Input` `@Output` to expose in/out bindings + handle `ngOnInit` life-cycle hook
 - [AppCmp](app/components/my-app.component.ts) is class that shows how to write a *smart component* using external html + ngMetadata `@Inject` for setting DI to get *services* instance + simple property binding and event handler
 - [QuestionSvc](app/services/question.service.ts) is a class that shows how to write a simple *service* decorated with ngMetadata `@Injectable` and using `@Inject` to get basics ng service/provider ($log,$q) injected by string 'token'
 - [AppModule](app/app.module.ts) define the ngModule importing and registering all the components and services using ngMetadata `...provide()` method and exposing the Module name to bootstrap the app in [startup](app/startup.ts)
+**NOTE:** To avoid TS2307 Compile error: "Cannot find module '...*.html'" follow instruction in [typings-manual-fix.d.ts](typings-manual-fix.d.ts#L4-L11)
 
 ###OTHER SETUP AND SAMPLE
 This repo contains other SystemJS config and TS sample, to test different setup checkout branches:

app/components/my-app.component.ts

@@ -1,11 +1,19 @@
 import {Component, Inject} from "ng-metadata/core";
 import {QuestionSvc} from "../services/question.service";
-import html from "app/components/my-app.html!"; // LOADING TEMPLATE HTML FROM EXTERNAL FILE WITH .html! SYSTEMJS PLAGIN
-// TO AVOID TS2307 ERROR YOU MUST USE ABSOLUTE PATH AND DECLARE MODULE IN    typings/tempfix-plugin-tsc-issue-6615.d.ts
+import html = require("./my-app.html"); // require external HTML relative path is based on 'app' source folder
+
+// IGNORE ERROR TS2307: Cannot find module './my-app.html' UNTIL ISSUE #6615 IS CLOSED(https://github.com/Microsoft/TypeScript/issues/6615)
+// OR USE IMPORT WITH FULLPATH TO LOAD THE TEMPLATE HERE
+// import * as html from "app/components/my-app.html";
+// AND HACK A CORRESPONDING DECLARE MODULE IN typings-manual-fix.d.ts
+// declare module "app/components/my-app.html" {
+//      const template: string;
+//      export default template;
+// }
 
 @Component({
     selector: "my-app",
-    template: html // I PREFER INLINE TEMPLATE, BUT YOU CAN USE SYSTEMJS PLUGIN .html! TO LOAD EXTERNAL FILE
+    template: html.default
 })
 export class AppCmp {
     constructor( // inject dependency into constructor

app/startup.ts

@@ -2,8 +2,9 @@
 import {bootstrap} from "ng-metadata/platform";
 import {AppModule} from "./app.module";
 
-// import CSS (SystemJS will inject it into the document)
-import "./styles.css!"; // IMPORTING DIRECTLY CSS USING SYSTEMJS PLUGIN css! INCLUDE IT IN HEAD
+// import CSS SystemJS will inject it into the document <head>
+import  "./styles.css!"; // IMPORTING DIRECTLY CSS USING SYSTEMJS PLUGIN css!
+// ALTERNATIVE: import css = require("./styles.css"); // require external CSS relative path is based on 'app' source folder
 
 // that boostrap the app.module
 bootstrap(AppModule);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-metadata-quickstart",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Sample project quickstart using ngMetadata",
   "main": "index.js",
   "scripts": {
@@ -37,7 +37,6 @@
   },
   "devDependencies": {
     "tslint": "^3.7.4",
-    "typescript": "^1.8.10",
-    "systemjs-plugin-text": "git+https://github.com/systemjs/plugin-text.git"
+    "typescript": "^1.8.10"
   } 
 }

systemjs.conf.js

@@ -22,9 +22,12 @@ var SystemConfig = (function() {
             "angular": {
                 "format": "global",
                 "exports": "angular"
-            },
-            "*.html": {
-                "loader": "text"
+            }
+            , "*.html": { // use html plugins for require(*.html) relative to 'app' source dir
+                loader: "html"
+            }
+            , "*.css": { // use css plugins for require(*.css) relative to 'app' source dir
+                loader: "css"
             }
         }
     };

tsconfig.json

@@ -14,6 +14,6 @@
   "files": [
     "app/startup.ts", //ENTRY-POINT FOR APP USED TO TRAVERSE/COMPILE DEPENDENCY TO BUILD BUNDLE
     "typings/browser.d.ts", //OTHER TYPESCRIPT DEFINITION FOR AMBIENT: angular, jquery, ...
-    "typings/tempfix-plugin-tsc-issue-6615.d.ts" //NEEDED TO FIX TS2307 ERROR LOADING HTML WITH SYSTEMJS PLUGIN
+    "typings-manual-fix.d.ts" //NEEDED TO VALIDATE require() FOR HTML/CSS
   ]
 }

typings-manual-fix.d.ts

@@ -0,0 +1,11 @@
+// FIX: GLOBAL AMBIENT DECLARE TO VALIDATE COMPILE OF require(...) FOR IMPORTING HTML/CSS IN TYPESCRIPT VIA PLUGINS
+declare const require: (pathToHtmlOrCss: string) => any;
+
+// IGNORE ERROR TS2307: Cannot find module './my-app.html' UNTIL ISSUE #6615 IS CLOSED(https://github.com/Microsoft/TypeScript/issues/6615)
+// OR USE IMPORT WITH FULLPATH TO LOAD THE TEMPLATE IN app/components/my-app.component.ts
+// import * as html from "app/components/my-app.html";
+// AND HACK A CORRESPONDING DECLARE MODULE HERE IN typings-manual-fix.d.ts
+// declare module "app/components/my-app.html" {
+//      const template: string;
+//      export default template;
+// }