Ionic is loading wrong pages without giving any routes

Ionic Framework
1

So i made a couple pages ‘Settings’, ‘Vragen’, ‘getting-started’, ‘create-account’ so i’ve set my router in

app.component.ts

to my ‘Getting-started’ page and the first thing ionic does is load SettingsPage and than the ‘Getting-started’ page. and whenever i delete that whole page because i though maybe i did something wrong and this time it loaded ‘Vragen’ Page and so. What am i doing wrong?

this is my tabs router:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {TabsPage} from './tabs.page';
import {SettingsPage} from '../settings/settings.page';

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'tab1',
                children: [
                    {
                        path: '',
                        loadChildren: '../tab1/tab1.module#Tab1PageModule'
                    }
                ]
            },
            {
                path: 'tab2',
                children: [
                    {
                        path: '',
                        loadChildren: '../tab2/tab2.module#Tab2PageModule'
                    }
                ]
            },
            {
                path: 'tab3',
                children: [
                    {
                        path: '',
                        loadChildren: '../tab3/tab3.module#Tab3PageModule'
                    }
                ]
            },
            {
                path: 'settings',
                children: [
                    {
                        path: '',
                        loadChildren: '../settings/settings.module#SettingsPageModule'
                    }
                ]
            },
        ]
    },
    {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
    }
];

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

my router links in tab1 page

<ion-header>
    <ion-toolbar>
        <ion-title>
            <span class="alignTitelLeft">Timeline</span>
            <ion-badge class="hoeveelVragen" color="transparent" routerLink="/vragen" routerDirection="forward">1</ion-badge>
            <div class="titleIcons" routerLink="/vragen" routerDirection="forward">
                <i class="fas fa-comment-alt"></i>
            </div>
        </ion-title>
    </ion-toolbar>
</ion-header>

my app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {RouteReuseStrategy} from '@angular/router';

import {IonicModule, IonicRouteStrategy} from '@ionic/angular';
import {SplashScreen} from '@ionic-native/splash-screen/ngx';
import {StatusBar} from '@ionic-native/status-bar/ngx';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { LocationAccuracy } from '@ionic-native/location-accuracy/ngx';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {SettingsPageModule} from './settings/settings.module';
import {VragenPageModule} from './vragen/vragen.module';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
        BrowserModule,
        HttpClientModule,
        IonicModule.forRoot({
            mode: 'md'
        }),
        SettingsPageModule,
        VragenPageModule,
        AppRoutingModule,
    ],
    providers: [
        StatusBar,
        SplashScreen,
        Geolocation,
        LocationAccuracy,
        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
    ],
    bootstrap: [AppComponent]

})
export class AppModule {
}

i’ve removed the app.component.ts routerlink to ‘Getting-started’ page because i want to fix this first