Блог

Именно так изначально загружается мое приложение.

И вот что происходит, когда я навожу курсор на некоторые пункты меню, они загружаются сразу

Вот как я прокладываю маршрут:

 const routes: Routes = [
   { path: '', pathMatch: 'full', redirectTo: '/login' },
  { path: 'welcome', component:WelcomeComponent, canActivate:[urlGuard] },
  { path: 'login', component:LoginComponent }
];
 

Мое приложение.модуль:

 @NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
imports[//I'll leave this empty cuz there are a lot of imports],
 bootstrap: [AppComponent, LoginComponent]
 

Компонент входа в систему-это тот, который загружается неправильно (в основном форма входа в систему). Спасибо

ИЗМЕНИТЬ: Это мой логин.компонент.ts

 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("/api/token/obtain/", {
          username: this.username,
          password: this.password,
        })
        .then((response) => {
          axiosInstance.defaults.headers["Authorization"] =
            "JWT "   response.data.access;
          localStorage.setItem("access_token", response.data.access);
          localStorage.setItem("refresh_token", response.data.refresh);
          sessionStorage.setItem("isAuth", 'true')
          
        })
        .catch((error) => {
          console.log("login error", error);
        });
    } catch (error) {
      throw error;
    }
  }

}
 

Это мое login.component.html:

 <nz-content>
    <div class="inner-content">
      <form nz-form [formGroup]="validateForm" class="login-form inner-content" (ngSubmit)="submitForm()">
        <nz-form-item>
          <nz-form-control nzErrorTip="Please input your username!">
            <nz-input-group nzPrefixIcon="user">
              <input type="text" nz-input formControlName="userName" [(ngModel)]='username' placeholder="Username" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control nzErrorTip="Please input your Password!">
            <nz-input-group nzPrefixIcon="lock">
              <input type="password" nz-input [(ngModel)]='password' formControlName="password" placeholder="Password" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <div nz-row class="login-form-margin">
          <div nz-col [nzSpan]="12">
            <label nz-checkbox formControlName="remember">
              <span>Remember me</span>
            </label>
          </div>
          <div nz-col [nzSpan]="12">
            <a class="login-form-forgot">Forgot password</a>
          </div>
        </div>
        <button nz-button class="login-form-button login-form-margin" [nzType]="'primary'" type="submit">Log in</button>
        Or <a> register now! </a>
      </form>
  
    </div>
  </nz-content>



    <style>
        .login-form {
          max-width: 300px;
          margin:auto;
       
        }
  
        .login-form-margin {
          margin-bottom: 16px;
         
        }
  
        .login-form-forgot {
          float: right;
        }
  
        .login-form-button {
          width: 100%;
        }
      </style>