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

Question

我有一个 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.

中的完全相同

Answer 1

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

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

显然 ngc 尝试 link 一切，但被未使用的导入弄糊涂了

Answer 2

确保您不会意外地让两个文件声明相同的组件

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

ERROR in : Cannot determine the module for class FeatureBoxGroupComponent in S:/.../src/app/common-widgets/feature-widgets/feature-box-group/feature-box-group.component.ts! Add FeatureBoxGroupComponent to the NgModule to fix it.

在这个例子中，我在两个地方定义了 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

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

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

Answer 3

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

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

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

Answer 4

这是我解决这个问题的方法，假设您使用的是 VScode。

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

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

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

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

Angular AOT compilation error "cannot determine module for class Component''

aot

typescript

angular-cli

angular

angular-aot

确保您不会意外地让两个文件声明相同的组件