0
1.1K
ViewsAngular - Type Pipe no tiene la propiedad 'ɵmod'
Estoy intentando crear una tubería personalizada que devolvería la suma de una matriz en una tabla, pero por alguna razón, Angular se queja de que mi tubería no tiene una propiedad 'emod'.
mi pipa:
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); } }Mi módulo:
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 { }Mi componente 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 afirma que The pipe 'fieldSum' could not be found , pero compila todo con éxito y logra abrirse en el navegador. Sin embargo, cuando hago clic en lo que se supone que debe cargar mi componente, la consola muestra un 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)No estoy seguro de si está relacionado de alguna manera, pero mi SomeModule está cargado de forma diferida en 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 {}9 answers
Answer question0
Intente agregar FieldSumPipe en la sección de proveedores, no en la sección de declaraciones
0
Tuve el mismo error extraño al faltar la propiedad "emod", solo con un Servicio. Olvidé que los servicios van a la matriz de Proveedores, y no a las Importaciones, en el Módulo. Supongo que podrían escribir un mejor mensaje de error.
0
Recibí un error similar y lo solucioné simplemente reiniciando el servidor ng serve .
(Disculpe, no estoy respondiendo la pregunta original, pero esto podría ser útil para otros que busquen el error y lleguen aquí).
0
Debe agregarlo solo en las declaraciones.
Me gusta esto:
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 { }0
Resulta que la solución fue poner FieldSumPipe en las declarations y exports de mi módulo en lugar de las 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 { }0
En mi caso, importé el tipo incorrecto . En lugar de
import { MatExpansionModule } from '@angular/material/expansion';yo importé
import { MatExpansionPanel } from '@angular/material/expansion';que me dio este mensaje de error.
0
TL;DR: rm -rf .angular
De repente tuve esto en un proyecto antiguo y en funcionamiento, también para confirmaciones más antiguas. Nada funcionó para mí:
- eliminó node_modules y ejecutó
npm i - ejecutar de nuevo
ng s - reiniciar mi computadora
Tuve algunas pistas extrañas (trabajé en un puerto diferente, trabajé cuando eliminé mi carpeta y volví a clonar el repositorio) que llevaron a mi solución de trabajo: eliminar la carpeta .angular (que contiene la carpeta de caché)
0
Esto funciona para mí.
rimraf node_modules && npm i0
Importe BrowserAnimationsModule, o solo una vez, preferiblemente en su módulo raíz