Angular router link returns back to sender

Question

I'm building a simple login page that moves on to a homepage once the user has logged in. I have only worked on the html part of the login component without adding any code in the ts file. My login.component.html file is as follows:

<form class="form-container">
  <h4 style="text-align: center;">LOG IN</h4>
  <hr>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" placeholder="Username">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
  <div>
    <button class="btn btn-link" [routerLink]="['/authentication/forgot-password']">Forgot password?</button>
    <button type="submit" class="btn btn-primary" style="float: right;" [routerLink]="['/home/dashboard']">Log in</button>  
  </div>
  <hr>
  <span class="text" style="text-align: center;"><p>Don't have an account? <a class="link-text" [routerLink]="['/authentication/signup']">Sign up</a></p></span>
</form>

Whenever I click the Login button, I expect the the router to move me to /home/dashboard without performing any actions since I didn't specify any. And yet, the moment I click the button, the router quickly moves to /home/dashboard and quickly enough returns back to the login page. How do I fix this problem?

Edit: I have configured my routes as follows. First in the app-routing.module.ts file -

const routes: Routes = [
  {
    path: 'authentication',
    loadChildren: () => import('./modules/authentication/authentication.module').then(m => m.AuthenticationModule)
  },
  {
    path: 'home',
    loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
  },
  { 
    path: '**', //If path doesn't match anything reroute to /authentication/signin
    redirectTo: '/authentication/signin', 
    pathMatch: 'full' 
  }
];

Then in the respective module files of both Authentication as well as Home modules:

authentication.module.ts:

export const authenticationRoutes = [
  {
    path: 'signin',
    component: SigninComponent
  },
  {
    path: 'signup',
    component: SignupComponent,
  },
  {
    path: 'forgot-password',
    component: ForgotPasswordComponent
  }
];

@NgModule({
  declarations: [
    SigninComponent,
    SignupComponent,
    ForgotPasswordComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(authenticationRoutes)
  ]
})
export class AuthenticationModule { }

home.module.ts

export const homeRoutes = [
  {
    path: 'dashboard',
    component: HomeComponent
  }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(homeRoutes)
  ]
})
export class HomeModule { }

Answer 1

The answer to this was thankfully simple. I only had to change the type of the login button from "submit" to "button".