title: Angular - Type Pipe does not have 'ɵmod' property
body: <p>I am attempting to create a custom pipe that would return a sum of an array in a table, but for whatever reason, Angular is complaining about my pipe not having an 'emod' property.</p>
  <p>My pipe:</p>
  <pre class="lang-js prettyprint-override"><code>import { Injectable, Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
    name: 'fieldSum',
    pure: false
  })
  @Injectable()
  export class FieldSumPipe implements PipeTransform {
    transform(items: any[], attr: string): number {
      return items.reduce((a, b) =&gt; a + b[attr], 0);
    }
  }
  </code></pre>
  <p>My module:</p>
  <pre class="lang-js prettyprint-override"><code>import { SomeComponent} from './some.component';
  import { SomeRoutingModule} from './some-routing.module';
  import { FieldSumPipe } from '../../../shared/pipes/fieldsum.pipe';
  // Other imports...
  
  @NgModule({
      imports: [
          CommonModule,
          SomeRoutingModule,
          FieldSumPipe, // other imports removed for brevity
      ],
      declarations: [
          SomeComponent,
      ],
      exports: [
          FieldSumPipe
      ]
  })
  export class SomeModule { }
  </code></pre>
  <p>My component HTML:</p>
  <pre class="lang-js prettyprint-override"><code>      &lt;table class=&quot;table table-striped table-hover table-responsive-lg&quot; [mfData]=&quot;tableData&quot; #mf=&quot;mfDataTable&quot; [mfRowsOnPage]=&quot;10&quot;&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;...&lt;/th&gt;
              &lt;th&gt;...&lt;/th&gt;
              &lt;th&gt;...&lt;/th&gt;
              &lt;th&gt;Profit&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr *ngFor=&quot;let item of mf.data&quot;&gt;
              &lt;td&gt;{{ item.Id }}&lt;/td&gt;
              &lt;td&gt;{{ item.Name }}&lt;/td&gt;
              &lt;td&gt;{{ item.Something }}&lt;/td&gt;
              &lt;td&gt;{{ item.Profit }}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;tfoot&gt;
            &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;{{ mf.data | fieldSum:'Profit' }}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tfoot&gt;
        &lt;/table&gt;
  </code></pre>
  <p>VS Code is claiming that <code>The pipe 'fieldSum' could not be found</code>, but it does compile everything successfully and it manages to open in browser. However, when I click on whatever is supposed to load my component, the console displays an error.</p>
  <pre class="lang-js prettyprint-override"><code>core.js:4442 ERROR Error: Uncaught (in promise): Error: Type FieldSumPipe does not have 'ɵmod' property.
  Error: Type FieldSumPipe does not have 'ɵmod' property.
      at getNgModuleDef (core.js:1855)
      at recurse (core.js:24235)
      at recurse (core.js:24246)
      at registerNgModuleType (core.js:24231)
      at new NgModuleFactory$1 (core.js:24345)
      at Compiler_compileModuleSync__POST_R3__ (core.js:27135)
      at Compiler_compileModuleAsync__POST_R3__ [as compileModuleAsync] (core.js:27140)
      at MergeMapSubscriber.project (router.js:3506)
      at MergeMapSubscriber._tryNext (mergeMap.js:44)
      at MergeMapSubscriber._next (mergeMap.js:34)
      at resolvePromise (zone-evergreen.js:798)
      at resolvePromise (zone-evergreen.js:750)
      at zone-evergreen.js:860
      at ZoneDelegate.invokeTask (zone-evergreen.js:399)
      at Object.onInvokeTask (core.js:27533)
      at ZoneDelegate.invokeTask (zone-evergreen.js:398)
      at Zone.runTask (zone-evergreen.js:167)
      at drainMicroTaskQueue (zone-evergreen.js:569)
  </code></pre>
  <p>I am not sure if it's related in any way, but my SomeModule is lazy loaded in the AppRoutingModule.</p>
  <pre class="lang-js prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  const routes: Routes = [
    {
      path: '',
      data: {
        title: 'Whatever',
      },
      children: [
        {
          path: 'some',
          loadChildren: () =&gt;
          import('./some/some.module').then((m) =&gt; m.SomeModule),
        }
      ]
    },
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
  })
  export class AppRoutingModule {}
  </code></pre>