Discussion :

[cyril260390]

Bonjour,

Nouveau dans le monde du développement, je me lance dans un projet personnel pour acquérir dans l'expérience en angular.

J'effectue un projet tout simple notamment un système de login. Mais là je bloque.

Mon service ne fonctionne absolument pas et je ne sais pas ce qui cloche.

J'obtiens cette erreur dans ma console à la validation du formulaire :
"TypeError: this.interceptor.intercept is not a function"

Voici mon code de mes différents components et 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
 
<div class="col-8 m-auto">
  <form [formGroup]="signinForm" class="d-flex flex-column" (ngSubmit)="onSubmit()">
    <div class="form-group w-100">
      <label for="username">Username</label>
      <input type="username" name="username" class="form-control" autocomplete="off" placeholder="" formControlName="username">
  </div>
  <div class="form-group w-100">
      <label for="Password">Votre mot de passe</label>
      <input type="password" class="form-control" name="Password" placeholder="" autocomplete="off" formControlName="password">
  </div>
  <button type="submit" [disabled]="signinForm.invalid" class="btn btn-primary text-centerw-100">Connexion</button>
  </form>
</div>

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
 
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { AuthService } from 'src/app/auth.service';
 
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
 
  signinForm: FormGroup;
  errorMessage = 'Mail ou mot de passe incorrect';
  loading = false;
  submitted = false;
 
 
  constructor(private fb: FormBuilder, private dataService: AuthService, private router: Router, private route: ActivatedRoute,) { }
 
  ngOnInit(): void {
    this.signinForm = this.fb.group({
      username: ['', [Validators.required]],
      password: ['', Validators.required]
    });
  }
 
  get f() { return this.signinForm.controls }
 
  onSubmit() {
    this.submitted = true;
    if(this.signinForm.invalid) {
      return;
    }
 
    this.loading = true;
    this.dataService.login(this.f.username.value, this.f.password.value).pipe(first()).subscribe({
      next: () => {
        const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
        this.router.navigateByUrl(returnUrl);
      },
      error: error => {
        console.log(error);
        this.loading = false;
      }
    });
  }
 
}

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
 
import { Injectable, Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from 'src/app/models/users.model';
 
@Injectable({
  providedIn: 'root'
})
export class AuthService {
 
  private userSubject: BehaviorSubject<User>;
  public user: Observable<User>;
 
  constructor(private router: Router, private http: HttpClient) {
    this.userSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('user')));
    this.user = this.userSubject.asObservable();
  }
 
  login(username, password) {
    return this.http.post<User>(`http://localhost:8888/login.php`, {username, password}).pipe(
      map(user => {
        localStorage.setItem('partner', JSON.stringify(user));
        this.userSubject.next(user);
        return user;
      })
    )
  }
}

Code :

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

1
2
3
4
5
6
7
8
9
 
export class User {
  id: string;
  username: string;
  password: string;
  firstName: string;
  lastName: string;
  token: string;
}

Est ce que quelqu'un peut m'aidez ?

[krakatoa]

tu utilises un interceptor ?

regarde dans les modules !

https://efficientcoder.net/angular-1...-interceptors/

[cyril260390]

Non je ne connais pas.
Je vais regarder le lien que tu m'as envoyé et essayer.

[krakatoa]

aaah bizarre
ça ne sert à rien d'essayer si tu ne l'a pas volontairement mis !

dans un module t'as une ligne de ce genre ?

Code :

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

1
2
3
4
5
6
7
@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }

si oui, tu peux le supprimer !

[cyril260390]

Effectivement j'ai cette ligne dans mon component app.module. Je l'ai donc effacer et j'ai effectué un nouveau test.
J'ai une nouvelle erreur, je suis en train de chercher à quoi cela peut correspondre.

Voici mon erreur Access to XMLHttpRequest at 'http://localhost:8888/login.php' from origin 'http://localhost:4206' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

En cherchant sur le net, j'ai trouvé ce lien https://www.journaldunet.fr/web-tech...-avec-angular/

Donc si je comprend bien, il faut que je rajoute un module pour permettre l'accès CORS

[krakatoa]

les CORS n'est pas un problème coté Angular mais du coté serveur.

en effet, le fournisseur de données (api) doit accepter les requetes provenant du projet angular
donc il faut ajouter coté serveur des CORS
genre j'accepte de communiquer avec la requete provenant de http://....url.... (qui est l'url du projet Angular)

c'est une sécurité, ainsi, si un autre projet n'a pas l'autorisation il ne peut pas recup des données de l'api

[cyril260390]

ok merci pour ce complément d'information. Je vais alors me pencher sur mes fichiers back.

Ayant beaucoup de lacune encore dans le développement et notamment Angular, qu'est ce que vous conseillez pour monter en compétence.

[krakatoa]

qqs questions avant de te repondre :
- en general, tu debutes en développement web ?
- tu veux etre front ? back ? ou fullstack ?
- de combien de temps disposes tu pour te former ?
- dans quel but veux tu te former ?
(perso, trouver un job...)

tu peux me repondre par message si tu le souhaites

[cyril260390]

oui je débute complément en développement web. Je souhaiterais vraiment me spécialiser en dev front via des framework comme angular. Je touche un peu le back mais ce n'est pas trop mon truc. Je souhaite effectué une reconversion professionnel donc dans un avenir pouvoir vraiment travailler dans ce domaine.

[krakatoa]

Angular en front et bien se débrouiller en java spring pour le back
avec ce couple angular/java tu peux trouver facilement un job, c'est très recherché.

normalement faut 2 ans d'études donc va falloir t'accrocher pour te former en un temps réduit.
autodidacte, c'est très bien... tu cherches par toi même. c'est une grande qualité qu'il faut avoir en dév.


(1) d'abord je te dirais de commencer par apprendre typeScript
- les notions d'objets (une classe, une classe abstraite, une interface, heritage)
- le typage, les fonctions, les variables, les tableaux..
pas besoin d'aller plus loin...

tu peux apprendre typeScript directement dans Angular. tout est déjà installé .

(2) te former sur angular
suivre tous les tutos que tu trouves sur internet (texte et videos de formation voir youtube)
si anglais et que tu ne maitrises pas la langue , la traduction texte est correcte...

exemple:

je n'ai pas d'action dans ce tuto payant ninja : https://books.ninja-squad.com/angular
le prix est raisonnable, à l'epoque je l'avais acheté.. ça aborde typeScript, angular ....
il y a les 6 premiers chapitres gratuits, tu peux déjà en profiter

(3)
créer un projet par exemple : e-commerce
c'est un bon projet formateur

[cyril260390]

merci pour tous tes précieux conseils. Je vais essayer d'appliquer tout ça. Je commence un peu à faire des autos mais c'est que même en suivant des autos à la lettre parfois ça beugle et j'ai encore du mal à comprendre le pourquoi du comment. Par exemple comme ce beugle sur le login.
Mais c'est ça aussi le but du métier. J'ai encore beaucoup de chose à découvrir.

[krakatoa]

tu attaques le login, c'est déjà un bon morceau technique !
j'ai modifié mon texte du mess precedent relis la partie avec ninja !

[cyril260390]

merci beaucoup je vais lire tout ça.
Après j'essayer de repartir sur mon projet et sur le login.Je vous dirai si j'y suis arrivé.

En tout cas merci pour tous ces précieux conseils.

Je vous souhaite une excellente soirée

[krakatoa]

tant que j'y pense, autre technique :

je prends un fichier au hasard par ex le module app :

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
 
import { BrowserModule } from '@angular/platform-browser';                    
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,                
  ],                             
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

déjà le fichier en lui meme, se demander à quoi sert : app.module ?

faut lire chaque ligne et il faut comprendre son utilité..
par ex je lis : import { BrowserModule }
je me demande à quoi sert : import, ensuite le package : BrowserModule
je cherche des infos sur internet, les tutos et pourquoi pas poser la question sur un forum.

il ne faut pas répéter bêtement du code sans comprendre chaque détail !

si malgré tes recherches c'est floue, n'hésite pas à poser même plusieurs questions sur des forums.
c'est fait pour ça