Currently, I am working on an Angular (4.3.2) application and aiming to do an AOT build. The app has been set up using @angular/cli. In this setup, there are two components created with the help of ng generate, along with a module that includes both components as declarations:
import {PrivateComponent} from './private.component/private.component';
NgModule({
imports: [
// other imports
PrivateRoutingModule
],
declarations: [
...some other components,
PrivateComponent,
AppTopBarComponent
]
// other stuff
})
export class PrivateModule {}
In addition, the Private component is utilized in the routing of the module as well:
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 {}
An interesting point to note here is how the routing was defined in a separate module and then imported into the PrivateModule.
The AppTopBarComponent is also integrated within the template of the PrivateComponent. Therefore, both components are being used and declared. However, upon running
"node_modules/.bin/ngc" -p tsconfig-aot.jsonCannot 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.tsconfig-aot.json configured exactly as outlined in the Angular AOT build guide.