After working with Angular for some time, I recently upgraded to v18 and decided to create a simple app with standalone components. I set up routing to redirect all unidentified paths to landing. From there, I have a call-to-action button that should navigate to calculations using router.navigate(url), but it's not working. I've been struggling with this issue for days now, trying various solutions without success. When I directly access the URL, it works fine, but through the navigation function, it doesn't. What could be causing this problem? :/
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(),
],
};