title: Angular page components load only if I hover my mouse over other page component
body: <p><a href="https://i.stack.imgur.com/f7gNB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f7gNB.png" alt="Unloaded page component" /></a>
  This is how my app initially loads.</p>
  <p><a href="https://i.stack.imgur.com/4nr8x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4nr8x.png" alt="Loaded page components" /></a>
  And this is what happens when I hover over some of the menu items, it loads right away</p>
  <p>This is how I'm routing:</p>
  <pre><code>const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: '/login' },
    { path: 'welcome', component:WelcomeComponent, canActivate:[urlGuard] },
    { path: 'login', component:LoginComponent }
  ];
  </code></pre>
  <p>My app.module:</p>
  <pre><code>@NgModule({
    declarations: [
      AppComponent,
      LoginComponent
    ],
  imports[//I'll leave this empty cuz there are a lot of imports],
   bootstrap: [AppComponent, LoginComponent]
  </code></pre>
  <p>Login component is the one that isn't loading right (basically a login form). Thanks</p>
  <p>EDIT:
  This is my login.component.ts</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormControl, Validators } from '@angular/forms'
  import axiosInstance from '../../axiosApi';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
    username?: string;
    password?: string;
    ngOnInit() {} 
    validateForm = new FormGroup({
      userName: new FormControl(''),
      password: new FormControl('')
    })
  
    
    submitForm(){
      try {
        axiosInstance
          .post(&quot;/api/token/obtain/&quot;, {
            username: this.username,
            password: this.password,
          })
          .then((response) =&gt; {
            axiosInstance.defaults.headers[&quot;Authorization&quot;] =
              &quot;JWT &quot; + response.data.access;
            localStorage.setItem(&quot;access_token&quot;, response.data.access);
            localStorage.setItem(&quot;refresh_token&quot;, response.data.refresh);
            sessionStorage.setItem(&quot;isAuth&quot;, 'true')
            
          })
          .catch((error) =&gt; {
            console.log(&quot;login error&quot;, error);
          });
      } catch (error) {
        throw error;
      }
    }
  
  }
  </code></pre>
  <p>This is my login.component.html:</p>
  <pre><code>&lt;nz-content&gt;
      &lt;div class=&quot;inner-content&quot;&gt;
        &lt;form nz-form [formGroup]=&quot;validateForm&quot; class=&quot;login-form inner-content&quot; (ngSubmit)=&quot;submitForm()&quot;&gt;
          &lt;nz-form-item&gt;
            &lt;nz-form-control nzErrorTip=&quot;Please input your username!&quot;&gt;
              &lt;nz-input-group nzPrefixIcon=&quot;user&quot;&gt;
                &lt;input type=&quot;text&quot; nz-input formControlName=&quot;userName&quot; [(ngModel)]='username' placeholder=&quot;Username&quot; /&gt;
              &lt;/nz-input-group&gt;
            &lt;/nz-form-control&gt;
          &lt;/nz-form-item&gt;
          &lt;nz-form-item&gt;
            &lt;nz-form-control nzErrorTip=&quot;Please input your Password!&quot;&gt;
              &lt;nz-input-group nzPrefixIcon=&quot;lock&quot;&gt;
                &lt;input type=&quot;password&quot; nz-input [(ngModel)]='password' formControlName=&quot;password&quot; placeholder=&quot;Password&quot; /&gt;
              &lt;/nz-input-group&gt;
            &lt;/nz-form-control&gt;
          &lt;/nz-form-item&gt;
          &lt;div nz-row class=&quot;login-form-margin&quot;&gt;
            &lt;div nz-col [nzSpan]=&quot;12&quot;&gt;
              &lt;label nz-checkbox formControlName=&quot;remember&quot;&gt;
                &lt;span&gt;Remember me&lt;/span&gt;
              &lt;/label&gt;
            &lt;/div&gt;
            &lt;div nz-col [nzSpan]=&quot;12&quot;&gt;
              &lt;a class=&quot;login-form-forgot&quot;&gt;Forgot password&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;button nz-button class=&quot;login-form-button login-form-margin&quot; [nzType]=&quot;'primary'&quot; type=&quot;submit&quot;&gt;Log in&lt;/button&gt;
          Or &lt;a&gt; register now! &lt;/a&gt;
        &lt;/form&gt;
    
      &lt;/div&gt;
    &lt;/nz-content&gt;
  
  
  
      &lt;style&gt;
          .login-form {
            max-width: 300px;
            margin:auto;
         
          }
    
          .login-form-margin {
            margin-bottom: 16px;
           
          }
    
          .login-form-forgot {
            float: right;
          }
    
          .login-form-button {
            width: 100%;
          }
        &lt;/style&gt;
  
  </code></pre>