问题
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.
回答1:
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.
回答2:
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
回答3:
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.
回答4:
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