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.
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.
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
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.
Here is how I solved this problem, assuming you are using VScode
.
- Close all the open tabs.
- Stop
ng serve
- Move indicated component folders to some other location through
VScode
. - If tabs open after moving, close them and save the changes while closing (Due to path change).
- 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.
来源:https://stackoverflow.com/questions/45986389/angular-aot-compilation-error-cannot-determine-module-for-class-component