Angular

Question

我正在尝试创建一个自定义管道，该管道将 return table 中的数组总和，但出于某种原因，Angular 抱怨我的管道没有一个 'emod' 属性.

我的烟斗：

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);
  }
}

我的模块：

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

我的组件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 声称 The pipe 'fieldSum' could not be found，但它确实成功编译了所有内容并设法在浏览器中打开。但是，当我单击应该加载我的组件的任何内容时，控制台显示错误。

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 (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)

我不确定它是否有任何关联，但我的 SomeModule 是在 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 {}

Answer 1

事实证明，解决方案是将 FieldSumPipe 放在我模块的 declarations 和 exports 而不是 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 { }

Answer 2

您只能在声明中添加它。

像这样：

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

Answer 3

尝试在提供者部分而不是声明部分添加 FieldSumPipe

Answer 4

我遇到了类似的错误，只是通过重新启动 ng serve 服务器来修复它。

（抱歉，我没有回答原来的问题，但这可能对其他搜索错误并到达此处的人有用。）

Answer 5

我遇到了同样的奇怪错误，缺少“emod”属性 - 只是有一个服务。我忘记了服务进入模块中的 Providers 数组，而不是 Imports。我想他们可以编写更好的错误消息。

Answer 6

导入 BrowserAnimationsModule，或仅导入一次，最好在您的根模块中

Answer 7

这对我有用。

rimraf node_modules && npm i

Answer 8

TL;DR: rm -rf .angular

我突然在一个旧的工作项目中遇到了这个问题，也适用于较旧的提交。对我没有任何作用：

删除了 node_modules 和运行 npm i
运行再一次 ng s
重启电脑

我有一些奇怪的线索（在不同的端口上工作，在我删除文件夹并重新克隆存储库时工作）导致我的工作解决方案：删除 .angular 文件夹（包含缓存文件夹）

Answer 9

就我而言，我导入了错误的类型。而不是

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

我导入了

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

这给了我这个错误信息。

Angular - Type Pipe 没有 'ɵmod' 属性

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

pipe