Angular Standalone Component Routing Error: Not routing properly

So I have been working Angular for a time, but I recently started using v18 only, and wanted to make a simple app with standalone components... I am routing all unidentified path to landing, and from there I have a CTA which would navigate to calculations using router.navigate(url), but it does not... I am facing this issue for days already, tried removing, re-adding parts but still nothing. If I reach the url directly, it works, otherwise it does not... what am I doing wrong? :/

navigateToNextPhase() {
this.router.navigate([this.data.continueUrl.url]); -> URL is a string
}


App.routes.ts

import { Routes } from '@angular/router';
import { environment } from '../environments/environment.prod';

export const appRoutes: Routes = [
{
path: 'landing',
loadComponent: () => import('./pages/landing/landing.component').then((mod) => mod.LandingComponent),
title: environment.appTitle,
},
{
path: 'calculation',
loadComponent: () => import('./pages/calculation/calculation.component').then((mod) => mod.CalculationComponent),
title: environment.appTitle,
},
/*{
path: '',
redirectTo: '/landing',
pathMatch: 'full',
},*/
{
path: '**',
loadComponent: () => import('./pages/error/error.component').then((mod) => mod.ErrorComponent),
title: environment.appTitle,
},
];


App.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule, RouterOutlet } from '@angular/router';

@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, RouterModule],
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
})
export class AppComponent {
public appTitle: string = 'v18App';
}


Landing.component.ts

import { Component } from '@angular/core';
import { CardComponent } from '../../components/card/card.component';
import { cardcontent } from '../../models/cardContents';

@Component({
selector: 'LandingComponent',
standalone: true,
imports: [CardComponent],
templateUrl: './landing.component.html',
styleUrl: './landing.component.scss',
})
export class LandingComponent {}


Calculation.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'CalculationComponent',
standalone: true,
imports: [],
templateUrl: './calculation.component.html',
styleUrl: './calculation.component.scss',
})
export class CalculationComponent {}


App.config.ts

import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { provideClientHydration, provideProtractorTestingSupport } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
providers: [
provideProtractorTestingSupport(),
provideExperimentalZonelessChangeDetection(),
provideRouter(appRoutes),
provideClientHydration(),
],
};

Continue reading...