I just created a new component on my own project, but I always get the same error message. I'm sure the injection code is correct and the module and component export logic are also correct. I can't understand what is wrong.
custom-header.component.ts
import {Component, Input, ViewEncapsulation} from '@angular/core';
import {Router} from '@angular/router';
@Component({
selector: 'custom-header',
templateUrl: './custom-header.component.html',
encapsulation: ViewEncapsulation.None
})
export class CustomHeaderComponent {
@Input() parentPageTitle: string;
@Input() pageTitle: string;
@Input() createButtonName: string;
@Input() createButtonFunction: () => void;
/**
* Constructor
*/
constructor(
private _router: Router,
) {
}
}
custom-header.module.ts
import {NgModule} from '@angular/core';
import {CustomHeaderComponent} from 'app/modules';
import {MatButtonModule} from '@angular/material/button';
import {CommonModule} from '@angular/common';
@NgModule({
declarations: [
CustomHeaderComponent,
],
exports: [
CustomHeaderComponent,
],
imports: [
MatButtonModule,
CommonModule,
]
})
export class CustomHeaderModule {
}
index.ts
export * from './header/custom-header.module';
export * from './header/custom-header.component';
Error Message
core.mjs:6485 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'CustomHeaderComponent')
TypeError: Cannot read properties of undefined (reading 'CustomHeaderComponent')
at Module.CustomHeaderComponent (custom-header.module.ts:11:26)
at custom-header.module.ts:8:5
at Module.11151 (custom-header.module.ts:11:26)
at __webpack_require__ (bootstrap:19:1)
at Module.33630 (index.ts:8:60)
at __webpack_require__ (bootstrap:19:1)
at Module.3265 (ganymede-users.module.ts:22:30)
at __webpack_require__ (bootstrap:19:1)
at Module.50252 (custom-header.module.ts:11:26)
at __webpack_require__ (bootstrap:19:1)
at resolvePromise (zone.js:1213:1)
at resolvePromise (zone.js:1167:1)
at zone.js:1279:1
at ZoneDelegate.invokeTask (zone.js:406:1)
at Object.onInvokeTask (core.mjs:25505:1)
at ZoneDelegate.invokeTask (zone.js:405:1)
at Zone.runTask (zone.js:178:1)
at drainMicroTaskQueue (zone.js:582:1)
Use OnChanges because is a lifecycle hook that is called when any data-bound property of a directive changes:
import {Component, OnChanges, SimpleChanges, Input} from '@angular/core';
export class ChildComponent implements OnChanges {
@Input() message = '';
ngOnChanges(changes: SimpleChanges) {
if (this.message){
//do something here....
}
}
}