@angular/fire@17.0.0 throws Circular dependency in DI detected for Analytics. when using Analytics feature #3476
Comments
|
I have the same issue with the latest version 17.0.0 for AngularFireAuth. I get a circular dependency issue: If it is helpful I am happy to share the code |
|
Any idea how to fix this issue also using standalone components? |
|
@Aball985 can you share more of your setup/code? I don't have issues with anything other than analytics and performance |
|
@jakehockey10 sure thing here are some screenshots of how I am using angular fire this was my first time setting it up |
|
@Aball985 I'll take a look in a few hours. Thanks for sharing. I have guards working on my end so I'd like to see if I can help you out! |
thanks! idk if you have your auth working as well but I am seeing this weird console error with the signInWithPopup method as well |
|
@Aball985 I tried attaching the Here is how I've been guarding my routes in my application: import { canActivate, redirectUnauthorizedTo } from '@angular/fire/auth-guard';
export const profilePageRoute = {
path: 'profile',
loadComponent: () => import('./profile-page.component'),
...canActivate(() => redirectUnauthorizedTo(['/auth/login'])),
title: 'Profile',
};I don't use the import {
Auth,
EmailAuthProvider,
createUserWithEmailAndPassword,
getIdToken,
reauthenticateWithCredential,
sendEmailVerification,
sendPasswordResetEmail,
signInWithEmailAndPassword,
signOut,
updatePassword,
updateProfile,
user,
} from '@angular/fire/auth';
...
@Injectable({
providedIn: 'root',
})
export class AuthService {
private readonly _auth = inject(Auth);
...
async login(email: string, password: string) {
const credential = await signInWithEmailAndPassword(
this._auth,
email,
password
);
return credential;
}
...
} |
|
@jakehockey10 thanks for the reply |
|
@Aball985 that is weird that angularfire/src/auth-guard/auth-guard.ts Line 20 in 8157744 I'm not sure I follow the last issue you mention. Are you saying that, for example, when you are logged out, but then you login, you are not automatically redirected away from the login page? If this is what you are saying, then yes, the auth guards are not going to handle redirecting away from the page for you. Guards only get executed when the user or the developer causes a route change. The route change "asks" the guard if "it's okay to navigate there." But if you want to go away from the login page after successful login, you'll want to handle that with your code that is signing the user in. For example, my @Component({
selector: 'app-login-page',
standalone: true,
imports: [
RouterLink,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatCardModule,
MatButtonModule,
],
templateUrl: './login-page.component.html',
styleUrls: ['./login-page.component.scss'],
})
export class LoginPageComponent {
readonly #fb = inject(FormBuilder);
readonly #router = inject(Router);
readonly #auth = inject(AuthService);
readonly #snacks = inject(MatSnackBar);
readonly loading = signal(false);
readonly form = this.#fb.nonNullable.group({
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.minLength(8), Validators.required]],
});
protected async onSubmit() {
this.loading.set(true);
const { email, password } = this.form.getRawValue();
try {
const credential = await this.#auth.login(email, password);
this.#snacks.open(
`Welcome back, ${credential.user.displayName || credential.user.email}!`
);
this.#router.navigate(['/']); // <--- Navigating away from the login page when sign in is successful
} catch (error) {
if (error instanceof FirebaseError) {
switch (error.code) {
case 'auth/user-not-found':
case 'auth/wrong-password':
this.#snacks.open('Invalid email or password');
break;
default:
this.#snacks.open('An unknown error occurred');
break;
}
}
}
this.loading.set(false);
}
}Also, if you haven't already, I'd take a look at this documentation here: https://github.com/angular/angularfire/blob/master/docs/auth.md Hope that helps! Keep me posted! |
|
Ah yes I figured it out I had to make my login component handle routerNavigation also after login logout its working as intended now when switching routes as expected thanks for showing me this! |
Version info
Versions:
$ ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 17.0.6 Node: 20.1.0 Package Manager: npm 9.7.1 OS: linux x64 Angular: 17.0.6 ... animations, cli, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router Package Version --------------------------------------------------------- @angular-devkit/architect 0.1700.6 @angular-devkit/build-angular 17.0.6 @angular-devkit/core 17.0.6 @angular-devkit/schematics 17.0.6 @angular/cdk 17.0.2 @angular/fire 17.0.0 @angular/google-maps 17.0.2 @angular/material 17.0.2 @schematics/angular 17.0.6 ng-packagr 17.0.0 rxjs 7.8.1 typescript 5.2.2 zone.js 0.14.2How to reproduce these conditions
Failing test unit, Stackblitz demonstrating the problem
Steps to set up and reproduce
in
app.config.ts, provide the analytics feature:Sample data and security rules
Debug output
** Errors in the JavaScript console **
If I comment out where I provide Analytics, then Performance runs into an issue:
** Output from
firebase.database().enableLogging(true);**** Screenshots **
Expected behavior
Actual behavior
The text was updated successfully, but these errors were encountered: