Angular - Type Pipe does not have 'ɵmod' property

user_5338928 0
Viewed 83465

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.

My pipe:

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) => a + b[attr], 0);
  }
}

My module:

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 { }

My component HTML:

      <table class="table table-striped table-hover table-responsive-lg" [mfData]="tableData" #mf="mfDataTable" [mfRowsOnPage]="10">
        <thead>
          <tr>
            <th>...</th>
            <th>...</th>
            <th>...</th>
            <th>Profit</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of mf.data">
            <td>{{ item.Id }}</td>
            <td>{{ item.Name }}</td>
            <td>{{ item.Something }}</td>
            <td>{{ item.Profit }}</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>{{ mf.data | fieldSum:'Profit' }}</td>
          </tr>
        </tfoot>
      </table>

VS Code is claiming that The pipe 'fieldSum' could not be found, 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.

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)

I am not sure if it's related in any way, but my SomeModule is lazy loaded in the AppRoutingModule.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    data: {
      title: 'Whatever',
    },
    children: [
      {
        path: 'some',
        loadChildren: () =>
        import('./some/some.module').then((m) => m.SomeModule),
      }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}
angular pipe
10 Answers

As it turns out, the solution was to to put the FieldSumPipe in the declarations and exports of my module rather than the imports.

import { SomeComponent} from './some.component';
import { SomeRoutingModule} from './some-routing.module';
import { FieldSumPipe } from '../../../shared/pipes/fieldsum.pipe';
// Other imports...

@NgModule({
    imports: [
        CommonModule,
        SomeRoutingModule, // other imports removed for brevity
    ],
    declarations: [
        FieldSumPipe,
        SomeComponent,
    ],
    exports: [
        FieldSumPipe
    ]
})
export class SomeModule { }
user_53389280

TL;DR: rm -rf .angular

I had this suddenly on an old and working project, also for older commits. Nothing worked for me:

  • removed node_modules and ran npm i
  • run again ng s
  • restart my computer

I had some odd clues (worked on different port, worked when I removed my folder and recloned the repo) that led my working solution: remove .angular folder (containing cache folder)

user_72246070

You must add it only in the declarations.

Like this:

import { SomeComponent} from './some.component';
import { SomeRoutingModule} from './some-routing.module';
import { FieldSumPipe } from '../../../shared/pipes/fieldsum.pipe';
// Other imports...

@NgModule({
    imports: [
        CommonModule,
        SomeRoutingModule
    ],
    declarations: [
        SomeComponent,
        FieldSumPipe
    ]
})
export class SomeModule { }
user_144234780

I got a similar error and fixed it merely by restarting the ng serve server.

(Pardon I'm not answering the original question but this might be useful for others who search for the error and arrive here.)

user_3456480

I had the same weird error with missing "emod" property - just with a Service. I forgot that services go into Providers array, and not Imports, in the Module. I guess they could write a better error message.

services belongs in providers array

user_68702090

This works for me.

rimraf node_modules && npm i
user_103705490

Try adding FieldSumPipe in providers section, not in declarations section

user_51251580

Import BrowserAnimationsModule,or only once, preferably in your root module

user_75969960

In my case, I imported the wrong type. Instead of

import { MatExpansionModule } from '@angular/material/expansion';

I imported

import { MatExpansionPanel } from '@angular/material/expansion';

which gave me this error message.

user_18826990

in my case I have done the following

  • removed node_modules
  • remove bower_components
  • ran npm i --force
  • run again ng s
user_19299510
Related