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.

Lovegrass

It is worth mentioning I encountered several questions on the matter, but the problem was mostly for the unused components. Mine are actually used. – Lovegrass

You forgot to add PrivateComponent in import import {PrivateComponent} from './private.component/private.component'; – Conjuncture

@Conjuncture my bad, I just missed it whilst copy-pasting. It is actually present in the source code – Lovegrass

The first @ for NgModule too ?:) – Conjuncture

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

Lovegrass

Also make sure the import path case matches the actual file path case. – Krissie

Answer 2

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.

Voltmer

In my case I must have copied and dragged the folder in error – Cricoid

Thanks this helped me figure it out! I was copying new build files manually to my node_modules in another project for testing and apparently just needed to delete all of old ones first. – Houston

Angular 9 is supposed to have improved this error message :-) – Voltmer

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.

Agave

Answer 4

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.

Hogshead