typescript - Angular Standalone Component Routing Error: Not routing properly - Stack Overflow

admin管理员组

文章数量:1332865

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/landingponent').then((mod) => mod.LandingComponent),
        title: environment.appTitle,
    },
    {
        path: 'calculation',
        loadComponent: () => import('./pages/calculation/calculationponent').then((mod) => mod.CalculationComponent),
        title: environment.appTitle,
    },
    /*{
        path: '',
        redirectTo: '/landing',
        pathMatch: 'full',
    },*/
    {
        path: '**',
        loadComponent: () => import('./pages/error/errorponent').then((mod) => mod.ErrorComponent),
        title: environment.appTitle,
    },
];

Appponent.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: './appponent.html',
    styleUrl: './appponent.scss',
})
export class AppComponent {
    public appTitle: string = 'v18App';
}

Landingponent.ts

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

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

Calculationponent.ts

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

@Component({
    selector: 'CalculationComponent',
    standalone: true,
    imports: [],
    templateUrl: './calculationponent.html',
    styleUrl: './calculationponent.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(),
    ],
};

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/landingponent').then((mod) => mod.LandingComponent),
        title: environment.appTitle,
    },
    {
        path: 'calculation',
        loadComponent: () => import('./pages/calculation/calculationponent').then((mod) => mod.CalculationComponent),
        title: environment.appTitle,
    },
    /*{
        path: '',
        redirectTo: '/landing',
        pathMatch: 'full',
    },*/
    {
        path: '**',
        loadComponent: () => import('./pages/error/errorponent').then((mod) => mod.ErrorComponent),
        title: environment.appTitle,
    },
];

Appponent.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: './appponent.html',
    styleUrl: './appponent.scss',
})
export class AppComponent {
    public appTitle: string = 'v18App';
}

Landingponent.ts

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

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

Calculationponent.ts

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

@Component({
    selector: 'CalculationComponent',
    standalone: true,
    imports: [],
    templateUrl: './calculationponent.html',
    styleUrl: './calculationponent.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(),
    ],
};

• angular
• typescript
• angular-router

Share Follow asked Nov 22, 2024 at 7:19 CreativeZollerCreativeZoller 30622 silver badges1515 bronze badges 4

• where is navigateToNextPhase called, what is the url navigation, if possible a working stackblitz example – Naren Murali Commented Nov 22, 2024 at 7:22
• Inside Landing component I use a standalone component, Cardponent.ts, inside it I call the method. – CreativeZoller Commented Nov 22, 2024 at 7:25
• what is the url used, please share the string value, could you please share the respective HTML also, mainly, router-outlet part alone – Naren Murali Commented Nov 22, 2024 at 7:31
• @NarenMurali the string value is calculation. The representetive part is below: ``` <form class="form"> <span>{{data.cardContent.contentMain}}</span> <button class="button button--primary button--cta" title="Start" (click)="navigateToNextPhase()">Start</button> </form>``` – CreativeZoller Commented Nov 22, 2024 at 10:36

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Since you are navigating to the root path (/) you should go for absolute routing, which always checks from the root element, so calculation will be discoverable.

navigateToNextPhase() {
    this.router.navigate(['/calculation']); // -> absolute routing
}

The issue might be when set calculation, it is checking for calculation route relative to the landing component.

本文标签： typescriptAngular Standalone Component Routing Error Not routing properlyStack Overflow