Angular AOT 编译错误“无法确定类组件的模块”答案

【问题标题】：Angular AOT compilation error "cannot determine module for class Component''Angular AOT 编译错误“无法确定类组件的模块”
【发布时间】：2019-07-04 01:21:49
【问题描述】：

我有一个 Angular (4.3.2) 应用程序，我想在其上执行 AOT 构建。应用程序是使用@angular/cli 创建的。我有两个以ng generate 为脚手架的组件和一个模块，两者都作为声明包含在其中：

import {PrivateComponent} from './private.component/private.component';

NgModule({
   imports: [
      // other imports
      PrivateRoutingModule
   ],
   declarations: [
      ...some other components, 
      PrivateComponent, 
      AppTopBarComponent
   ]
   // other stuff 
}) 
export class PrivateModule {}

模块的路由也用到了私有组件：

const routes: Routes = [
  {path: '', component: PrivateComponent, children: // other components}
] 

@NgModule({
   imports: [RouterModule.forChild(routes)] // this is the Angular built-in router module
})
export class PrivateRoutingModule {}

注意路由是如何在另一个模块中定义并导入到PrivateModule AppTopBarComponent 在PrivateComponent's 模板中使用。所以两者都被使用和声明。但是当我使用 "node_modules/.bin/ngc" -p tsconfig-aot.json（我在 Windows 10 上）时，我收到以下错误消息： Cannot determine the module for class PrivateComponent in (path-to-project)/src/app/pages/private/private.component/private.component.ts! Add PrivateComponent to the NgModule to fix it. Cannot determine the module for class AppTopBarComponent in (path-to-project)/src/app/pages/private/app.topbar.component.ts! Add AppTopBarComponent to the NgModule to fix it.。我的tsconfig-aot.json 文件与Angular AOT build guide 中的完全相同。

【问题讨论】：

值得一提的是我遇到了几个关于此事的问题，但问题主要是未使用的组件。我的实际使用过。
您忘记在 import import {PrivateComponent} from './private.component/private.component' 中添加 PrivateComponent；
@Vega 我的错，我只是在复制粘贴时错过了它。它实际上存在于源代码中
NgModule 的第一个 @ 也是？:)

标签： angular typescript angular-cli aot angular-aot

【解决方案1】：

确保不会意外有两个文件声明同一个组件

如果我在运行ng g c 时进入了错误的目录，这种情况经常发生在我身上，并且不要立即删除错误生成的文件。

错误：无法确定类的模块 FeatureBoxGroupComponent 在 S:/.../src/app/common-widgets/feature-widgets/feature-box-group/feature-box-group.component.ts！将 FeatureBoxGroupComponent 添加到 NgModule 以修复它。

在这个例子中，我在两个地方定义了FeatureBoxGroupComponent：

src\app\common-widgets\feature-widgets\feature-box-group\feature-box-group.component.ts

src\app\feature-widgets\feature-box-group\feature-box-group.component.ts

当然，错误消息告诉我它有问题的确切文件 - 但很容易看一眼。

只需在文件中查找组件名称即可查看它被引用的所有位置，并确保它只定义一次。

【讨论】：

在我的情况下，我一定是错误地复制并拖动了文件夹
感谢这帮助我解决了这个问题！我正在将新的构建文件手动复制到另一个项目中的node_modules 进行测试，显然只需要先删除所有旧的。
Angular 9 应该改进了这个错误信息 :-)

【解决方案2】：

我实际上已经找到了解决方案。问题是PrivateComponent被导入到另一个文件中，但是没有被使用，就像这样：

import { PrivateComponent } from '../private/private.component'; // not used anywhere

显然ngc 试图链接所有内容并被未使用的导入弄糊涂了

【讨论】：

还要确保导入路径大小写与实际文件路径大小写匹配。

【解决方案3】：

假设您使用的是VScode，以下是我解决此问题的方法。

关闭所有打开的标签。
停止ng serve
通过VScode将指定的组件文件夹移动到其他位置。
如果选项卡在移动后打开，请关闭它们并在关闭时保存更改（由于路径改变）。
当您运行 ng build 和 --aot 时，它现在应该可以编译了

如果您愿意，可以执行相同的过程将文件夹移回原始位置。

另外，在我解决问题后检查了git diff 并意识到问题出在外壳上。我将文件夹名称更改为大写，但路径中没有更新。

【讨论】：

【解决方案4】：

我遇到了这个问题，当我使用 ng build 而不是 ng build --prod 时它消失了。

显然我有两个未使用但未从 app 文件夹中删除的模块。它们也没有在 app.module.ts 文件夹中声明。

根据文档，--prod 标志也会导致编译器执行一些死代码消除。

【讨论】：