[SOLVED] Angular 6 The pipe 'index' could not be found

Angular 6 The pipe 'index' could not be found

Currently when using Angular 6 I am getting the following error when I try to use the index pipe for NgFor:

Uncaught Error: Template parse errors:
The pipe 'index' could not be found ("
<ul class="list-unstyled"> <li *ngFor="l[ERROR ->]et s of grouplesson.start | index as i">
<span cl"): ng:///ModalModule/GrouplessonsComponent.html@80:61

code snippet:

<li *ngFor="let s of grouplesson.start | index as i">
    <span class="time__start">{{s | date:'HH:mm'}}</span>
    <span> - </span>
    <span class="time__end">{{grouplesson.end[i] | date:'HH:mm'}}</span>
</li>

I find this weird as the loop does work when not using the pipe, and I also properly import the commonmodule in the ModalModule as far as I can tell:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModalComponent } from './modal.component';

import { ModalService } from './services/modal.service';
import { GrouplessonsComponent } from './components/grouplessons/grouplessons.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [ModalComponent, GrouplessonsComponent],
  providers: [ModalService],
  exports: [ModalComponent, GrouplessonsComponent]
})
export class ModalModule { }

What am I missing here?

interesting note: the date pipes do work.

Solution

There is no index pipe. You need to use the assignment syntax and separate the loop and assignment statements with a semi-colon:

<li *ngFor="let s of grouplesson.start; let i = index">