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 {}
Try adding FieldSumPipe in providers section, not in declarations section
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.
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.)
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 { }
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 { }
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.
TL;DR: rm -rf .angular
I had this suddenly on an old and working project, also for older commits. Nothing worked for me:
npm ing sI had some odd clues (worked on different port, worked when I removed my folder and reclones the repo) that led my working solution: remove .angular folder (containing cache folder)
This works for me.
rimraf node_modules && npm i
Import BrowserAnimationsModule,or only once, preferably in your root module