API is being called twice when using feature module Angular 8 - angular8

Question

As per Angular documentation, I have done the following steps.
Added CommonModule in the Feature Module(not BrowserModule).
Used ProvidedIn: 'root'
Here is what I have done so far.
AppModule
import { BrowserModule, Title } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { FormsModule } from '#angular/forms';
import { ReactiveFormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { HTTP_INTERCEPTORS } from '#angular/common/http';
import { MatFormFieldModule } from '#angular/material/form-field';
import { MatStepperModule } from '#angular/material/stepper';
import { MatInputModule } from '#angular/material/input';
import { MatCheckboxModule } from '#angular/material/checkbox';
import { MatDatepickerModule } from '#angular/material/datepicker';
import { MatRadioModule } from '#angular/material/radio';
import { MatSelectModule } from '#angular/material/select';
import { MatSlideToggleModule } from '#angular/material/slide-toggle';
import { MatMenuModule } from '#angular/material/menu';
import { MatSidenavModule } from '#angular/material/sidenav';
import { MatToolbarModule } from '#angular/material/toolbar';
import { MatCardModule } from '#angular/material/card';
import { MatButtonModule } from '#angular/material/button';
import { MatIconModule } from '#angular/material/icon';
import { MatProgressBarModule } from '#angular/material/progress-bar';
import { MatDialogModule } from '#angular/material/dialog';
import { MatSnackBarModule } from '#angular/material/snack-bar';
import { MatPaginatorModule } from '#angular/material/paginator';
import { MatSortModule } from '#angular/material/sort';
import { MatTableModule } from '#angular/material/table';
import { MatListModule } from '#angular/material/list';
import {
MatNativeDateModule,
MatAutocompleteModule
} from '#angular/material';
import { MatProgressSpinnerModule } from '#angular/material/progress-spinner';
import { MatGridListModule } from '#angular/material/grid-list';
import { MatChipsModule } from '#angular/material/chips';
import { MatExpansionModule } from '#angular/material/expansion';
import { MatTabsModule } from '#angular/material/tabs';
// import { AppraisalModule } from './feature-modules/yearly-appraisal/appraisal.module';
import { AuthService } from './auth.service';
import { SensitiveService } from './services/sensitive.service';
import { ErrorService } from './classes/error';
import { UserService } from './services/user.service';
import { ExcelService } from './services/excel.service';
import { AuthGuard } from './auth.guard';
import { ProjectService } from './services/project.service';
import { InterviewService } from './services/interview.service';
import { KickoffService } from './services/kickoff.service'
import { AppComponent } from './app.component';
import { LoginComponent } from './dashboard/auth/login/login.component';
import { ForgotPasswordComponent } from './dashboard/auth/forgot-password/forgot-password.component';
import {
UserComponent,
// DialogAddUserComponent,
DialogDeleteUserComponent,
DialogChangeStatusComponent
} from './dashboard/user/user.component';
import { ViewComponent } from './dashboard/view/view.component';
import { CreatePasswordComponent } from './dashboard/auth/create-password/create-password.component';
import {
ToolbarComponent,
DialogLoaderComponent
} from './dashboard/shell/toolbar/toolbar.component';
import { SideNavComponent } from './dashboard/shell/side-nav/side-nav.component';
import { FilterComponent } from './dashboard/filter/filter.component';
import { CandidateListComponent } from './dashboard/candidate-list/candidate-list.component';
import { CandidateFiltersComponent } from './dashboard/candidate-filters/candidate-filters.component';
import { LoaderDownloadComponent } from './dialogs/loader-download/loader-download.component';
import { AdvancedFiltersComponent } from './components/advanced-filters/advanced-filters.component';
import { ProjectAddComponent } from './components/projects/project-add/project-add.component';
import { ProjectListComponent } from './components/projects/project-list/project-list.component';
import { LoaderComponent } from './dialogs/loader/loader.component';
import { ErrorComponent } from './dialogs/error/error.component';
import { SuccessComponent } from './dialogs/success/success.component';
import { ConfirmationComponent } from './dialogs/confirmation/confirmation.component';
import { MatDividerModule } from '#angular/material/divider';
import { AgoPipe } from './pipes/ago.pipe';
import { TimeAgoPipe } from 'time-ago-pipe';
import { MoveProjectComponent } from './dialogs/move-project/move-project.component';
import { CandidateService } from './services/candidate.service';
import { MatTooltipModule } from '#angular/material/tooltip';
import { RemoveApplicantComponent } from './dialogs/remove-applicant/remove-applicant.component';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
import { InterviewListComponent } from './components/interviews/interview-list/interview-list.component';
import { MoveInterviewComponent } from './dialogs/move-interview/move-interview.component';
import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
import { InterviewStatusComponent } from './dialogs/interview-status/interview-status.component';
import { HrComponent } from './components/hr/hr.component';
import { AssignHrComponent } from './dialogs/assign-hr/assign-hr.component';
import { HrService } from './services/hr.service';
import { LoiComponent } from './dialogs/loi/loi.component';
import { OfferLetterComponent } from './dialogs/offer-letter/offer-letter.component';
import { FinalStepComponent } from './dialogs/final-step/final-step.component';
import { FeedbackComponent } from './components/feedback/feedback.component';
import { InterviewFeedbackShowComponent } from './dialogs/interview-feedback-show/interview-feedback-show.component';
import { InterviewerProfileComponent } from './components/interviewer-profile/interviewer-profile.component';
import { AddInterviewerComponent } from './components/add-interviewer/add-interviewer.component';
import { RecruitmentSummaryFiltersComponent } from './components/recruitment-summary-filters/recruitment-summary-filters.component';
// import { InterviewRoundTwoComponent } from './dialogs/interview-round-two/interview-round-two.component';
// import { InterviewRoundTwoFeedbackComponent } from './dialogs/interview-round-two-feedback/interview-round-two-feedback.component';
// tslint:disable-next-line:max-line-length
// import { InterviewRoundTwoFeedbackShowComponent } from './dialogs/interview-round-two-feedback-show/interview-round-two-feedback-show.component';
import { MatRippleModule } from '#angular/material/core';
import { SideNavLatestComponent } from './components/side-nav-latest/side-nav-latest.component';
import { FooterComponent } from './shell/footer/footer.component';
import { JobPostingComponent } from './components/job-posting/job-posting.component';
import { JobPostingCreateComponent } from './components/job-posting-create/job-posting-create.component';
import { CKEditorModule } from '#ckeditor/ckeditor5-angular';
import { AssignProjectComponent } from './dialogs/assign-project/assign-project.component';
import { CarouselModule } from 'ngx-owl-carousel-o';
import { NodataComponent } from './utilities/nodata/nodata.component';
import { ScreeningComponent } from './utilities/screening/screening.component';
import { EngagedViewComponent } from './dialogs/engaged-view/engaged-view.component';
import { RejectLoiComponent } from './dialogs/reject-loi/reject-loi.component';
import { MoveApplicantComponent } from './dialogs/move-applicant/move-applicant.component';
import { DialogExampleComponent } from './dialogs/dialog-example/dialog-example.component';
import { MakeJobLiveComponent } from './dialogs/make-job-live/make-job-live.component';
import { DragDropModule } from '#angular/cdk/drag-drop';
import { VerifyDocumentsComponent } from './dialogs/verify-documents/verify-documents.component';
import { CheckDocumentsComponent } from './components/check-documents/check-documents.component';
import { SuggestOfferComponent } from './hr/suggest-offer/suggest-offer.component';
import { AddUserComponent } from './dashboard/add-user/add-user.component';
import { EditUserComponent } from './dashboard/edit-user/edit-user.component';
// import { ChangeStatusComponent } from './dashboard/edit-user/edit-user.component';
// import { ChartsModule, ThemeService } from 'ng2-charts';
//import { AppraisalProgressComponent } from './components/appraisal-progress/appraisal-progress.component';
// import { UpdateEmpMappingComponent } from './dialogs/update-emp-mapping/update-emp-mapping.component';
import { BottomSheetComponent } from './dialogs/bottom-sheet/bottom-sheet.component';
//import { ScheduleMeetingComponent } from './dialogs/schedule-meeting/schedule-meeting.component';
//import { EmployeeSefComponent } from './dialogs/employee-sef/employee-sef.component';
//import { AppraisalIssueShowComponent } from './dialogs/appraisal-issue-show/appraisal-issue-show.component';
// import { SefFeedbackFormComponent } from './dialogs/sef-feedback-form/sef-feedback-form.component';
#NgModule({
declarations: [
AppComponent,
LoginComponent,
ForgotPasswordComponent,
UserComponent,
ViewComponent,
CreatePasswordComponent,
ToolbarComponent,
SideNavComponent,
DialogLoaderComponent,
// DialogAddUserComponent,
DialogChangeStatusComponent,
DialogDeleteUserComponent,
FilterComponent,
CandidateListComponent,
CandidateFiltersComponent,
LoaderDownloadComponent,
AdvancedFiltersComponent,
ProjectAddComponent,
ProjectListComponent,
LoaderComponent,
ErrorComponent,
SuccessComponent,
ConfirmationComponent,
AgoPipe,
TimeAgoPipe,
MoveProjectComponent,
RemoveApplicantComponent,
InterviewListComponent,
MoveInterviewComponent,
InterviewStatusComponent,
HrComponent,
AssignHrComponent,
LoiComponent,
OfferLetterComponent,
FinalStepComponent,
FeedbackComponent,
InterviewFeedbackShowComponent,
InterviewerProfileComponent,
AddInterviewerComponent,
RecruitmentSummaryFiltersComponent,
// InterviewRoundTwoComponent,
// InterviewRoundTwoFeedbackComponent,
// InterviewRoundTwoFeedbackShowComponent,
SideNavLatestComponent,
FooterComponent,
JobPostingComponent,
JobPostingCreateComponent,
AssignProjectComponent,
NodataComponent,
ScreeningComponent,
EngagedViewComponent,
RejectLoiComponent,
MoveApplicantComponent,
DialogExampleComponent,
MakeJobLiveComponent,
VerifyDocumentsComponent,
CheckDocumentsComponent,
SuggestOfferComponent,
AddUserComponent,
EditUserComponent,
//AppraisalProgressComponent,
//UpdateEmpMappingComponent,
BottomSheetComponent,
//ScheduleMeetingComponent,
//EmployeeSefComponent,
//AppraisalIssueShowComponent,
//SefFeedbackFormComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatCheckboxModule,
MatDatepickerModule,
MatRadioModule,
MatSelectModule,
MatSlideToggleModule,
MatMenuModule,
MatSidenavModule,
MatToolbarModule,
MatCardModule,
MatButtonModule,
MatIconModule,
MatProgressBarModule,
MatDialogModule,
MatSnackBarModule,
MatPaginatorModule,
MatSortModule,
MatTableModule,
HttpClientModule,
MatListModule,
MatNativeDateModule,
MatProgressSpinnerModule,
MatGridListModule,
MatSlideToggleModule,
MatChipsModule,
MatExpansionModule,
MatAutocompleteModule,
MatStepperModule,
MatTabsModule,
MatDividerModule,
MatTooltipModule,
NgxMatSelectSearchModule,
NgxMaterialTimepickerModule,
MatRippleModule,
CKEditorModule,
CarouselModule,
DragDropModule,
// ChartsModule,
// AppraisalModule
],
providers: [
AuthService,
SensitiveService,
ErrorService,
UserService,
AuthGuard,
ExcelService,
ProjectService,
CandidateService,
InterviewService,
HrService,
Title,
// ThemeService,
{
multi: true,
provide: HTTP_INTERCEPTORS,
useClass: KickoffService,
}
],
entryComponents: [
// DialogAddUserComponent,
DialogDeleteUserComponent,
DialogLoaderComponent,
LoaderDownloadComponent,
LoaderComponent,
ErrorComponent,
SuccessComponent,
ConfirmationComponent,
RejectLoiComponent,
MoveProjectComponent,
MoveApplicantComponent,
RemoveApplicantComponent,
MoveInterviewComponent,
InterviewStatusComponent,
AssignHrComponent,
LoiComponent,
OfferLetterComponent,
FinalStepComponent,
InterviewFeedbackShowComponent,
AssignProjectComponent,
EngagedViewComponent,
DialogExampleComponent,
MakeJobLiveComponent,
VerifyDocumentsComponent,
SuggestOfferComponent,
DialogChangeStatusComponent,
//UpdateEmpMappingComponent,
BottomSheetComponent,
//AppraisalProgressComponent,
//ScheduleMeetingComponent,
//EmployeeSefComponent,
//AppraisalIssueShowComponent,
//SefFeedbackFormComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
The feature module --
AppraisalModule
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { AppraisalRoutingModule } from '../yearly-appraisal/appraisal-module-routing.module';
import { AppraisalComponent } from '../yearly-appraisal/appraisal/appraisal.component';
import { FormsModule } from '#angular/forms';
import { ReactiveFormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { MatFormFieldModule } from '#angular/material/form-field';
// import { MatStepperModule } from '#angular/material/stepper';
import { MatInputModule } from '#angular/material/input';
import { MatCheckboxModule } from '#angular/material/checkbox';
import { MatDatepickerModule } from '#angular/material/datepicker';
import { MatRadioModule } from '#angular/material/radio';
import { MatSelectModule } from '#angular/material/select';
import { MatSlideToggleModule } from '#angular/material/slide-toggle';
import { MatMenuModule } from '#angular/material/menu';
// import { MatSidenavModule } from '#angular/material/sidenav';
// import { MatToolbarModule } from '#angular/material/toolbar';
import { MatCardModule } from '#angular/material/card';
import { MatButtonModule } from '#angular/material/button';
import { MatIconModule } from '#angular/material/icon';
// import { MatProgressBarModule } from '#angular/material/progress-bar';
import { MatDialogModule } from '#angular/material/dialog';
import { MatSnackBarModule } from '#angular/material/snack-bar';
import { MatPaginatorModule } from '#angular/material/paginator';
import { MatSortModule } from '#angular/material/sort';
import { MatTableModule } from '#angular/material/table';
import { MatListModule } from '#angular/material/list';
import {
MatNativeDateModule,
MatAutocompleteModule
} from '#angular/material';
import { MatProgressSpinnerModule } from '#angular/material/progress-spinner';
import { MatGridListModule } from '#angular/material/grid-list';
import { MatChipsModule } from '#angular/material/chips';
import { MatExpansionModule } from '#angular/material/expansion';
import { MatTabsModule } from '#angular/material/tabs';
import { MatDividerModule } from '#angular/material/divider';
import { MatTooltipModule } from '#angular/material/tooltip';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
import { MatRippleModule } from '#angular/material/core';
import { CKEditorModule } from '#ckeditor/ckeditor5-angular';
import { CarouselModule } from 'ngx-owl-carousel-o';
import { DragDropModule } from '#angular/cdk/drag-drop';
import { ChartsModule } from 'ng2-charts';
import { DeactivateEmpAppraisalComponent } from '../../dialogs/deactivate-emp-appraisal/deactivate-emp-appraisal.component';
import { UpdateEmpMappingComponent } from '../../dialogs/update-emp-mapping/update-emp-mapping.component';
import { ScheduleMeetingComponent } from '../../dialogs/schedule-meeting/schedule-meeting.component';
import { AppraisalIssueShowComponent } from '../../dialogs/appraisal-issue-show/appraisal-issue-show.component';
import { EmployeeSefComponent } from '../../dialogs/employee-sef/employee-sef.component';
import { SefFeedbackFormComponent } from '../../dialogs/sef-feedback-form/sef-feedback-form.component';
#NgModule({
declarations: [
AppraisalComponent,
DeactivateEmpAppraisalComponent,
UpdateEmpMappingComponent,
ScheduleMeetingComponent,
AppraisalIssueShowComponent,
EmployeeSefComponent,
SefFeedbackFormComponent],
imports: [
CommonModule,
AppraisalRoutingModule,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatCheckboxModule,
MatDatepickerModule,
MatRadioModule,
MatSelectModule,
MatSlideToggleModule,
MatMenuModule,
// MatSidenavModule,
// MatToolbarModule,
MatCardModule,
MatButtonModule,
MatIconModule,
// MatProgressBarModule,
MatDialogModule,
MatSnackBarModule,
MatPaginatorModule,
MatSortModule,
MatTableModule,
HttpClientModule,
MatListModule,
MatNativeDateModule,
MatProgressSpinnerModule,
MatGridListModule,
MatSlideToggleModule,
MatChipsModule,
MatExpansionModule,
MatAutocompleteModule,
// MatStepperModule,
MatTabsModule,
MatDividerModule,
MatTooltipModule,
NgxMatSelectSearchModule,
NgxMaterialTimepickerModule,
MatRippleModule,
CKEditorModule,
CarouselModule,
DragDropModule,
ChartsModule
],
entryComponents: [
DeactivateEmpAppraisalComponent,
UpdateEmpMappingComponent,
ScheduleMeetingComponent,
AppraisalIssueShowComponent,
EmployeeSefComponent,
SefFeedbackFormComponent
]
})
export class AppraisalModule { }
ProtocolService
import { Injectable } from '#angular/core';
import {
HttpClient,
HttpHeaders,
HttpParams
} from '#angular/common/http';
import { IVerifyTokenSuccess } from '../interfaces/i-response';
import { API_URL } from '../app.constant';
// import { SensitiveService } from './sensitive.service';
import { Router } from '#angular/router';
import { AuthService } from '../auth.service';
#Injectable({
providedIn: 'root'
})
export class ProtocolService {
constructor(
private http: HttpClient,
private auth: AuthService,
private router: Router
) { }
async checkHandShake() {
const headers = new HttpHeaders()
.set('Content-Type', 'application/x-www-form-urlencoded');
const body: HttpParams = new HttpParams();
const response = await this.http.post(`${API_URL}user/verifytoken`, body.toString(), { headers })
.toPromise()
.then((res:any) => {
// console.log(res);
this.auth.confirmUser(res.result.userinfo);
if (this.router.url === '/user') {
if (res.result.userinfo.super_admin !== '1') {
this.router.navigate(['/view']);
return res.valid as boolean;
}
}
return res.valid as boolean;
}).catch((error: any) => {
this.router.navigate(['/']);
return false;
});
return response;
}
}
AuthGuard
import { Injectable } from '#angular/core';
import {
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
Router,
} from '#angular/router';
import { Observable } from 'rxjs';
// import { SensitiveService } from './services/sensitive.service';
import { ProtocolService } from './services/protocol.service';
import { IUser } from './interfaces/i-response';
import { map, take } from 'rxjs/operators';
import { AuthService } from './auth.service';
#Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(
private auth: AuthService,
private router: Router,
private _protocol: ProtocolService
) { }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
return this.auth.currentUser.pipe(
take(1),
map((user: IUser) => {
if (!user) {
this._protocol.checkHandShake();
}
return true;
})
);
}
}