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>