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

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

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

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

Here is how I solved this problem, assuming you are using 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 build with --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 diff and realized that the problem was the casing. I changed the folder names to upper case but that did not get updated in the path.

Answer 4

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.

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.

In this example 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.

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