I've been working on implementing Google Auth login with Firebase, but I keep encountering an issue when trying to load another component or page after logging in. I've spent the entire day trying to debug this problem and it's really frustrating. Any help would be greatly appreciated.
You can view my entire project publicly at https://github.com/domilx/ProjetBocal-Angular
ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[NavbarComponent -> NavbarComponent -> NavbarComponent]:
NullInjectorError: No provider for NavbarComponent!
get@http://localhost:4200/vendor.js:120414:27
Sample Code:
Navbar.component.html:
<div mat-elevation-z4>
<mat-toolbar color="primary">
<button routerLink="dashboard" mat-button aria-label="Home">
<mat-icon>home</mat-icon>
Projet Bocal
</button>
<span class="spacer-1"></span>
<button mat-button aria-label="Classroom">
<mat-icon>class</mat-icon>
Classroom
</button>
<button mat-button aria-label="Links">
<mat-icon>links</mat-icon>
Links
</button>
<span class="spacer-1"></span>
<button mat-button aria-label="Logout" *ngIf="auth.user$ | async as user" (click)="auth.signOut()">
<mat-icon>exit_to_app</mat-icon>
Logout, {{ user.displayName }}
</button>
<span class="spacer"></span>
<button routerLink="settings" mat-icon-button aria-label="settings" *ngIf="auth.user$ | async as user">
<mat-icon>settings</mat-icon>
</button>
</mat-toolbar>
</div>
Auth.service.ts
// Code sample for Auth service
... (rest of the code)
}
Auth.guard.ts
// Code sample for Auth guard
... (rest of the code)
App.module.ts
// Code sample for App module
... (rest of the code)
App-routing.module.ts
// Code sample for App routing module
... (rest of the code)
navbar.component.ts
// Code sample for navbar component
... (rest of the code)