无法确定组件角度 5 的模块

Posted 2023-03-07

【中文标题】无法确定组件角度 5 的模块

【英文标题】：cannot determine the module for component angular 5

【发布时间】：2018-04-17 13:33:16

【问题描述】：

当我使用“ng build --prod”构建 Angular 应用程序时出现以下错误。当我使用 Angular 4 构建并使用 Angular 5 出错时，这是有效的。使用 Angular 5，“ng serve”运行良好。

错误中的错误：无法确定 mypath/node_modules/time-ago-pipe/time-ago-pipe.ts 中类 TimeAgoPipe 的模块！将 TimeAgoPipe 添加到 NgModule 以修复它。

https://www.npmjs.com/package/time-ago-pipe 出现错误

有什么解决办法吗？

【问题讨论】：

确保在声明数组中添加declarations: [AppComponent, ...etc..., TimeAgoPipe],

它已经在那里了...否则“ng serve”会出错，并且在 Angular 4 上构建也会出错...仅在 Angular 5 上出错

你能提供最小的例子来重现它吗？

【参考方案1】：

检查大小写敏感性

import  MyComponent  from "./User/my-component";

在我的例子中，问题是文件夹 user 是在我的导入语句中以 U 作为大写创建的。但实际上，在磁盘上，它是小型的。当我在导入语句中将路径名更改为 user （u 小写）时，它对我有用。

import  MyComponent  from "./user/my-component";

因此请检查您的导入路径是否区分大小写。

【讨论】：

我不敢相信。这种区分大小写的问题也发生在 Windows 中！

确保windows中的实际文件夹名是小写的，这样就不会再出现了。

【参考方案2】：

Angular 5，特别是 Angular cli 1.5，默认提前编译打开，如果您有一些未在任何声明中声明的组件，它需要知道它在您的项目文件夹中找到的所有组件/管道等的模块模块会抛出错误。

您可以在某些模块中声明TimeAgoPipe：

@NgModule(
  declarations: [TimeAgoPipe, ...]
)
export class AppModule // for example can be any other used module

或尝试在不提前编译的情况下运行构建结果代码会运行得更慢

ng build --prod --aot=false

第三种方式，如果您根本不使用该管道，您可以将其添加到 tsconfig.json 中的排除文件中

  ...
  "exclude": [ "path/to/unused/component.ts", ... ]

【讨论】：

我的项目中有一些未使用的组件（部分构建，通过复制粘贴）。我以为它们会被自动跳过，但它们正在被处理。更糟糕的是，错误消息未能提及发生错误的文件/组件 - 相反，它指示了它无法找到的组件。原来我的 copy-n-paste 引用了“缺失”组件，因为我已经从粘贴的模块中删除了引用，但没有从 html 模板中删除。

我们在名为 mocks 的文件夹下的共享模块中定义了一些模拟组件类。这些仅用于测试，因此我们决定使用第三个选项，谢谢！

【参考方案3】：

在我的情况下，错误是由于不同文件中同一类的多个定义造成的。这是由于某些开发人员复制粘贴代码造成的。

【参考方案4】：

我遇到了完全相同的问题，可以提供一种解决方法，但不确定为什么 aot 构建没有成功拾取这个特定的管道：

解决方法

从 node_modules/time-ago-pipe 复制 time-ago-pipe.ts 并将此文件复制到您自己的项目中。

像往常一样将其添加到模块中的声明中，并将其导入到您的导入中，例如：

import  TimeAgoPipe  from './_pipes/time-ago-pipe';

这将在 AOT 构建中成功编译，您仍然可以使用管道。

【参考方案5】：

遇到这个问题，想巩固现有的建议，并在没有其他方法对我有用的情况下提出一些通用策略：

就我而言，错误是它无法确定 Pipe 的模块；我正在使用自定义 Pipe 直接注入到 Angular Service。

当我停止使用Pipe 时，问题就消失了；所以我删除了 Pipe 转换 - 我将转换移动到不同的 Service，完全取决于 Pipe 停止。

确保您在NgModule 的declarations（和exports）属性中正确声明（并导出）您的管道/组件 来源：Angular best practice, NgModule basics 如果是第 3 方管道/组件（即在 node_modules 内部），将管道复制到您自己的项目（如果可能）和/或重新导出强> 来自您的NgModule 之一的管道 来源：the accepted answer here 如果您不需要管道/组件，您可以通过将文件添加到tsconfig.json 的exclude 属性来排除该文件（这可能不需要成为每个人的选择） 来源：also accepted answer 或者在没有提前编译的情况下构建ng build --aot=false（可能是更快的构建，但随后会创建一个未优化的应用程序；了解有关 AOT 的更多信息） 来源：Again the accepted answer 如果它是您的管道/组件（与第 3 方相比），请确认您不要双重定义您的管道类，并且不要双重-声明你的管道：即添加到declaratations数组两个或更多不同NgModules 来源：Another answer here 在您 import YourPipe from './yoUr-pippe.ts' 的 Angular 打字稿文件中，确保您的导入语句中没有拼写错误或大小写问题，尤其是文件名 （我的示例'./yoUr-pippe.ts' 存在大小写问题和拼写错误，不应使用ts 文件扩展名（Typescript 中隐含）） 来源：Another answer here,here, and here，包括this github issue 就我而言，上述方法并没有解决我的问题。我做了以下许多步骤，最终问题停止了。我不确定是哪一个成功了：

确保任何ts 文件使用 有问题的管道/组件位于NgModule 其中imports NgModule 中定义了管道/组件！

例如如果AModule，定义AComponent，它使用BPipe，在BModule中定义，那么AModule必须importBModule 就我而言，我重新安排了我的NgModule 依赖关系树。我使用了"shared module" 模式，因此我的 Pipe 可以在多个地方重复使用。

确保没有循环的NgModule 依赖项，例如these examples

如果可以，Upgrade NodeJS 本身和/或angular 及其工具（angular-cli 等）

我遇到了不相关的问题，所以我找到了this list of suggestions...但是这些建议修复了其他问题，让我重新处理Cannot determine the module... 问题（不再发生！）

成为careful about using index.ts files aka "barrel files", and the order of exports

（This suggestion may help 与 index.ts 文件问题）

解决问题的一般方法：删除/注释掉对有问题文件的任何引用，

从每个文件中一次删除一个引用，直到您的 Angular 应用程序构建工作。如果从特定文件中删除可以解决问题，那么您就知道哪个文件是问题的根源 如果您从所有文件中删除引用（这可能太难了；对我来说这不是太多/不是太难）；那么您的 Angular 应用程序应该构建... 确认您的 Angular 应用程序仍然可以构建。就我而言，我的 angular build 有一些不相关的错误，我可以轻松修复（例如， Can't bind to '___' since it isn't a known property of '___'，或Property '___' does not exist on type '___'. Did you mean '____'，或Expected 0 arguments, but got 1.） 修复任何其他问题后，您可以逐步取消注释您的代码，同时确保您的ng build 正常工作。当我取消注释/添加所有代码时...我的 ng build 不再有 Cannot determine the module... 问题

【参考方案6】：

对我来说，即使声明中有组件，它也不起作用。因此，我也从声明和导入中删除了该组件。然后我通过使用 Visual Studio 代码智能感知在声明中自动完成组件名称并使用自动导入在模块文件顶部导入组件来读取它。令我惊讶的是，它奏效了。

如果上述任何解决方案都不适合您，那么这也值得一试。

【参考方案7】：

导入特定组件。 将组件添加到@NgModule。

【参考方案8】：

对我来说，问题是在导入路径中区分大小写。但是您必须找到所有有问题的导入路径。不仅导入模块中使用的内容。

【参考方案9】：

就我而言，出于某种原因，我在mypipe.ts 和app.component.ts 中将一个管道声明为它们自己的类。我删除了 app.component 中的那个，它编译得很好。

在错误消息中，检查它到底在哪里抱怨，看看这是否是您项目中的双重代码。

【参考方案10】：

我也只在 prod build 上遇到了同样的错误，但在 dev build 上没有。我在 app.module.ts 中导入了 component.ts 文件，但没有在 NgModule 中使用。所以我删除了导入，它工作正常。

【参考方案11】：

在我的例子中，有两个组件名称相同。我删除了其中一个，它已修复。

【参考方案12】：

通常当您创建组件但未将其导入任何模块时会发生此错误。

【参考方案13】：

确保您在@NgModule 中导入您的组件。

【参考方案14】：

我在生产版本中也遇到了同样的错误，我的类 ToastComponent。 我最终没有导出类（ToastComponent）并像这样使用它：

class ToastComponent extends Toast 
  options: ToastIndividualConfig;


interface ToastIndividualConfig extends IndividualConfig 
  template: TemplateRef<any>;
  type: string;

@Component(
  selector: 'template-toast-component',
  templateUrl: './template-toast.component.html',
  styleUrls: ['./template-toast.component.scss'],
)
export class TemplateToastComponent extends ToastComponent