Currently, I am in the process of integrating an Angular application with a unique custom UI (Angular library) that is being built using PrimeNg.
The usual method I am following with PrimeNG looks like this:
// mac-login.html
<p-panel header="Login">
<form (ngSubmit)="onSubmit()">
<div class="p-field">
<label for="username">Username</label>
<input pInputText [(ngModel)]="username" id="username" name="username" required />
</div>
<div class="p-field">
<label for="password">Password</label>
<p-password [(ngModel)]="password" id="password" name="password" required />
</div>
<div class="p-field">
<p-button type="submit" label="Login"></p-button>
</div>
</form>
</p-panel>
Additionally, my implementation can be seen below:
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, NgModule, Output } from '@angular/core';
import { PanelModule } from 'primeng/panel';
import { PasswordModule } from 'primeng/password';
import { InputTextModule } from 'primeng/inputtext';
import { ButtonModule } from 'primeng/button';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'mac-login',
templateUrl: './mac-login.html',
styleUrls: ['./mac-login.scss']
})
export class macLogin {
@Input() username: string = '';
@Input() password: string = '';
@Output() submitForm: EventEmitter<{ username: string; password: string }> = new EventEmitter();
onSubmit(): void {
if (this.username && this.password) {
this.submitForm.emit({ username: this.username, password: this.password });
}
}
}
@NgModule({
imports: [
CommonModule,
FormsModule,
PanelModule,
InputTextModule,
PasswordModule,
ButtonModule
],
exports: [ macLogin ],
declarations: [ macLogin ]
})
export class macLoginModule {}
Upon attempting to use the component within my main app like so:
<mac-login
[username]="user.email"
[password]="user.password"
(submitForm)="signIn()"
></mac-login>
And here:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { IUser, AuthService } from '../../services/auth/cognito.service';
@Component({
selector: 'app-sign-in',
templateUrl: './sign-in.page.html',
styleUrls: ['./sign-in.page.scss'],
})
export class SignInPage {
loading: boolean;
user: IUser;
constructor(private router: Router,
private authService: AuthService) {
this.loading = false;
this.user = {
email: '',
password: ''
} as IUser;
}
public signIn(): void {
this.loading = true;
this.authService.signIn(this.user)
.then(() => {
this.router.navigate(['/profile']);
}).catch(() => {
this.loading = false;
});
}
}
An error message is displayed:
main.ts:6 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'firstCreatePass')
TypeError: Cannot read properties of null (reading 'firstCreatePass')
at providersResolver (core.mjs:22359:15)
at definition.providersResolver (core.mjs:22620:24)
at initializeDirectives (core.mjs:11935:17)
at resolveDirectives (core.mjs:11909:13)
at elementStartFirstCreatePass (core.mjs:15677:5)
at ɵɵelementStart (core.mjs:15713:9)
at macLogin_Template (mac-login.html:1:1)
at executeTemplate (core.mjs:11409:17)
at renderView (core.mjs:12608:13)
at renderComponent (core.mjs:12555:5)
at resolvePromise (zone.js:1193:31)
at resolvePromise (zone.js:1147:17)
at zone.js:1260:17
at _ZoneDelegate.invokeTask (zone.js:402:31)
at core.mjs:27127:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:27127:36)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Object.onInvokeTask (core.mjs:27437:33)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Zone.runTask (zone.js:171:47)
I have verified the correct importation of the library in app.module.ts
The entire UI library is integrated through pnpm workspaces.
Is there any solution to overcome this error? Thank you.