ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[UserService -> User -> User

**e-coach.individuel** · 09/03/2021, 14h29

Bonjour à tous,

j'ai l'erreur suivante sur la page admin :

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[UserService -> User -> User -> User]:
NullInjectorError: No provider for User!
NullInjectorError: R3InjectorError(AppModule)[UserService -> User -> User -> User]:
NullInjectorError: No provider for User!

impossible pour moi de trouver l'erreur.

explo.model.ts:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
export class Explo{
    constructor(public Name: string,
                public Gaz: string [],
                public Donnees: number[],
                public LimiteHaute: number[],
                public LimiteBasse: number[])
                {
    }
}

user.model.ts:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
import {Explo} from "../models/Explo.model";
 
export class User{
    constructor(public login: string,
                public Mdp : string,
                public explo ?: Explo){
    }
}

user.Service.ts :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import { User } from "../models/User.model";
import { Subject } from 'rxjs/Subject';
import { HttpClient } from '@angular/common/http';
import { Injectable } from "@angular/core";
 
import { Subscription } from 'rxjs/Subscription';
 
import { Explo } from '../models/Explo.model';
 
@Injectable()
export class UserService{
    private users : User[] = [];
    userSubject = new Subject <User[]>();
 
    constructor(private httpClient : HttpClient,
                private user_session : User) {
                  user_session = JSON.parse(sessionStorage.getItem('user')|| '{}');
                } 
 
    emitUsers(){
        this.userSubject.next(this.users.slice());
    }
 
    addUser(user : User){
        this.users.push(user);
        this.emitUsers();
    }
 
    saveLoginToServer(){
        this.httpClient.put('https://explo-248db-default-rtdb.firebaseio.com/login.json', this.users)
        .subscribe(
          () => {
            console.log('Enregistrement user terminé !');
          },
          (error) => {
            console.log('Erreur ! : ' + error);
          }
        );
      }
 
      getLoginFromServer() {
        this.httpClient
          .get<any[]>('https://explo-248db-default-rtdb.firebaseio.com/login.json')
          .subscribe(
            (response) => {
              this.users = response;
              this.emitUsers();
              console.log('récupération user terminée !');
            },
            (error) => {
              console.log('Erreur ! : ' + error);
            }
          );
      }
 
      getUserFromServer() {
 
        var userTmp = new User('','',);
 
        this.httpClient
          .get<any[]>('https://explo-248db-default-rtdb.firebaseio.com/login.json')
          .subscribe(
            (response) => {
              this.users = response;
              this.emitUsers();
 
              const resultat = this.users.find( User => User.login === this.user_session.login);
              // si résultat = 1 => false, si résultat = 0 => true
              if(resultat){
                //login éxistant
                console.log("User.Service resultat"+resultat.login+"-"+resultat.Mdp);
                userTmp = resultat;
                console.log("User.Service tmp"+userTmp.login+"-"+userTmp.Mdp);
 
                return resultat;
              }
              else{
                console.log('Login non trouvé ! : ');
              }
 
            },
            (error) => {
              console.log('Erreur ! : ' + error);
            }
          );
 
          console.log("User.Service tmp"+userTmp.login+"-"+userTmp.Mdp);
          return userTmp;
      }
 
      addExplo(explo : Explo){
 
        const index = this.users.indexOf( this.user_session);
        // si résultat = 1 => false, si résultat = 0 => true
        if(index>=0){
          //login éxistant
          this.users[index].explo = explo;
          console.log('Explo enregistré !');
 
          this.saveLoginToServer();
          console.log('User mis à jour ! ');
        }
        else{
          console.log('Login non trouvé !');
        }
 
        this.emitUsers();
    }
}

auth.component.ts:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import { ThisReceiver } from '@angular/compiler';
import 'rxjs/RX';
import { Component, Injectable, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
 
import { Subscription } from 'rxjs/Subscription';
 
import { User } from '../models/User.model';
import { UserService } from '../services/user.Service';
 
import { Explo } from '../models/Explo.model';
 
 
@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss']
})
 
@Injectable()
 
export class AuthComponent implements OnInit, OnDestroy {
 
  users: User[] = [];
  userSubscription: Subscription = new Subscription;
  userForm!: FormGroup;
  errorLogin : string | undefined;
 
 
  constructor( 
    private UserService: UserService,
    private formBuilder: FormBuilder,
    private router : Router
    ) {
      this.errorLogin = '';
    }
 
    ngOnInit() {
      this.initForm();
 
      this.UserService.getLoginFromServer();
 
      this.userSubscription = this.UserService.userSubject.subscribe(
        (users: User[]) => {
          this.users = users;
        }
      );
      this.UserService.emitUsers();
    }
 
    initForm(){
      this.userForm = this.formBuilder.group({
        login:['',Validators.required],
        Mdp:[''],
      });
    }
 
    onSubmitForm(){
      const formValue= this.userForm.value;
      const newUser = new User (
        formValue['login'],
        formValue['Mdp'],
      );  
 
 
        const resultat = this.users.find( User => User.login === newUser.login);
        // si résultat = 1 => false, si résultat = 0 => true
        if(resultat){
          //login éxistant
          if(newUser.Mdp==""){
            //réorienter vers User
              this.router.navigate(['/user']);
          }
          else {
            if(resultat.Mdp == newUser.Mdp){
              //réorienter vers Admin
              sessionStorage.setItem('user',JSON.stringify(newUser));
              this.router.navigate(['/admin']);
            }
            else
            {
              this.errorLogin = "mauvais mot de passe";
              console.log("mauvais mot de passe");
            }
          }
        }
        else {
          //login non éxistant
          this.UserService.addUser(newUser);
          this.UserService.saveLoginToServer();
          sessionStorage.setItem('user',JSON.stringify(newUser));
          this.router.navigate(['/admin']);
        }
    }
 
 
 
    ngOnDestroy() {
      this.userSubscription.unsubscribe();
    }
 
}

j'ai une erreur similaire qui est apparu en même temps sur admin.component.ts:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import { ThisReceiver } from '@angular/compiler';
import 'rxjs/RX';
import { Component, OnInit} from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
import { Router } from '@angular/router';
 
import { Subscription } from 'rxjs/Subscription';
 
import { Explo } from '../models/Explo.model';
 
import { User } from '../models/User.model';
import { UserService } from '../services/user.Service';
 
@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss']
})
 
 
export class AdminComponent implements OnInit {
 
  exploForm!: FormGroup;
 
  userSubscription: Subscription = new Subscription;
  user_session : User;
 
    constructor( 
    private UserService: UserService,
    private formBuilder: FormBuilder,
    private router : Router
    ) {
      this.user_session = JSON.parse(sessionStorage.getItem('user')|| '{}');
      console.log('affichage : '+this.user_session.login+'-'+this.user_session.Mdp);
    }
 
  ngOnInit(): void {
    this.initForm();
  }
 
    initForm(){
      this.exploForm = this.formBuilder.group({
        Name:['',Validators.required],
        Gaz: this.formBuilder.array([]),
        Donnees: this.formBuilder.array([]),
        LimiteHaute: this.formBuilder.array([]),
        LimiteBasse: this.formBuilder.array([])
      });
 
      console.log(this.user_session.login+'-'+this.user_session.Mdp);
    }
 
    onSubmitForm(){
      const formValue= this.exploForm.value;
      const newExplo = new Explo (
        formValue['Name'],
        formValue['Gaz'] ? formValue['Gaz'] : [],
        formValue['Donnees'] ? formValue['Donnees'] : [],
        formValue['LimiteHaute'] ? formValue['LimiteHaute'] : [],
        formValue['LimiteBasse'] ? formValue['LimiteBasse'] : []
      );
 
      //this.ExploService.addExplo(newExplo);
      //this.ExploService.saveExploToServer();
      //this.UserService.addExplo(newExplo);
      this.router.navigate(['/user']);
    }
 
    getGaz(){
      return this.exploForm.get('Gaz') as FormArray;
    }
 
    onAddGaz() {
      const newGazControl = this.formBuilder.control(null, Validators.required);
      this.getGaz().push(newGazControl);
    }
}

l'erreur sur cette page est

core.js:6150 ERROR Error: Uncaught (in promise): Error: NG0200: Circular dependency in DI detected for UserService. Find more at https://angular.io/errors/NG0200
Error: NG0200: Circular dependency in DI detected for UserService. Find more at https://angular.io/errors/NG0200

Merci pour votre aide,

Au plaisir,

**krakatoa** · 09/03/2021, 17h28

je prefere utiliser une interface ou une classe pour des models !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
export interface ModelX {
  name: string;             // obligatoire
  firstname: string;       // obligatoire
  job?: string;              // facultatif.   avec ?, 'job' est rendu optionnel
}

remarque: avec une interface, on peut aussi initialiser des valeurs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
export interface ModelX {
  name: string = 'toto';           
  firstname: string = 'tutu';      
  job?: string;             
}

mais avec un constructeur, c'est valable aussi parcequ'on peut initialiser des valeurs mais avec un constructeur comme tu as fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
import {Explo} from "../models/Explo.model";
 
export class User{
    constructor(public login: string,
                public Mdp : string,
                public explo ?: Explo){
    }
}

si tu veux que ton système fonctionne, il faut indiquer à Angular les valeurs par défaut lorsqu'il créait une instance
en effet, le constructeur attends des données et angular ne sait pas quoi lui fournir donc on doit l'indiquer dans app.module par exemple.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
import {Explo} from "../models/Explo.model";
import { Injectable, Inject, Optional } from "@angular/core";
 
@Injectable({
  providedIn: 'root'
})
export class User{
    constructor(
    @Inject('login') public login?: string,
    @Inject('Mdp') public Mdp?: string,
    @Optional() public explo ?: Explo){
    }
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
import { Injectable, Inject } from "@angular/core";
 
@Injectable({
  providedIn: 'root'
})
export class Explo{
  constructor(
    @Inject('Name') public Name?: string
    @Inject('Gaz') public Gaz?: string [],
    @Inject('Donnees') public Donnees?: number[],
    @Inject('LimiteHaute') public LimiteHaute?: number[],
    @Inject('LimiteBasse') public LimiteBasse?: number[]
    )
              {
  }
}

app.module.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
  providers: [
    // EXPO
    {provide: 'Name', useValue: 'Name'},
    {provide: 'Gaz', ...
faire la meme chose avec :  Donnees  , LimiteHaute, LimiteBasse
 
 
    // USER
   {provide: 'login', useValue: 'login'},
   {provide: 'Mdp', useValue: ''},
 ],

**e-coach.individuel** · 09/03/2021, 20h29

Merci pour ta réponse construite, claire et précise.

**krakatoa** · 09/03/2021, 21h01

pour info, si tu utilises le routing, mieux vaut utiliser : BehaviorSubject plutôt que subject
comme expliqué ici : https://iner-dukoid.developpez.com/t...angular/#LXXIX

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[UserService -> User -> User

Angular

Vue hybride

Discussions similaires

Partager

Partager