components folder with html and css

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+app/**/*.js

.vscode/settings.json

@@ -0,0 +1,7 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+	"files.exclude": {
+		"**/*.js": {"when": "$(basename).ts"},
+		"**/*.js.map": {"when": "$(basename).ts"}
+	}
+}

app.js

@@ -11,6 +11,7 @@ var app = express();
 
 // expose node_modules to client app
 app.use(express.static("./node_modules/"));
+app.use(express.static("./app/"));
 
 // uncomment after placing your favicon in /public
 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));

app/components/app.component.css

@@ -0,0 +1,5 @@
+h1 {
+	color: white;
+	background: darkred;
+	padding: 20px;
+}

app/components/app.component.html

@@ -0,0 +1 @@
+<h1>My First {{name}} app</h1>

app/components/app.component.ts

@@ -0,0 +1,9 @@
+import {Component} from 'angular2/core';
+@Component({
+    selector: 'my-app',
+    templateUrl: 'components/app.component.html',
+    styleUrls: ['components/app.component.css']
+})
+export class AppComponent {
+    name: string = "Angular 2";
+}

app/main.ts

@@ -1,4 +1,4 @@
 import {bootstrap}    from 'angular2/platform/browser'
-import {AppComponent} from './app.component'
+import {AppComponent} from './components/app.component'
 
 bootstrap(AppComponent);

public/index.html

@@ -24,7 +24,7 @@
           }
         }
       });
-      System.import('javascripts/app/main')
+      System.import('main')
             .then(null, console.error.bind(console));
     </script>
 

tsconfig.json

@@ -3,9 +3,11 @@
     "target": "es5",
     "module": "system",
     "rootDir": "app",
-    "outDir": "public/javascripts/app",
+    "outDir": "app",
     "moduleResolution": "node",
-    "sourceMap": true,
+    "sourceMap": false,
+    "inlineSources": true,
+    "inlineSourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "removeComments": false,