Repeated pathway encountered upon refreshing

I'm currently dealing with a problem related to duplicated paths. To illustrate the issue for testing purposes, I created a TestingComponent.

Here is the code snippet:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'testing',
    pathMatch: 'full'
  },
  {
    path: 'testing',
    component: TestingComponent
  }

];

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


@NgModule({
  declarations: [
    AppComponent,
    TestingComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,

  ],
  providers: [DatePipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the app component html:


<router-outlet></router-outlet

The issue seems to be isolated to this particular project. When I create a new project, everything functions correctly. However, in this instance:

Upon entering localhost:4200, it redirects me to localhost:4200/testing (which is expected). But when I refresh the page, it then redirects me from localhost:4200/testing to localhost:4200/testing/testing (this behavior is unexpected and incorrect).

I have attempted reordering the routes but that did not resolve the issue.

Answer №1

If you want to navigate relatively, make sure to include a leading / in the URL for an absolute navigation.

Specify a URL to redirect to when the path matches certain criteria.

The redirection is considered absolute if the URL begins with a slash (/), otherwise it is relative to the current path URL. Keep in mind that no additional redirects are processed after encountering an absolute redirect.

If this property is not included, the router will not perform any redirection.

  {
    path: '',
    redirectTo: '/testing',
    pathMatch: 'full'
  },

Answer №2

Success achieved by including 'pathMatch: 'full'',

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  {
    path: 'home',
    component: HomeComponent,
  },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

https://stackblitz.com/edit/angular-ivy-jnaiij?file=src%2Fapp%2Fapp.routing.ts

Answer №3

The issue has been resolved successfully. A user included the baseHref in the angular.json file under architect build options. Appreciate the assistance provided!

Answer №4

I encountered a similar issue in the past. When working with Windows IIS, I found that modifying the following entry in the initial index.html file or project resolved the issue:

<base href="">

Initially, having the "/" slash after the base href caused duplication of URL routes during development serving as the root character was missing.

If you are experiencing the same problem, ensure that your index.html file includes the following:

<head>
    . . .
    <base href="/">
    . . .

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring Jasmine and Karma for testing Angular 5 HTTP requests and responses

I am brand new to the concept of Test-Driven Development (TDD) and I am currently in the process of debugging a complex Angular 5 application for the company I work for. The application is functioning without any issues, but now I need to incorporate test ...

Tips for updating a reactive form with multiple layers of nested JSON values

I am tasked with retrieving and working with the data from a deeply nested (potentially infinite levels) reactive form that includes formArrays, formGroups, and formControls. This data is stored in a database. Currently, my approach involves patching the ...

Component in Angular with an empty variable in TypeScript

I'm encountering an issue on my web page where I have a loop calling a component multiple times. I successfully pass data to the component, but the problem arises when I try to display the value of an object in the component. In the component's H ...

Ways to modify this request in order to update the current status

How can I optimize these calls to avoid repeating the same sentence for refreshing the state? I'm not looking for a major overhaul, just some suggestions like putting this call inside a function and invoking it when needed... export const CategoriesPa ...

Encountered an issue in Angular 2 when the property 'then' was not found on type 'Subscription'

I have been attempting to call a service from my login.ts file but I am encountering various errors. Here is the code snippet in question: login.ts import { Component } from '@angular/core'; import { Auth, User } from '@ionic/cloud-angular ...

What is the best way to set an array as the value for a state variable?

Looking at my function, I have the following situation: execute(e) { let { items } = this.context; let array: number[] = []; for (var i = 0; i < 2; i++) array = [...array, i]; this.setState( { items: array, } ) ...

What is the best method for distributing an Angular service from a library created using ng generate library?

I'm currently facing a challenge in sharing a service from the npm package that I created using ng g library with my Angular hosting application. While I have experience in linking components and directives, I'm a bit lost when it comes to servic ...

Cannot access an object's property within templates if imported from a separate class

I recently started working with Angular and encountered a problem where Angular16 is unable to display the properties of an object when defined in an external class. Take a look at the example below. In the code snippet below, I have created a class to st ...

What is the best way to declare a collection of objects in TypeScript?

Need assistance with TypeScript - Can anyone help? I'm having trouble deciphering the error message in relation to the code snippet below. My goal is to create an array of objects, but it doesn't seem to be working as expected. interface FieldC ...

How can I add a new property to an object type within an Interface in TypeScript?

I'm currently exploring how to merge declare an interface, with the twist of adding a property to the object literal type instead of directly to the interface itself. Within a library, I have a type that looks like this: interface DefaultSession { ...

I'm curious if someone can provide an explanation for `<->` in TypeScript

Just getting started with TypeScript. Can someone explain the meaning of this symbol <->? And, is ProductList actually a function in the code below? export const ProductList: React.FC<-> = ({ displayLoader, hasNextPage, notFound, on ...

Changing the size of a div component using Angular 6

Currently, I am working on implementing Angular's element resize feature. I am utilizing this library: https://github.com/mattlewis92/angular-resizable-element Here is my custom module: import { ResizableModule } from 'angular-resizable-elemen ...

Can a class be passed to the binding attribute in Angular framework?

We currently have a system in place that is dependent on a numeric value being set to either 1 or 2 in order to display specific icons. This method is functional. <span *ngIf="config.icon" [class.fas]="true" [class.fa-plus]="icon===1" ...

Does anyone know how to retrieve the application version or import the package.json file? Can't seem to find the solution on

I need to display the version from the package.json file in my Angular application. To import it, I allowed importing json by adding a few extra lines in tsconfig.json: { "compilerOptions": { "module": "commonjs", ...

Encountered an issue with ionViewDidLoad: The property 'firstChild' cannot be read as it is null

While working on an Ionic 2 App with Angular2 and Typescript, I encountered an issue when trying to pass a JSON to map for markers. Here is the link to the gist containing the code snippet I am facing an error that reads: view-controller.js:231 MapPage i ...

Ensure that TypeScript compiled files are set to read-only mode

There is a suggestion on GitHub to implement a feature in tsc that would mark compiled files as readonly. However, it has been deemed not feasible and will not be pursued. As someone who tends to accidentally modify compiled files instead of the source fil ...

Currently, there is a requirement to include past build outcomes in the HTML test report within the playwright

Is there a way to display the previous build status of each test case for every test case? I have been attempting to use test.info() in playwright, but it seems inaccessible from onTestEnd. One option could be to retrieve the previous build data from Jenki ...

Explore an asynchronous PipeTransform experiment

Situation I have created a simple PipeTransform with an asynchronous twist. Why? Well, I have developed my own i18n service to handle parsing, pluralization, and other complexities, which returns a Promise<string>: @Pipe({ name: "i18n", pur ...

analyzing properties through unit testing

Currently in the process of writing unit tests for computed properties. I have a file called fileOne.ts : export const fileOne = () => { const fx1 = computed ( () => { ... } ); const fx2 = computed ( () => { ... } ); const fx3 = comp ...

What are the techniques for narrowing down this specific type in TypeScript?

Is there a way to modify the following code snippet to eliminate the need for as casting in order to pass the type check successfully? type SupportedHandlerType = string | number | Date type Handler<T> = (data: T[]) => void function example<T ...