Angular AOT编译错误"无法确定类组件的模块''

时间:2017-08-31 16:39:08

标签: angular typescript angular-cli aot angular-aot

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

注意路由是如何在另一个模块中定义并导入PrivateModuleAppTopBarComponent模板中使用了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中的文件完全相同。

4 个答案:

答案 0 :(得分:17)

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

如果您有两个组件定义,也会发生类似的问题。如果我在运行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

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

答案 1 :(得分:12)

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

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

显然ngc试图链接所有内容并被未使用的导入混淆

答案 2 :(得分:1)

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

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

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

答案 3 :(得分:0)

假设您使用的是VScode,这就是我解决此问题的方法。

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

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

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