this.route is undefined while trying to router.navigate with route declared in the contructor...

i'm using router navigate and setTimeout to just get from a simple congratulation page to another component. I did the same stuff in all the other components and it has always worked, i can't seem to understand why in this case it doesn't work. Here's the component's ts:

import { Component, OnInit } from '@angular/core';
import { Route, Router } from '@angular/router';

@Component({
selector: 'app-file-successfull',
templateUrl: './file-successfull.component.html',
styleUrls: ['./file-successfull.component.css']
})
export class FileSuccessfullComponent implements OnInit {

constructor(private route: Router) { }
public toUpload(){
this.route.navigate(['fileUpload']);
}

ngOnInit(): void {
setTimeout(this.toUpload, 5000);
}
}


here's the error i get:

ERROR TypeError: this.route is undefined
toUpload file-successfull.component.ts:13
Angular 17
ngOnInit file-successfull.component.ts:17
Angular 19
RxJS 6
Angular 20
RxJS 22


Here's my app-routing-module:

import { Component, NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomepageComponent } from './components/homepage/homepage.component';
import { LoginComponent } from './components/login/login.component';
import { SubscribedComponent } from './components/subscribed/subscribed.component';
import { GoogleLandingPageComponent } from './components/google-landing-page/google-landing-page.component';
import { GoogleErrorComponent } from './components/google-error/google-error.component';
import { FileUploadComponent } from './components/file-upload/file-upload.component';
import { FileUploadErrorComponent } from './components/file-upload-error/file-upload-error.component';
import { UserHomepageComponent } from './components/user-homepage/user-homepage.component';
import { FileSuccessfullComponent } from './components/file-successfull/file-successfull.component';

const routes: Routes = [{
path: 'home', component: HomepageComponent
},{
path: 'login', component: LoginComponent
},{
path: 'subscribed', component: SubscribedComponent
},{
path: 'google', component: GoogleLandingPageComponent
},{
path: 'googleerror', component: GoogleErrorComponent
},{
path: 'fileUpload', component: FileUploadComponent
},{
path: 'fileUploadError', component: FileUploadErrorComponent
},{
path: 'userHomepage', component: UserHomepageComponent
},{
path: 'fileSuccessfull', component: FileSuccessfullComponent
},{
path: '**', redirectTo: 'home'
}];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }


I know it's probably a stupid begginer error, but can someone help me please?

Continue reading...