Got the html load working.

package.json

@@ -11,39 +11,42 @@
     "e2e": "ng e2e"
   },
   "private": true,
-  "assets": ["assets", "favicon.ico"],
+  "assets": [
+    "assets",
+    "favicon.ico"
+  ],
   "dependencies": {
-    "@angular/animations": "^4.0.0",
+    "@angular/animations": "^4.4.6",
-    "@angular/common": "^4.0.0",
+    "@angular/common": "^4.4.6",
-    "@angular/compiler": "^4.0.0",
+    "@angular/compiler": "^4.4.6",
-    "@angular/core": "^4.0.0",
+    "@angular/core": "^4.4.6",
-    "@angular/forms": "^4.0.0",
+    "@angular/forms": "^4.4.6",
-    "@angular/http": "^4.0.0",
+    "@angular/http": "^4.4.6",
-    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser": "^4.4.6",
-    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.4.6",
-    "@angular/router": "^4.0.0",
+    "@angular/router": "^4.4.6",
     "bootstrap": "^3.3.7",
-    "core-js": "^2.4.1",
+    "core-js": "^2.5.3",
     "font-awesome": "^4.7.0",
     "jquery": "^3.2.1",
-    "rxjs": "^5.1.0",
+    "rxjs": "^5.5.6",
-    "zone.js": "^0.8.4"
+    "zone.js": "^0.8.19"
   },
   "devDependencies": {
     "@angular/cli": "1.1.2",
-    "@angular/compiler-cli": "^4.0.0",
+    "@angular/compiler-cli": "^4.4.6",
-    "@angular/language-service": "^4.0.0",
+    "@angular/language-service": "^4.4.6",
     "@types/jasmine": "2.5.45",
-    "@types/node": "~6.0.60",
+    "@types/node": "^6.0.95",
     "codelyzer": "~3.0.1",
     "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
+    "jasmine-spec-reporter": "^4.2.1",
-    "karma": "~1.7.0",
+    "karma": "^1.7.1",
     "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
-    "karma-jasmine": "~1.1.0",
+    "karma-coverage-istanbul-reporter": "^1.3.3",
+    "karma-jasmine": "^1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
     "protractor": "~5.1.2",
     "ts-node": "~3.0.4",
     "tslint": "~5.3.2",

src/app/app.module.ts

@@ -2,12 +2,12 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
-
 import { AppRoutingModule } from './app-routing.module';
 import { HomeComponent } from './components/home/home.component';
 import { PostsComponent } from './components/posts/posts.component';
 import { PostComponent } from './components/post/post.component';
 import { DataloaderService } from 'app/services/dataloader.service';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -18,7 +18,8 @@ import { DataloaderService } from 'app/services/dataloader.service';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
   providers: [DataloaderService],
   bootstrap: [AppComponent]

src/app/components/post/post.component.html

@@ -1,3 +1,7 @@
 <p>
   post works!
 </p>
+<div>
+  {{post.filename}}
+</div>
+<div #htmlcontainer></div>

src/app/components/post/post.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
+import { Post } from 'app/model/post';
+import { DataloaderService } from 'app/services/dataloader.service';
 
 @Component({
   selector: 'app-post',
@@ -7,9 +9,19 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PostComponent implements OnInit {
 
-  constructor() { }
+  @Input() post:Post;
+  @ViewChild('htmlcontainer') htmlContainer: ElementRef;
+  
+
+  constructor(private dataloaderService:DataloaderService) { }
 
   ngOnInit() {
+    //TODO load the relevant HTML file!
+    console.log('post component has inited: '+this.post.filename); 
+
+    this.dataloaderService.getPost("project", "test").subscribe(content=>{
+      this.htmlContainer.nativeElement.innerHTML = content;
+    });
   }
 
 }

src/app/components/posts/posts.component.html

@@ -1,6 +1,9 @@
 <p>
-  posts works!
+  These are all the posts... put some filter buttons here or something?
 </p>
 
-<div *ngFor='let post of posts | async'> {{post.filename}} </div>
+<!-- <div *ngFor='let post of posts | async'> {{post.filename}} </div> -->
+<div>
+ <app-post *ngFor='let post of posts | async' [post]="post"></app-post> 
+</div>
 

src/app/services/dataloader.service.ts

@@ -3,15 +3,35 @@ import { Post } from '../model/post';
 
 import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
+import 'rxjs/add/operator/map';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 @Injectable()
 export class DataloaderService {
 
-  constructor() { }
+  constructor(private http:HttpClient) { }
 
   getPosts(): Observable<Post[]> {
     console.log('dataloadersdervice.getPosts called');
     return of([new Post('placeholderservice')]);
   }
 
+  /**
+   * Fetch the 'full fat' post. This returns HTML content that can be wrapped in any container, no sanitizing done.
+   * @param filename the filename for which the post needs to be fetched
+   */
+  getPost(type:String, id:String): Observable<String> {
+    //load the relevant file
+    if(type!="project") {
+      return of(null);
+    }
+
+    const httpOptions = {
+      headers: new HttpHeaders({ 'Content-Type': 'text/html', 'Accept':'text/html' })
+    };
+
+    console.log('launching GET');
+    return this.http.get("assets/post/"+type+"/"+id+".html", {responseType: 'text'});
+  }
+
 }