title: embedded Twitter widget on Angular 2+ app only shows up on the first page load
body: <p>My app works perfectly if I copy exactly the built-in function from Twitter docs (<a href="https://dev.twitter.com/web/javascript/loading" rel="nofollow noreferrer">https://dev.twitter.com/web/javascript/loading</a>) into ngAfterViewInit function, but when I switch the route, the widget disappears also. </p>
  
  <p>Here is the code to work only for the first page load:</p>
  
  <pre><code>import { Component, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
  import { Router, NavigationEnd, ActivatedRoute, ParamMap, Params } from '@angular/router';
  import { Observable, Subscription } from 'rxjs/Rx';
  
  export class ProjectDetailComponent implements OnInit, OnDestroy, AfterViewInit {
  
  constructor(
      private route: ActivatedRoute,
      private router: Router
    ) { }
  
  ngOnInit(){}
  
  ngAfterViewInit(){
    (&lt;any&gt;window).twttr = (function(d, s, id) {
        let js, fjs = d.getElementsByTagName(s)[0],
          t = (&lt;any&gt;window).twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = 'https://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js, fjs);
  
        t._e = [];
        t.ready = function(f) {
          t._e.push(f);
        };
  
        return t;
      }(document, 'script', 'twitter-wjs'));
  }
  
  }
  </code></pre>
  
  <p>Then I found an accepted solution from this (<a href="https://stackoverflow.com/questions/42993859/twitter-widget-on-angular-2">Twitter widget on Angular 2</a>), but the widget is not even shown from the first load and no errors so I don't even know where I was wrong.</p>
  
  <p>Here is the code that never shows up Twitter widget without any error:</p>
  
  <pre><code>import { Component, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
  import { Router, NavigationEnd, ActivatedRoute, ParamMap, Params } from '@angular/router';
  import { Observable, Subscription } from 'rxjs/Rx';
  
  export class ProjectDetailComponent implements OnInit, OnDestroy, AfterViewInit {
  
  private subscription: Subscription;
  constructor(
      private route: ActivatedRoute,
      private router: Router
    ) { }
  
  ngOnInit(){}
  
  ngAfterViewInit(){
    this.subscription = this.router.events.subscribe(val =&gt; {
    if (val instanceof NavigationEnd) {
      (&lt;any&gt;window).twttr = (function (d, s, id) {
        let js: any, fjs = d.getElementsByTagName(s)[0],
            t = (&lt;any&gt;window).twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = 'https://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js, fjs);
  
        t._e = [];
        t.ready = function (f: any) {
            t._e.push(f);
        };
  
        return t;
      }(document, 'script', 'twitter-wjs'));
  
      if ((&lt;any&gt;window).twttr.ready())
        (&lt;any&gt;window).twttr.widgets.load();
    }
  });
  }
  
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }    
  }
  </code></pre>
  
  <p>Basically, I subscribe the widget data until <code>NavigationEnd</code> then unsubscribe it in <code>ngOnDestroy</code>, so I can still remain the data between route switch. I believe the logic is correct as the solution worked for someone also, but to me it never worked until this moment.  </p>