Removed jquery from the project, no more memory leak.

.angular-cli.json

@@ -24,7 +24,6 @@
         "../node_modules/font-awesome/css/font-awesome.min.css"
       ],
       "scripts": [
-        "../node_modules/jquery/dist/jquery.min.js",
         "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
       ],
       "environmentSource": "environments/environment.ts",

package-lock.json

@@ -6226,11 +6226,6 @@
       "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
       "dev": true
     },
-    "jquery": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
-      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
-    },
     "js-base64": {
       "version": "2.1.9",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.9.tgz",
@@ -7424,6 +7419,11 @@
       "dev": true,
       "optional": true
     },
+    "ngx-bootstrap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-2.0.2.tgz",
+      "integrity": "sha512-4ZTltcStUED2JzI9Hd1+FDaMQmukzbeBSS02hdTvuUJ+9hNtGLMSPGdPNRIniIyItzv3v3emJrAAtKkvOMxyCA=="
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
@@ -14924,9 +14924,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "2.6.2",
+      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz",
-      "integrity": "sha1-PFtv1/beCRQmkCfwPAlGdY92c6Q=",
+      "integrity": "sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw==",
       "dev": true
     },
     "uglify-js": {

package.json

@@ -28,7 +28,7 @@
     "bootstrap": "^4.0.0",
     "core-js": "^2.5.3",
     "font-awesome": "^4.7.0",
-    "jquery": "^3.3.1",
+    "ngx-bootstrap": "^2.0.2",
     "npm": "^5.7.1",
     "popper.js": "^1.13.0",
     "rxjs": "^5.5.6",
@@ -53,6 +53,6 @@
     "protractor": "~5.3.0",
     "ts-node": "~5.0.1",
     "tslint": "~5.9.1",
-    "typescript": "^2.6.2"
+    "typescript": "^2.7.2"
   }
 }

src/app/app.component.html

@@ -14,9 +14,9 @@
         <!-- <button type="button" class="btn btn-secondary">Left</button> -->
         <!-- <button type="button" class="btn btn-secondary">Middle</button> -->
         <!-- <button type="button" class="btn btn-secondary">Right</button> -->
-        <a routerLink="/home"><i data-toggle="tooltip" title="Home" class="text-secondary fa fa-home fa-fw fa-2x" aria-hidden="true"></i></a>
+        <a routerLink="/home"><i title="Home" class="text-secondary fa fa-home fa-fw fa-2x" tooltip="Huis" aria-hidden="true"></i></a>
-        <a routerLink="/posts"><i data-toggle="tooltip" title="Posts" class="text-secondary fa fa-sticky-note fa-fw  fa-2x" aria-hidden="true"></i></a>
+        <a routerLink="/posts"><i title="Posts" class="text-secondary fa fa-sticky-note fa-fw  fa-2x" aria-hidden="true"></i></a>
-        <a routerLink="/cv"><i data-toggle="tooltip" title="Curriculum Vitae" class="text-secondary fa fa-id-badge fa-fw fa-2x" aria-hidden="true"></i></a>
+        <a routerLink="/cv"><i title="Curriculum Vitae" class="text-secondary fa fa-id-badge fa-fw fa-2x" aria-hidden="true"></i></a>
       </div>
     </div>
   <!--row-->
@@ -29,4 +29,4 @@
     </div>
   </div>
 
-</div>
+</div>

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, AfterViewChecked } from '@angular/core';
+import { Component, OnInit, AfterViewChecked } from "@angular/core";
 declare var $: any;
 
 @Component({
@@ -6,17 +6,9 @@ declare var $: any;
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnInit, AfterViewChecked {
+export class AppComponent implements OnInit {
-
   title = 'Joachim Homepage';
 
-  ngAfterViewChecked(): void {
-    $(function () {
-      $('[data-toggle="tooltip"]').tooltip()
-    })
-  }
-
   ngOnInit() {
   }
-
 }

src/app/app.module.ts

@@ -11,6 +11,8 @@ import { HttpClientModule } from '@angular/common/http';
 import { CvComponent } from './components/cv/cv.component';
 import { PosttypepipePipe } from './pipes/posttypepipe.pipe';
 
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -23,7 +25,8 @@ import { PosttypepipePipe } from './pipes/posttypepipe.pipe';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    HttpClientModule
+    HttpClientModule,
+    TooltipModule.forRoot()
   ],
   providers: [DataloaderService],
   bootstrap: [AppComponent]

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

@@ -21,11 +21,11 @@ export class PostComponent implements OnInit {
 
     console.log('PostComponent is loading: '+this.post.id);
 
-    /*this.dataloaderService.getPost(this.post.id).subscribe(content => {
+    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

@@ -1,9 +1,3 @@
-<!-- <div class="alert alert-secondary" role="alert">
-  All the previously made posts are shown below.
-</div>
- -->
-
 <div>
-  PLACEHOLDER
+  <app-post *ngFor='let post of posts' [post]="post"></app-post>
-  <!--<app-post *ngFor='let post of posts' [post]="post"></app-post>-->
 </div>

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

@@ -30,13 +30,11 @@ export class PostsComponent implements OnInit, OnDestroy {
     let posts2 = this.dataloaderService.getPosts();
     //subscribing means big fat memory leak
     //TODO fix this!!!
-    posts2.subscribe(r=>console.log(r));
+    posts2.subscribe(p => {
-
-      /*.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');
   }