I encountered an error in my Angular 8 application while working on a component. The error seems to be related to nested components within the main component. It appears that if the component is empty, the error will be shown, but if it's not null, then the error will not occur.
:4200/dossier-dossier-module-ngfactory.js:186 ERROR TypeError: Cannot read property 'length' of null
at DossierCorrespondenceItemComponent.push../src/app/dossier/dossier-correspondence-item/dossier-correspondence-item.component.ts.DossierCorrespondenceItemComponent.ngOnInit (:4200/dossier-dossier-module-ngfactory.js:100)
at checkAndUpdateDirectiveInline (vendor.js:37850)
at checkAndUpdateNodeInline (vendor.js:46063)
at checkAndUpdateNode (vendor.js:46025)
at debugCheckAndUpdateNode (vendor.js:46659)
at debugCheckDirectivesFn (vendor.js:46619)
at Object.updateDirectives (:4200/dossier-dossier-module-ngfactory.js:189)
at Object.debugUpdateDirectives [as updateDirectives] (vendor.js:46611)
at checkAndUpdateView (vendor.js:46007)
at callViewAction (vendor.js:46248)
This issue is occurring on this specific component:
<app-dossier-correspondence-item
[item]="single"
(goBack)="goBack($event)"
*ngIf="showingSingle">
</app-dossier-correspondence-item>
</app-vital10-page>
Here is the TypeScript code for the component:
import { Component, OnInit } from '@angular/core';
import { HealthAPIService } from '../../shared/health-api/health-api.service';
import { DossierEntry } from '../../interfaces/dossier/dossier-entry.interface';
@Component({
selector: 'app-dossier-correspondence',
templateUrl: './dossier-correspondence.component.html',
})
export class DossierCorrespondenceComponent implements OnInit {
// Class properties and methods here...
}