CODEWITHSUNDEEP
angularangular8ng-modules
Happy Coder
Happy Coder

Reputation: 4692

Cannot determine the module for class Component in component.ts file, add component to the NgModule to fix it

I have a project which uses angular libraries. So for the development of the library, I am using the build command with the watch option, so when I make a change to the library code, it will be automatically compiled and built. Then on another tab in the terminal, I am running ng serve --aot to run the application. When the build is finished and I run ng serve for the first time, everything works fine and I am able to access the application on the browser. But when I save a file in the library, the build job will be executed and the ng serve will run again as usual. But this time, I will get a bunch of errors, which complaints that it Cannot determine the module for the class and this is for all the components that I used in the library.

One of the errors is like the following.

Cannot determine the module for class LeaveApplicationViewComponent in /Users/me/Desktop/Work/ng-lib-leave-mgmt/projects/ng-lib-leave-mgmt/src/lib/modules/leave-application/leave-application-view/leave-application-view.component.ts! Add LeaveApplicationViewComponent to the NgModule to fix it.

I have a LeaveApplicationModule in the library and all these components are included in the NgModule section. The code is as follows:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { LeaveApplicationRoutingModule } from './leave-application-routing.module';

import { LeaveApplicationCreateCommonComponent } from './leave-application-create-common/leave-application-create-common.component';
import { LeaveApplicationListComponent } from './leave-application-list/leave-application-list.component';
import { LeaveApplicationViewComponent } from './leave-application-view/leave-application-view.component';
import { LeaveMgmtSharedModule } from '../leave-mgmt-shared/leave-mgmt-shared.module';
import { LeaveApplicationListApproverComponent } from './leave-application-list-approver/leave-application-list-approver.component';
import { LeaveApproverListComponent } from './leave-approver-list/leave-approver-list.component';
import { LeaveWorkflowCreateComponent } from './leave-workflow-create/leave-workflow-create.component';


@NgModule({
  declarations: [
    LeaveApplicationCreateComponent,
    LeaveApplicationCreateCommonComponent,
    LeaveApplicationListComponent,
    LeaveApplicationViewComponent,
    LeaveApplicationListApproverComponent,
    LeaveApproverListComponent,
    LeaveWorkflowCreateComponent
  ],
  imports: [ 
    CommonModule,
    LeaveApplicationRoutingModule,
    LeaveMgmtSharedModule,
    FileUploadModule,
    AutoCompleteModule
  ],
  exports:[
    LeaveApplicationCreateComponent,
    LeaveApplicationCreateCommonComponent,
    LeaveApplicationListComponent,
    LeaveApplicationViewComponent,
    LeaveApplicationListApproverComponent,
    LeaveApproverListComponent,
    LeaveWorkflowCreateComponent
  ],
})
export class LeaveApplicationModule { }

I have a few other modules there but the error is with this module only and with the aot option. I am not sure what is wrong here. I checked the casing of the file names and it seems fine. Anyway, everything works until I make any change and save it. So now I need to stop and re-run ng serve --aot every time I make a change to the code and it is very time-consuming activity. It will be really helpful if someone can tell me what is wrong here and how can I fix it.

Upvotes: 3

Views: 3119

Answers (1)

Anirudh RK
Anirudh RK

Reputation: 41

What version of Angular are you using?

Recent versions of angular have aot turned on by default, and so during compilation needs a list of all modules. You might have to add the TimeAgoPipe to your declarations, and import the pipe.

import { TimeAgoPipe } from './_pipes/time-ago-pipe';

@NgModule({
  declarations: [TimeAgoPipe, ...]
})

Use this link for some additional answers if needed : cannot determine the module for component angular 5

Upvotes: 0

Related Questions