Angular AOT compilation error "cannot determine mo

Question

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 generate and a module in which both are included as a declaration:

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 PrivateModule The AppTopBarComponent is used inside the PrivateComponent's template. 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.json file is exactly the same as is in the Angular AOT build guide.

Answer 1

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

A similar problem can also occur if you have two definitions for the component. This happens to me if I'm in the wrong directory when I run ng g c, or I just put the wrong path in and don't immediately delete the wrong file.

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.

I had FeatureBoxGroupComponent defined in two places:

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.

Answer 2

I had this issue and it disappeared when I used ng build instead of 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.

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

Answer 3

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

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

Apparently ngc tries to link everything and is confused by an unused import