0

I have faced compiling error on router link *ngFor method

HTML

<mat-sidenav #snav [mode]="'push'">
   <mat-nav-list>
      <a *ngFor="let mnu of menus" mat-list-item [routerLink]="['/mnu']">{{mnu}}<\a>
   <\mat-nav-list>
<\mat-sidenav>

Main.JS

Menu:  string[] = ['Login', 'Data Table', 'Google Map', 'Input Form', 'Web View', 'Image Viewers', 'Video Viewers', 'Video Viewers',
   'PDF Viewers', 'Chat Vox' ];

Error
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'mnu'
Error: Cannot match any routes. URL Segment: 'mnu'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)`enter code here`
    at CatchSubscriber.selector (router.js:2450)
mbojko
  • 13,503
  • 1
  • 16
  • 26
CPE
  • 1
  • 2
  • 1
    The error is quite clear. All your links try to link to the same route '/mnu' which doesn't exist. You probably want `[routerLink]="['/' + mnu]"` – JB Nizet Apr 20 '19 at 17:12
  • Note: your code would be much clearer if you used real words, respected the naming conventions, and used the plural form for arrays: names your array `menus`, and name your ngFor variable `menu`. Finally, having spaces and uppercase letters in paths is not a good idea. – JB Nizet Apr 20 '19 at 17:14
  • HI JB - Thanks for your quick reply. login.component.html { path: 'login', component: LoginComponent }, ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'Login' Error: Cannot match any routes. URL Segment: 'Login' – CPE Apr 20 '19 at 17:28
  • If "cannot match any routes", then show us your routes definition. – mbojko Apr 20 '19 at 18:07
  • 1
    'Login' and 'login' are different strings. One starts with an uppercase `L`, the other starts with a lowercase `l`. – JB Nizet Apr 20 '19 at 18:12
  • HI JB, How to create a custom pipe to visible for 'Data Table' and 'data-table.component.html' – CPE Apr 22 '19 at 03:27

0 Answers0