diff --git a/.gitignore b/.gitignore
index c62405e..1088ef5 100644
--- a/.gitignore
+++ b/.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
diff --git a/README.md b/README.md
index abb854b..f827688 100644
--- a/README.md
+++ b/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-dev typescript tslint
+npm i --save angular reflect-metadata ng-metadata
+npm i --save systemjs system-text systemjs-plugin-css
+npm i --save-dev typescript tslint copyfiles rimraf
+typings i -g
typings init
typings install jquery angular --save --ambient
```
-Folder structure
+####Folder structure
```
\ - app <-- contains all your Typescript code
| \ - components
@@ -43,21 +44,22 @@ Folder structure
| | - styles.css <-- sample css styles loaded by plugin
| \ - startup.ts <-- entry point boostrap angular app
|
-| - dist <-- output directory for transpiled code TS->JS
+| - dist <-- output directory for transpiled code TS->JS + copied assets css/html
| - index.html <-- initial page that load ambient dependency: SystemJS, Reflect-metadata
-| - system.config.js <-- SystemJS configuration for loading module starting from 'app/startup' entrypoint
-\ - tsconfig.json <-- configure compiler (tsc) to build Typescript code
+| - 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)
+Configure [tsconfig.json](tsconfig.json) to build **Typescipt** app files and output corresponding (commonjs) JS files to `dist` folder,
+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`
+And finally setup some scripts in [package.json](package.json) to automate `build` , `serve` and copy assets (html/css) to `dist`
###BRANCH `plugins`
-This branch use SystemJS [plugins](package.json#L35-L36) to load external resources: [*.html!](app/components/my-app.component.ts#L2) for component and [*.css!](app/startup.ts#L6) style,
-see changes in [systemjs.conf.js](systemjs.conf.js#L15-L16) to handle the configuration neccessary.
+This branch use SystemJS [plugins](package.json#L38-L39) to load external resources: [require(*.html)](app/components/my-app.component.ts#L2) for component and [import *.css!](app/startup.ts#L6) style,
+see [changes][systemjs.conf.js](systemjs.conf.js#L21-L25) in [systemjs.conf.js](systemjs.conf.js#L32-L36) to handle the configuration neccessary.
+**NOTE:** To avoid compile error for require, include global ambient definition in [typings-manual-fix.d.ts](typings-manual-fix.d.ts#L2)
###OTHER SETUP AND SAMPLE
This repo contains other SystemJS config and TS sample, to test different setup checkout branches:
diff --git a/app/components/my-app.component.ts b/app/components/my-app.component.ts
index 7e01ed3..1fa4979 100644
--- a/app/components/my-app.component.ts
+++ b/app/components/my-app.component.ts
@@ -1,14 +1,9 @@
import {Component} from "ng-metadata/core";
-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
-
-// WIP uncomment this section to load tpl or try this code but it's NOT working and give TS compile error: import tpl from "./my-app.html";
-// declare const require: (moduleOrPath: string) => any;
-// const tpl = require("./my-app.html");
+const html = require("./my-app.html"); // require external HTML - relative path is based on .js loaded so need to copy assets in ./dist
@Component({
selector: "my-app",
- template: html // WIP replate with tpl here
+ template: html
})
export class AppCmp {
constructor() {}
diff --git a/app/startup.ts b/app/startup.ts
index 7545487..ffb7acb 100644
--- a/app/startup.ts
+++ b/app/startup.ts
@@ -4,6 +4,7 @@ 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
+// ALTERNATIVE: require("./styles.css"); // require external CSS - relative path is based on .js loaded so need to copy assets in ./dist
// that boostrap the app.module
bootstrap(AppModule);
diff --git a/index.html b/index.html
index 29cf6bf..df3cfea 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,6 @@
-
diff --git a/my-app.html b/my-app.html
new file mode 100644
index 0000000..d0aa55a
--- /dev/null
+++ b/my-app.html
@@ -0,0 +1,6 @@
+APP/DIST
+CSS and HTML loaded by SystemJS plugins
+To learn how to build an Angular 1.x app using component-style,
+writing code in Typescript in an effective way,
+and be ready to migrate to NG2
+
\ No newline at end of file
diff --git a/package.json b/package.json
index e9066cf..0baa8a8 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,17 @@
{
"name": "ng-metadata-quickstart",
- "version": "1.1.0",
+ "version": "1.2.0",
"description": "Sample project quickstart using ngMetadata",
"main": "index.js",
"scripts": {
- "lint": "tslint --config tslint.json app/*.ts app/**/*.ts",
+ "clear:dist": "node_modules/.bin/rimraf dist",
+ "copy:asset": "node_modules/.bin/copyup 'app/**/*.html' 'app/**/*.css' dist",
+ "dist": "npm run clear:dist && npm run copy:asset",
+ "lint": "tslint --config tslint.json app/*.ts app/**/*.ts",
"prebuild": "npm run lint",
"build": "tsc -w -pretty -p .",
"serve": "http-server --cors -c-1 -o index.html",
- "start": "npm run build & npm run serve",
+ "start": "npm run dist && npm run build & npm run serve",
"postinstall": "typings install"
},
"repository": {
@@ -31,13 +34,14 @@
"angular": "^1.5.3",
"ng-metadata": "^1.5.2",
"reflect-metadata": "^0.1.3",
- "systemjs": "^0.19.26"
- ,"system-text": "^0.1.0"
- ,"systemjs-plugin-css": "^0.1.20"
+ "systemjs": "^0.19.26",
+ "system-text": "^0.1.0",
+ "systemjs-plugin-css": "^0.1.20"
},
"devDependencies": {
+ "copyfiles": "^0.2.1",
+ "rimraf": "^2.5.2",
"tslint": "^3.7.4",
- "typescript": "^1.8.10",
- "systemjs-plugin-text": "git+https://github.com/systemjs/plugin-text.git"
+ "typescript": "^1.8.10"
}
}
diff --git a/systemjs.conf.js b/systemjs.conf.js
index f0a3e0c..39ff04b 100644
--- a/systemjs.conf.js
+++ b/systemjs.conf.js
@@ -8,27 +8,33 @@ var SystemConfig = (function() {
var config = {
baseUrl: "./",
paths: {
+ app: "./dist", // path outDir of transpiled TS->JS commonjs
"npm:*": "node_modules/*"
},
map: {
"angular": "npm:angular/angular.min.js"
,"css": "npm:systemjs-plugin-css/css.js" //enable css plugins for import *.css!
,"html": "npm:system-text/text.js" //enable text plugins for import *.html!
- //,"text": "npm:system-text/text.js" // WIP uncomment this line, and comment the "html" line above
},
packages: {
// npm packages are injected here
+ "app": {
+ "format": "cjs",
+ "defaultExtension": "js",
+ "main": "startup" // specify here the entry-point for 'app' bootstrap
+ }
},
meta: {
"angular": {
"format": "global",
"exports": "angular"
}
- /* ,meta: { // WIP uncomment this section to enable serving html with loader text pluging
- "*.html": {
- loader: "text"
- }
- } */
+ , "*.html": { // use html plugins for require(*.html) relative to dist outDir
+ loader: "html"
+ }
+ , "*.css": { // use css plugins for require(*.css) relative to dist outDir
+ loader: "css"
+ }
}
};
@@ -44,6 +50,6 @@ var SystemConfig = (function() {
// Read more info on SystemJS config here: https://github.com/systemjs/systemjs/blob/master/docs/config-api.md
System.config(config);
- // Load 'app/startup' compiled by TS into app_bundle.js (this will boostrap angular and the app.module)
- System.import( "app/startup" ).catch( console.error.bind( console ) );
+ // Load entrypoint 'app' --> 'app/startup' compiled by TS into outDir = dist (this will boostrap angular and the app.module)
+ System.import( "app" ).catch( console.error.bind( console ) );
})();
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 6f273f1..eccd04a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,19 +1,18 @@
{
"compilerOptions": {
"target": "es5",
- "module": "system",
+ "module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
- "outFile": "dist/app-bundle.js", //BUILD AND BUNDLE ALL TS --> JS
- "rootDir": "./" //NEEDED TO HAVE CORRECT MODULE DEF app/* IN BUNDLE
+ "outDir": "./dist" // DIRECTORY WHERE ALL BUILD TS --> JS ARE SAVED
},
"files": [
"app/startup.ts",
"typings/browser.d.ts",
- "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
]
}
\ No newline at end of file
diff --git a/typings-manual-fix.d.ts b/typings-manual-fix.d.ts
new file mode 100644
index 0000000..1867efb
--- /dev/null
+++ b/typings-manual-fix.d.ts
@@ -0,0 +1,2 @@
+// FIX: GLOBAL AMBIENT DECLARE TO VALIDATE COMPILE OF require(...) FOR IMPORTING HTML/CSS IN TYPESCRIPT VIA PLUGINS
+declare const require: (pathToHtmlOrCss: string) => any;
diff --git a/typings/tempfix-plugin-tsc-issue-6615.d.ts b/typings/tempfix-plugin-tsc-issue-6615.d.ts
deleted file mode 100644
index ee6cb8b..0000000
--- a/typings/tempfix-plugin-tsc-issue-6615.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// THIS IS A TEMPORARY FIX TO AVOID TSC COMPILE ERROR TS2307 WHEN IMPORTING TEMPLATE HTML USING SYSTEMJS PLUGINS .html!
-// WAITING FOR TYPESCRIPT ISSUE #6615 TO BE MERGED https://github.com/Microsoft/TypeScript/issues/6615
-
-declare module 'app/components/my-app.html!' { // MUST USE FULLPATH BECOUSE TS DON'T ALLOW DECLARE MODULE NAME RELATIVE './..'
- const template: string;
- export default template;
-}
\ No newline at end of file