How to resolve interpolation error in Angular 7 Project

Question

I have developed Angular 7 application in one of my laptop and it working fine. But when I try to develop it using another laptop it generate the following error in browser console

Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("h: 15vw;">

              <a *ngFor="let item of menulist" mat-list-item routerLink="{{ item[3] }}" [ERROR ->][queryParams]="[{rechargeId: '{{ item[0] }}'}]"><mat-icon >dashboard</mat-icon>{{ item[2] }}</a>
    "): ng:///AppModule/AppComponent.html@49:88
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("
          <mat-nav-list style="    min-width: 15vw;">

              [ERROR ->]<a *ngFor="let item of menulist" mat-list-item routerLink="{{ item[3] }}" [queryParams]="[{rechargeId"): ng:///AppModule/AppComponent.html@49:14, Directive RouterLinkWithHref
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("
          <mat-nav-list style="    min-width: 15vw;">

              [ERROR ->]<a *ngFor="let item of menulist" mat-list-item routerLink="{{ item[3] }}" [queryParams]="[{rechargeId"): ng:///AppModule/AppComponent.html@49:14, Directive RouterLinkWithHref
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("
          <mat-nav-list style="    min-width: 15vw;">

              [ERROR ->]<a *ngFor="let item of menulist" mat-list-item routerLink="{{ item[3] }}" [queryParams]="[{rechargeId"): ng:///AppModule/AppComponent.html@49:14, Directive RouterLinkWithHref
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("
          <mat-nav-list style="    min-width: 15vw;">

              [ERROR ->]<a *ngFor="let item of menulist" mat-list-item routerLink="{{ item[3] }}" [queryParams]="[{rechargeId"): ng:///AppModule/AppComponent.html@49:14, Directive MatListItem
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("
          <mat-nav-list style="    min-width: 15vw;">

              [ERROR ->]<a *ngFor="let item of menulist" mat-list-item routerLink="{{ item[3] }}" [queryParams]="[{rechargeId"): ng:///AppModule/AppComponent.html@49:14, Directive MatListItem
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 (" menulist" mat-list-item routerLink="{{ item[3] }}" [queryParams]="[{rechargeId: '{{ item[0] }}'}]">[ERROR ->]<mat-icon >dashboard</mat-icon>{{ item[2] }}</a>
              
          </mat-nav-list>
"): ng:///AppModule/AppComponent.html@49:136, Directive MatIcon
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 (" menulist" mat-list-item routerLink="{{ item[3] }}" [queryParams]="[{rechargeId: '{{ item[0] }}'}]">[ERROR ->]<mat-icon >dashboard</mat-icon>{{ item[2] }}</a>
              
          </mat-nav-list>
"): ng:///AppModule/AppComponent.html@49:136, Directive MatIcon
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("Link="{{ item[3] }}" [queryParams]="[{rechargeId: '{{ item[0] }}'}]"><mat-icon >dashboard</mat-icon>[ERROR ->]{{ item[2] }}</a>
              
          </mat-nav-list>
"): ng:///AppModule/AppComponent.html@49:167
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("
    </mat-sidenav>

    [ERROR ->]<mat-sidenav-content style="height:90vh">
      <router-outlet></router-outlet>
    </mat-sidenav-con"): ng:///AppModule/AppComponent.html@54:4, Directive MatSidenavContent
Parser Error: Got interpolation ({{}}) where expression was expected at column 15 in [[{rechargeId: '{{ item[0] }}'}]] in ng:///AppModule/AppComponent.html@49:88 ("
    </mat-sidenav>

    [ERROR ->]<mat-sidenav-content style="height:90vh">
      <router-outlet></router-outlet>
    </mat-sidenav-con"): ng:///AppModule/AppComponent.html@54:4, Directive MatSidenavContent

I have first remove the node modules and re-install in my second machine using npm install command.

after I run ng serve and there are no errors or warnings.

Answer 1

you do not need a interpolation for directives.It just needs expressions.Here routerLink is a directive and hence when you gave {{}} (interpolations) it is erroring out.Remove these interpolations and just give an expression.