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

Bonjour à tous,

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

Citation:

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:

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:

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:

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:

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:

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

Citation:

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,

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

Code:

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:

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:

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:

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:

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:

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: ''},
 ],

résolu

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

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