Angular Service Injection Initialiser proprieté

**yLaplace** · 23/11/2020, 12h46

Bonjour,

J'ai deux services dont l'un est utilisé par l'autre

App.module

Code :

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

1
2
3
4
 providers: [
        LogPublishersService,
        LogService,
        CrudService,

App.component page test

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
 
 
    setOptionsTest(): void {
        // Get current logging level
        let oldLevel = this.logger.level;
 
 
        console.log('old Level: ' + oldLevel),
        this.logger.level = 4;
        console.log('Level: ' + this.logger.level);
 
        // Attempt some logging
        this.logger.log("This one should not show up");
        this.logger.warn("This one should not show up either");
 
        this.logger.error("This is an ERROR");
        this.logger.fatal("This is a FATAL ERROR");
 
        // Reset level back to old value
        this.logger.level = oldLevel;
      }

log.service

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
 
@Injectable({
  providedIn: 'root'
})
 
export class LogService {
 
  // Public Properties
  public publishers: LogPublisher[];
  public level: LogLevel = LogLevel.All;
  public logWithDate: boolean = true;
 
  constructor(private publishersService: LogPublishersService) {
    // Set publishers
    this.publishers = this.publishersService.publishers;
  }
 
 
  // *************************
  // Public methods
  // *************************
  debug(msg: string, ...optionalParams: any[]) {
    console.log('debug: ' + msg);
    this.writeToLog(msg, LogLevel.Debug, optionalParams);
  }
 
  info(msg: string, ...optionalParams: any[]) {
    console.log('info: ' + msg);
    this.writeToLog(msg, LogLevel.Info, optionalParams);
  }
 
  warn(msg: string, ...optionalParams: any[]) {
    console.log('warn: ' + msg);
    this.writeToLog(msg, LogLevel.Warn, optionalParams);
  }
 
  error(msg: string, ...optionalParams: any[]) {
    console.log('error: ' + msg);
    this.writeToLog(msg, LogLevel.Error, optionalParams);
  }
 
  fatal(msg: string, ...optionalParams: any[]) {
    console.log('fatal: ' + msg);
    this.writeToLog(msg, LogLevel.Fatal, optionalParams);
  }
 
  log(msg: string, ...optionalParams: any[]) {
    console.log('log: ' + msg);
    this.writeToLog(msg, LogLevel.All, optionalParams);
  }
 
  //log1(msg: any) {
  //  console.log(new Date() + ": " + JSON.stringify(msg));
  //}
 
  clear(): void {
    for (let logger of this.publishers) {
      logger.clear()
        .subscribe(response => console.log(response));
    }
  }
 
 
  // *************************
  // Private methods
  // *************************
  private shouldLog(level: LogLevel): boolean {
    let ret: boolean = false;
 
 
    //console.log('level: ' + level);    
    //console.log('this.level: ' + this.level); 
 
    if ((level >= this.level && level !== LogLevel.Off) || this.level === LogLevel.All) {
      ret = true;
      console.log('OK');
    }
 
    return ret;
  }
 
  private writeToLog(msg: string, level: LogLevel, params: any[]) {    
    if (this.shouldLog(level)) {
      // Declare variables
      let entry: LogEntry = new LogEntry();
 
      // Build Log Entry
      entry.message = msg;
      entry.level = level;
      entry.extraInfo = params;
      entry.logWithDate = this.logWithDate;
 
      if(!this.publishers.length){
        console.log('this publixhers is empty');
      }else{
        console.log('this publixhers is not empty');
      }
      for (let logger of this.publishers) {
        console.log(msg);
        logger.log(entry).subscribe(response => console.log(response));
      }
    }
  }
 
}

log-publisher.service

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
@Injectable({
  providedIn: 'root'
})
 
export class LogPublishersService {
 
  // Public properties
   publishers: LogPublisher[] = [];
 
  constructor(private http: HttpClient) {
    console.log('LogPublishersService')
    // Build publishers arrays
    this.buildPublishers();
  }
 
  // *************************
  // Public methods
  // *************************
  // Build publishers array
  buildPublishers(): void {
    console.log('Build publishers arrays')
    let logPub: LogPublisher;
 
    this.getLoggers().subscribe(response => {
      for (let pub of response.filter(p => p.isActive)) {
         switch (pub.loggerName.toLowerCase()) {
          case "console":
            logPub = new LogConsole();
            break;
          case "localstorage":
            logPub = new LogLocalStorage();
            break;
          case "webapi":
            logPub = new LogWebApi(this.http);
            break;
        }
        // Set location of logging
        logPub.location = pub.loggerLocation;
        // Add publisher to array
        this.publishers.push(logPub);
        console.log('publishers arrays push [ location: ' + logPub.location + '  log :' + logPub.log + ' ]')
      }
    });
  }
}

Console

LogPublishersService
:4200/main.js:11763 Build publishers arrays
:4200/main.js:15006 ƒ showTasks() {
return this.http.get(`${this.apiUrl}`);
}

/ ici log.service
:4200/main.js:15058 old Level: 0
:4200/main.js:15060 Level: 4
:4200/main.js:7319 log: This one should not show up
:4200/main.js:7307 warn: This one should not show up either
:4200/main.js:7311 error: This is an ERROR
:4200/main.js:7340 OK
:4200/main.js:7354 this publixhers is empty
:4200/main.js:7315 fatal: This is a FATAL ERROR
:4200/main.js:7340 OK
:4200/main.js:7354 this publixhers is empty
core.js:291

suite log-publisher

publishers arrays push [ location: log :log(entry) {
// Log to console
console.log(entry.buildLogString());
//return Observable.of(true);
return Object(rxjs__WEBPACK_IMPORTED_MODULE_0__["of"])(true);
} ]
:4200/main.js:11782 publishers arrays push [ location: logging log :log(entry) {
let ret = false;
let values;
try {
// Retrieve previous values from local storage
values = JSON.parse(localStorage.getItem(this.location)) || [];
// Add new log entry to array
values.push(entry);
// Store array into local storage
localStorage.setItem(this.location, JSON.stringify(values));
// Set return value
ret = true;
}
catch (ex) {
// Display error in console
console.log(ex);
}
//return Observable.of(ret);
return Object(rxjs__WEBPACK_IMPORTED_MODULE_0__["of"])(ret);
} ]
:4200/main.js:11782 publishers arrays push [ location: /api/log log :log(entry) {
/*let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });

return this.http.post(this.location, entry, options)
.map(response => response.json())
.catch(this.handleErrors);
*/
const headers = new _angular_common_http__WEBPACK_IMPORTED_MODULE_0__["HttpHeaders"]();
headers.set('Content-Type', 'application/json');
//headers.set('Content-Type', 'application/json; charset=utf-8');
const options = ({
headers: headers
});
return this.http.post(this.location, entry, options).pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_2__["catchError"])(e => this.handleErrors(e)));
} ]

a l'execution , il commence par initailiser le log-publicher.service mais n'initalise pas la proprieté publishers: LogPublisher[] = []; hors j'ai besoin qu'elle soit initialé avant que le second service s'execute. La non initialisation entraine this publixhers is empty ce qui fait que les messages ne s'affichent pas.

Le souhait est que le système initailse le log-publisher.service (initaise toutes les proprités du service) avant de lancer l'autre service

**dukoid** · 23/11/2020, 16h41

et oui: this.getLoggers().subscribe(
c'est de l'asynchrone donc la réponse est décalé dans le temps

dans ngOnInit du app.components.ts

Code :

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

1
2
3
4
5
6
 
...
...
ngOnInit() {
    this.logService.initialize();
}

LogService.ts

Code :

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

1
2
3
4
5
6
7
 
...
... enlever du constructeur cette ligne: this.publishers = this.publishersService.publishers;
...
initialize() {
 this.publishers = this.publishersService.publishers;
}

app.component.ts est exécuté qu'une seule fois car c'est le composant de démarrage donc on peut initialiser les services ici

**yLaplace** · 23/11/2020, 17h30

LogPublishersService
log-publishers.service.ts:48 Build publishers arrays
app.component.ts:150 ƒ showTasks() {
return this.http.get(`${this.apiUrl}`);
}
app.component.ts:225 old Level: 0
app.component.ts:227 Level: 4
log.service.ts:58 log: This one should not show up
log.service.ts:43 warn: This one should not show up either
log.service.ts:48 error: This is an ERROR
log.service.ts:86 OK
log.service.ts:104 this publixhers is empty
log.service.ts:53 fatal: This is a FATAL ERROR
log.service.ts:86 OK
log.service.ts:104 this publixhers is empty
core.js:26882 Angular is running in development mode. Call enableProdMode() to enable production mode.
log-publishers.service.ts:68 publishers arrays push [ location: log :log(entry) {
// Log to console
console.log(entry.buildLogString());
//return Observable.of(true);
return Object(rxjs__WEBPACK_IMPORTED_MODULE_0__["of"])(true);
} ]
log-publishers.service.ts:68 publishers arrays push [ location: logging log :log(entry) {
let ret = false;
let values;
try {
// Retrieve previous values from local storage
values = JSON.parse(localStorage.getItem(this.location)) || [];
// Add new log entry to array
values.push(entry);
// Store array into local storage
localStorage.setItem(this.location, JSON.stringify(values));
// Set return value
ret = true;
}
catch (ex) {
// Display error in console
console.log(ex);
}
//return Observable.of(ret);
return Object(rxjs__WEBPACK_IMPORTED_MODULE_0__["of"])(ret);
} ]
log-publishers.service.ts:68 publishers arrays push [ location: /api/log log :log(entry) {
/*let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });

return this.http.post(this.location, entry, options)
.map(response => response.json())
.catch(this.handleErrors);
*/
const headers = new _angular_common_http__WEBPACK_IMPORTED_MODULE_0__[

le comportement de l'appli n'a pas changé.
Toujours le meme soucis Nom : ecr.png
Affichages : 125
Taille : 36,7 Ko

**dukoid** · 23/11/2020, 17h33

on peut avoir le code ou on doit le deviner ?

d'ailleurs, tu peux créer un stackblitz sur angular
tu y met juste tes services et l'initialisation

tu mets le projet en public le temps du debugage
tu files le lien

ça nous facilite la vie de débuggeur ça ... stackblitz

**yLaplace** · 24/11/2020, 09h21

Bonjour,
Comme vous l'avez demandé https://stackblitz.com/edit/create-7...Fapp.module.ts

**dukoid** · 24/11/2020, 11h18

tu as du supprimer des fichiers importants

** recréer un projet Angular propre et remet ton code
ng new nom-du-projet

utilise le générateur d'angular-cli:

** pour créer un service: ng g s /services/nom-du-service
ng g s /services/log-service
...
...

** pour créer un composant: créer un composant et le déclare automatiquement dans: app.module.ts
ng g c /components/nom-du-composant --module=app

**yLaplace** · 24/11/2020, 15h59

https://stackblitz.com/edit/angular-.../app.module.ts

**dukoid** · 24/11/2020, 16h35

un peu fatigué, c'etait pourtant claire

ERROR
Error: R3InjectorError(AppModule)[LogService -> LogPublishersService -> HttpClient -> HttpClient -> HttpClient]:
NullInjectorError: No provider for HttpClient!

HttpClient c'était pourtant écrit ! pfffff

app.module

Code :

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

1
2
3
4
5
6
 
import { HttpClientModule } from '@angular/common/http';
...
imports: [
...
HttpClientModule,

** tu ferais bien de classer et organiser ton code
/components/.....
/services/..........service.ts
/enums/......enum.ts
/models/......model.ts

** et d'utiliser angular-cli
ng generate service /services/mon-service

**yLaplace** · 24/11/2020, 17h14

J'ai essayé de reproduire au minima le code en prenant en compte ce qui fait ici l'objet de notre sujet.
Quand j'essais de créer des dossiers dans stackblitz, ça ne marche sinon l'arborescence est src/app/shared/log/log.service dans mon projet ainsi de suite.
Mais je pense que c'est moi ui ne maitrise pas stackblitz.
Le projet que j'adapte est au lien https://www.codemag.com/article/1711...r-Applications

**krakatoa** · 24/11/2020, 17h27

on t'as répondu qu'il fallait ajouter httpclient !

sinon tu veux faire quoi ?

**yLaplace** · 24/11/2020, 20h46

Envoyé par dukoid

un peu fatigué, c'etait pourtant claire

ERROR
Error: R3InjectorError(AppModule)[LogService -> LogPublishersService -> HttpClient -> HttpClient -> HttpClient]:
NullInjectorError: No provider for HttpClient!

HttpClient c'était pourtant écrit ! pfffff

app.module

Code :

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

1
2
3
4
5
6
 
import { HttpClientModule } from '@angular/common/http';
...
imports: [
...
HttpClientModule,

C'est fait

Angular Service Injection Initialiser proprieté

Angular

Discussions similaires

Partager

Partager