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

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

提问by Armen Vardanyan

I have an Angular (4.3.2) application on which I want to perform an AOT build. App was created using @angular/cli. I have two components scaffolded with ng generateand a module in which both are included as a declaration:

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

Private component is also used in the module's routing:

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

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

Notice how the routing was defined in another module and imported into PrivateModuleThe AppTopBarComponentis used inside the PrivateComponent'stemplate. So both are used and declared. But when I use "node_modules/.bin/ngc" -p tsconfig-aot.json(I am on Windows 10), I get this error message: 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.. My tsconfig-aot.jsonfile is exactly the same as is in the Angular AOT build guide.

通知路由是如何在另一个模块定义和导入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 构建指南中的文件完全相同。

采纳答案by Armen Vardanyan

I have actually found a solution. The problem was that PrivateComponentwas imported in another file, but not used, just like this:

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

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

Apparently ngctries to link everything and is confused by an unused import

显然ngc试图链接所有内容，但对未使用的导入感到困惑

回答by Simon_Weaver

Make sure you don't accidentally have two files declaring the same component

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

This often happens to me if I'm in the wrong directory when I run ng g c, and don't immediately delete the wrong generated file.

如果我在运行时位于错误的目录中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.

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

In this example I had FeatureBoxGroupComponentdefined in two places:

在这个例子中，我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

Of course the error message is telling me the exact file it has a problem with - but it's easy to glance over that.

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

Just do a find in files for the component name to see everywhere it's referenced and make sure it's only defined once.

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

回答by kl27driver

I had this issue and it disappeared when I used ng buildinstead of ng build --prod.

我遇到了这个问题，当我使用ng build而不是ng build --prod.

Apparently I had two modules that I was not using but had not deleted from the app folder. They were not declared in the app.module.ts folder either.

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

As per the documentation the --prodflag causes the compiler to carry out some dead code elimination as well.

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

回答by nPcomp

Here is how I solved this problem, assuming you are using VScode.

假设您使用的是VScode.

1. Close all the open tabs.
2. Stop ng serve
3. Move indicated component folders to some other location through VScode.
4. If tabs open after moving, close them and save the changes while closing (Due to path change).
5. It should now compile when you run ng buildwith --aot

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

If you like, you can do the same process to move folders back to original locations.

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

Also, after I fixed the problem checked the git diffand realized that the problem was the casing. I changed the folder names to upper case but that did not get updated in the path.

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