title: Angular Routing issue when navigating programatically, Old component stays in DOM and not destroy
body: <p><strong>Duplicate Question:</strong> <a href="https://stackoverflow.com/questions/45566128/angular-router-when-navigating-programatically-old-component-stays-in-the-dom">Yes. Here it is.</a></p>
  
  <p>As above question is already asked before but not found any useful answers due to question not properly demonstrates the problem.</p>
  
  <p><strong>Scenario / Problem:</strong>
  I'm using Angular4 and my project is based on Lazy Loading. I've a login page in which I've a button called "Register" when I clicked on my register button it navigate to register module and run its component. The problem which I was facing is when I click on register button my register module loaded properly but my login module not remove from DOM and exists on same page.</p>
  
  <p>Below is the screen shot before I clicked on register button:
  <a href="https://i.stack.imgur.com/ZOf9B.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZOf9B.jpg" alt="enter image description here"></a></p>
  
  <p>Below is the screen shot after I clicked on register button:
  <a href="https://i.stack.imgur.com/XlxL2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XlxL2.jpg" alt="enter image description here"></a></p>
  
  <p>Below is my folder structure:</p>
  
  <p><a href="https://i.stack.imgur.com/w37Ig.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w37Ig.png" alt="enter image description here"></a></p>
  
  <p>Below is my app-routing.module.ts:</p>
  
  <pre><code>const routes: Routes = [
      {
          path: '', 
          pathMatch: 'full',
          component: AppComponent
      },
      {
          path: 'login', pathMatch: 'full',
          data: { gotoLogin: true },
          canActivate: [ AuthService ],
          loadChildren: './modules/login/login.module#LoginModule'
      },
      {
          path: 'register', pathMatch: 'full',
          data: { gotoRegister: true },
          canActivate: [ AuthService ],
          loadChildren: './modules/register/register.module#RegisterModule'
      }
      {
          path: 'dashboard',
          data: { requiresLogin: true },
          canActivate: [ AuthService ],
          loadChildren: './modules/dashboard/dashboard.module#DashboardModule'
      },
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>Below is my login.component.ts:</p>
  
  <pre><code>constructor(
      private _fb: FormBuilder,
      private _Router: Router, 
      private _User: UserService,
      public toastr: ToastsManager, vcr: ViewContainerRef) { 
        this.toastr.setRootViewContainerRef(vcr);
        this.UserForm =  _fb.group({
            "_Username" : ['', Validators.required],
            "_Password" : ['', Validators.required]
      });
  
      if (this._User.IsUserLoggedIn()) {
          this._Router.navigate(['/dashboard']);
      } 
      else {
          this._Router.navigate(['/login']);
      }
  }
  
  ngOnInit() {
      if (this._User.IsUserLoggedIn()) {
          console.log('User successfully loggedin.')
          this._Router.navigate(['/dashboard']);
      }
  }
  
  navigate() {
      this._Router.navigate(['/register']);
  }
  </code></pre>
  
  <p>Below is my login.component.html:</p>
  
  <pre><code>&lt;button class="btn btn-warning" type="button" (click) = "navigate()"&gt;Register&lt;/button&gt;
  </code></pre>
  
  <p>Below is my login.router.ts</p>
  
  <pre><code>const routes: Routes = [
      {
          path: '', pathMatch: 'full',
          component: LoginComponent
      }
  ];
  
  @NgModule({
      imports: [
      RouterModule.forChild(routes),
      FormsModule,
      ReactiveFormsModule
  ],
      declarations: [LoginComponent],
      exports: [RouterModule]
  })
  export class LoginRouter { }
  </code></pre>
  
  <p>Below is my app.component.html</p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Below is my app.component.ts</p>
  
  <pre><code>export class AppComponent {
  title = 'app works!';
  
  
  constructor(
      private _Router: Router) {
      this._Router.navigate(['/login']);
  }
  
  ngOnInit() {
  }
  
  }
  </code></pre>
  
  <p>I hope I provide brief information regarding my problem. Now what I want is when I click on register button and its navigate to register module then only register module will open and remove all previous modules from DOM.</p>