Dealing with memory leak problem :\

package.json

@@ -16,43 +16,43 @@
     "favicon.ico"
   ],
   "dependencies": {
-    "@angular/animations": "^4.4.6",
-    "@angular/common": "^4.4.6",
-    "@angular/compiler": "^4.4.6",
-    "@angular/core": "^4.4.6",
-    "@angular/forms": "^4.4.6",
-    "@angular/http": "^4.4.6",
-    "@angular/platform-browser": "^4.4.6",
-    "@angular/platform-browser-dynamic": "^4.4.6",
-    "@angular/router": "^4.4.6",
-    "bootstrap": "^4.0.0-beta.2",
+    "@angular/animations": "^5.2.7",
+    "@angular/common": "^5.2.7",
+    "@angular/compiler": "^5.2.7",
+    "@angular/core": "^5.2.7",
+    "@angular/forms": "^5.2.7",
+    "@angular/http": "^5.2.7",
+    "@angular/platform-browser": "^5.2.7",
+    "@angular/platform-browser-dynamic": "^5.2.7",
+    "@angular/router": "^5.2.7",
+    "bootstrap": "^4.0.0",
     "core-js": "^2.5.3",
     "font-awesome": "^4.7.0",
-    "jquery": "^3.2.1",
+    "jquery": "^3.3.1",
     "npm": "^5.7.1",
-    "popper.js": "^1.12.9",
+    "popper.js": "^1.13.0",
     "rxjs": "^5.5.6",
-    "zone.js": "^0.8.19"
+    "zone.js": "^0.8.20"
   },
   "devDependencies": {
-    "@angular/cli": "1.1.2",
-    "@angular/compiler-cli": "^4.4.6",
-    "@angular/language-service": "^4.4.6",
-    "@types/jasmine": "2.5.45",
-    "@types/node": "^6.0.95",
-    "codelyzer": "~3.0.1",
-    "jasmine-core": "~2.6.2",
+    "@angular/cli": "1.7.2",
+    "@angular/compiler-cli": "^5.2.7",
+    "@angular/language-service": "^5.2.7",
+    "@types/jasmine": "2.8.6",
+    "@types/node": "^9.4.6",
+    "codelyzer": "~4.2.1",
+    "jasmine-core": "~3.1.0",
     "jasmine-spec-reporter": "^4.2.1",
-    "karma": "^1.7.1",
-    "karma-chrome-launcher": "~2.1.1",
+    "karma": "^2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
     "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.3.3",
+    "karma-coverage-istanbul-reporter": "^1.4.1",
     "karma-jasmine": "^1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
     "node-sass": "^4.7.2",
-    "protractor": "~5.1.2",
-    "ts-node": "~3.0.4",
-    "tslint": "~5.3.2",
-    "typescript": "~2.3.3"
+    "protractor": "~5.3.0",
+    "ts-node": "~5.0.1",
+    "tslint": "~5.9.1",
+    "typescript": "^2.6.2"
   }
 }

src/app/components/cv/cv.component.ts

@@ -15,6 +15,13 @@ export class CvComponent implements OnInit {
 
   getEducationItems(): CVTimeLineItem[] {
     return [
+      new CVTimeLineItem()
+        .setLanguage("nl")
+        .setEmployer('Universiteit Gent')
+        .setDescription('Doctoraat Titel Hier')
+        .setFromYear(2010)
+        .setToYear(2017)
+        .setIconName("assets/images/ugent-icon.png"),
       new CVTimeLineItem()
         .setLanguage("nl")
         .setEmployer('Universiteit Gent')

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild, ElementRef } 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';
 
@@ -19,8 +19,14 @@ export class PostComponent implements OnInit {
     // console.log('post component has inited: '+this.post.id);
     // console.log(this.post);
 
-    this.dataloaderService.getPost(this.post.id).subscribe(content => {
+    console.log('PostComponent is loading: '+this.post.id);
+
+    /*this.dataloaderService.getPost(this.post.id).subscribe(content => {
+      console.log('PostComponent got content for '+this.post.id);
+      //this is not the cause of the memory leak:\
       this.htmlContainer.nativeElement.innerHTML = content;
-    });
+    });*/
+
+    console.log('PostComponent.ngOnInit is done.');
   }
 }

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

@@ -4,5 +4,6 @@
  -->
 
 <div>
-  <app-post *ngFor='let post of posts | async' [post]="post"></app-post>
+  PLACEHOLDER
+  <!--<app-post *ngFor='let post of posts' [post]="post"></app-post>-->
 </div>

src/app/components/posts/posts.component.ts

@@ -1,7 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import { DataloaderService } from 'app/services/dataloader.service';
 import { Post } from '../../model/post';
-import { Observable } from 'rxjs/Observable';
 
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/merge';
@@ -14,35 +13,34 @@ import 'rxjs/add/operator/distinct';
   templateUrl: './posts.component.html',
   styleUrls: ['./posts.component.css']
 })
-export class PostsComponent implements OnInit {
+export class PostsComponent implements OnInit, OnDestroy {
 
-  postTypes: Observable<String[]>;
-  posts:Observable<Post[]>;
+  ngOnDestroy(): void {
+    console.log('PostsComponent.ngOnDestroy called');
+
+  }
+
+  posts:Post[];
 
   constructor(private dataloaderService:DataloaderService) { }
 
   ngOnInit() {
+    console.log('PostsComponent ngOnInit()');
     //fetch the posts
-    this.posts = this.dataloaderService.getPosts();
-    this.postTypes = this.getPostTypes();
-    this.postTypes.subscribe(test=>{
-      console.log('result of subscribe: '+test);
-    });
-  }
+    let posts2 = this.dataloaderService.getPosts();
+    //subscribing means big fat memory leak
+    //TODO fix this!!!
+    posts2.subscribe(r=>console.log(r));
 
-  getPostTypes():Observable<String[]> {
-    return this.posts.map(posts=>{
-      let result = new Set<String>();
-      for(let post of posts) {
-        result.add(post.type);
-      }
-      console.log('got these post types!');
-      console.log(result);
-      return Array.from(result);
-    });
+      /*.subscribe(p => {
+      this.posts = p;
+      console.log('dataloaderService.getPosts() call got back! '+p);
+      console.log('posts size: '+p.length);
+    });*/
+    console.log('PostsComponent ngOnInit() is done');
   }
 
   filterOnType(type:String): void {
-    
+
   }
 }

src/app/services/dataloader.service.ts

@@ -12,10 +12,12 @@ export class DataloaderService {
   constructor(private http: HttpClient) { }
 
   getPosts(): Observable<Post[]> {
+    console.log('DataLoader.getPosts() called');
     return this.http.get('assets/posts.json').map(posts => {
       const res: Post[] = [];
       // fill it up
       for (const index in posts) {
+          console.log('DataLoader.getPosts() index '+index);
           const post: any = posts[index];
           // console.log('got this key: '+post);
           // console.log(post);
@@ -28,6 +30,7 @@ export class DataloaderService {
           res.push(temp);
       }
       // console.log('these are the posts...');
+      console.log('DataLoader.getPosts() result: '+res);
       // console.log(res);
       return res;
     });