Angular 4 Cannot match any routes, escaping with %2F

434 views Asked by At

I have an issue with routing in my angular 4 project. When I try to navigate to a path like: ticketBlocks/new I see this error:

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'ticketBlocks%2Fnew'

Angular escapes the '/' and of course doesn't match, is it possible to use this path without that escape?

This is my app.routing

export const AppRoutes: Routes = [
.
.
.
 {
   path: 'ticketBlocks/new',
   loadChildren: './ticket-blocks/ticket-block-new/ticket-block-
   new.module#TicketBlockNewModule'
  },
.
.

my sidebar

export const ROUTES: RouteInfo[] = [{
.
.
.
{
    path: '/',
    title: 'Magazzino',
    type: 'sub',
    icontype: 'assignment_turned_in',
    children: [
        { path: 'ticketBlocks/new', title: 'Nuovi blocchi', ab: 'NB' },
        { path: 'ticketBlocks/movements', title: 'Spostamenti', ab: 'SP' }
    ]
},

sidebar.ts

export class SidebarComponent implements OnInit, AfterViewInit {
    public menuItems: any[];

    ngOnInit() {
        let isWindows = navigator.platform.indexOf( 'Win' ) > -1 ? true : false;
        if ( isWindows ) {
            // if we are on windows OS we activate the perfectScrollbar function
            const $sidebar = $( '.sidebar-wrapper' );
            $sidebar.perfectScrollbar();
        }
        this.menuItems = ROUTES.filter( menuItem => menuItem );
        isWindows = navigator.platform.indexOf( 'Win' ) > -1 ? true : false;

        if ( isWindows ) {
            // if we are on windows OS we activate the perfectScrollbar function
            $( '.sidebar .sidebar-wrapper, .main-panel' ).perfectScrollbar();
            $( 'html' ).addClass( 'perfect-scrollbar-on' );
        } else {
            $( 'html' ).addClass( 'perfect-scrollbar-off' );
        }
    }

And this is the sidebar.html

<li routerLinkActive="active" *ngFor="let menuitem of menuItems">
<!--If is a single link-->
<a [routerLink]="[menuitem.path]" *ngIf="menuitem.type === 'link'">
<i class="material-icons">{{menuitem.icontype}}</i>
<p>{{menuitem.title}}</p>
</a>
</li>
0

There are 0 answers