Recently upgraded Angular application from version 9 to 12.
Now, my current routes are not working, and encoded to %23.
Here is an example of my routes:
<code>{ path: 'app-terminal-request-list', component: AppTerminalRequestListComponent, pathMatch: 'full', data: { viewDescription: eAppFunction.AppTerminalList } }
</code>
<code>{ path: 'app-terminal-request-list', component: AppTerminalRequestListComponent, pathMatch: 'full', data: { viewDescription: eAppFunction.AppTerminalList } }
</code>
{ path: 'app-terminal-request-list', component: AppTerminalRequestListComponent, pathMatch: 'full', data: { viewDescription: eAppFunction.AppTerminalList } }
Here is how I route to it, using routerLink:
<code><li [hasAccess]="HasAccessAppTerminalListing">
<a routerLink="/app-terminal-request-list" routerLinkActive="active">
<span class="link-text">Terminal Request History</span>
</a>
</li>
</code>
<code><li [hasAccess]="HasAccessAppTerminalListing">
<a routerLink="/app-terminal-request-list" routerLinkActive="active">
<span class="link-text">Terminal Request History</span>
</a>
</li>
</code>
<li [hasAccess]="HasAccessAppTerminalListing">
<a routerLink="/app-terminal-request-list" routerLinkActive="active">
<span class="link-text">Terminal Request History</span>
</a>
</li>
When I click on the <li> in my nav-bar, it tries to navigate to:
<code>http://localhost:4200/%23
</code>
<code>http://localhost:4200/%23
</code>
http://localhost:4200/%23
I am not sure why the routing now behaves differently in Angular 12.
2
Some things you should check:
In your index.html, check if there is something like that inside your tag:
<code><base href="/">
</code>
<code><base href="/">
</code>
<base href="/">
If not, add it.
Then, check your routing file. It should have something like this:
<code>@NgModule({
imports: [
RouterModule.forRoot(routes, { useHash: false })
],
// ...
})
export class AppModule { }
</code>
<code>@NgModule({
imports: [
RouterModule.forRoot(routes, { useHash: false })
],
// ...
})
export class AppModule { }
</code>
@NgModule({
imports: [
RouterModule.forRoot(routes, { useHash: false })
],
// ...
})
export class AppModule { }
If none of that works, try changing your to something like this:
<code><a [routerLink]="['app-terminal-request-list']" routerLinkActive="active">
</code>
<code><a [routerLink]="['app-terminal-request-list']" routerLinkActive="active">
</code>
<a [routerLink]="['app-terminal-request-list']" routerLinkActive="active">
It is very likely that the / in your path is being enconded for some reason.
2