Bonjour à tous et à toutes,

Je suis actuellement sur le cours "Développez des applications web avec Angular" et j'en suis au chapitre sur la navigation et le routing.

Alors déjà, j'ai un peu galéré avec l'import Observable parce que la version 'rxjs/Observable' du cours fait planter le code, obligée de mettre juste 'rxjs' (j'ai perdu quand même une demi-heure à parcourir le forum et Google juste pour ça) et ensuite, même en suivant scrupuleusement le code à partir de cette ancre Guards ça ne veut pas fonctionner, j'ai une erreur dans mon terminal et même si ça compile, mon affichage me laisse une page blanche.

A force d'avoir des erreurs, je me suis dite que je devais faire une faute de frappe, donc j'ai fait un copier/coller du code depuis le cours, mais j'ai toujours la même erreur.

Le code est en TypeScript, je n'ai pas trouvé les balises correspondantes :/

import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from'@angular/router';
import { Observable } from'rxjs';
import { AuthService } from'./auth-guard';
import { Injectable } from'@angular/core';

Cannot find module './auth-service'.ts(2307)

 ERROR in src/app/services/auth-guard.service.ts(3,29): error TS2307: Cannot find module './auth-service.services'.

Tout le reste du code et du cours, jusqu'à maintenant, ça a fonctionné sans problème, même si parfois je me suis un peu prise la tête parce que les instructions manquaient de précisions, j'ai fini par y arriver.

Mais là, je tourne en rond depuis hier après-midi dessus, et je rechigne à continuer le cours si cela ne marche pas, car du coup, je n'ai plus aucun affichage à cause de ça et je ne sais pas si je vais en avoir besoin pour la suite ou pas.

Donc si quelqu'un pouvait me renseigner, ça serait bien, c'est un peu agaçant de bloquer alors que notre code est 100% similaire et fonctionne sans le code fautif.

Merci d'avance,

Cordialement

-
Edité par HappyBadger 6 décembre 2019 à 15:05:00

Salut. Pour TypeScript tu peux tout simplement choisir "JScript" dans la balise de code. Montre le contenu du fichier "auth-guard.service.ts". Tu as essayé l'importation avec

import AuthService

Ou 

import { AuthService }

Ce n'est pas la même chose, ça dépend de comment tu as exporté ton service.

-
Edité par kulturman 4 décembre 2019 à 14:05:40

Je viens de modifier le post principal, car j'ai eu un changement dans le message d'erreur :/ (et j'ai mis dans des balises JScript du coup)

voici le code de auth-guard.service.ts ( qui est un copier/coller du cours)

import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth-service';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService,
              private router: Router) { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if(this.authService.isAuth) {
      return true;
    } else {
      this.router.navigate(['/auth']);
    }
  }
}

Et dans la console du DevTools sur le navigateur, j'ai ça comme message d'erreur, je ne sais pas l'interprêter

Error: Can't resolve all parameters for AuthGuard: (?, [object Object]). compiler.js:2175
    Angular 6
        syntaxError
        _getDependenciesMetadata
        _getTypeMetadata
        _getInjectableTypeMetadata
        getProviderMetadata
        _getProvidersMetadata
    forEach self-hosted:266
    Angular 8
        _getProvidersMetadata
        getNgModuleMetadata
        _loadModules
        _compileModuleAndComponents
        compileModuleAsync
        compileModuleAsync
        compileNgModuleFactory__PRE_R3__
        bootstrapModule
    ts main.ts:11
    Webpack 8
        __webpack_require__
        0
        __webpack_require__
        checkDeferredModules
        webpackJsonpCallback
        <anonyme>
        InnerModuleEvaluation
        evaluation

EDIT :

En relisant pour la trouzmillième fois, j'ai corrigé './auth-service' en '.auth.service' par rapport au cours; mais ça marche pas mieux :/

-
Edité par HappyBadger 4 décembre 2019 à 14:27:07

Je te demande de montrer le contenu de "auth-guard.service.ts"

Edit: de auth.service.ts plutôt

-
Edité par kulturman 4 décembre 2019 à 14:30:32

Voilà ce que j'ai dans auth.service.ts

export class AuthService {

  isAuth = false;

  signIn() {
    return new Promise(
      (resolve, reject) => {
        setTimeout(
          () => {
            this.isAuth = true;
            resolve(true);
          }, 2000
        );
      }
    );
  }

  signOut() {
    this.isAuth = false;
  }
}

 Et maintenant j'ai tout ça comme erreur :/

ERROR in src/app/auth/auth.component.ts(2,10): error TS2305: Module '"C:/Users/xxx/Desktop/Git_repo/ocr-mon-projet-angular/src/app/services/auth.service"' has no exported member 'AuthService'.
    src/app/services/auth-guard.service.ts(3,10): error TS2305: Module '"C:/Users/xxx/Desktop/Git_repo/ocr-mon-projet-angular/src/app/services/auth.service"' has no exported member 'AuthService'.
    src/app/services/auth.service.ts(3,10): error TS2305: Module '"C:/Users/xxx/Desktop/Git_repo/ocr-mon-projet-angular/src/app/services/auth.service"' has no exported member 'AuthService'.

Je viens de me refaire tout le chapitre, uniquement en copier-coller pour être sûre de pas faire de faute de frappe, mais apparemment ça suffit pas -_-"

EDIT EDIT EDIT :

Bon, j'ai supprimé les fichiers qui me posaient soucis, j'ai coupé le serveur, fermé l'onglet, refait les pages, relancer le serveur, relancé l'onglet : Tout fonctionne !!! Je vais même pas chercher à comprendre, je vais juste me concentrer sur mon code.

Désolée de t'avoir faire perdre ton temps @kulturman :/ et merci

-
Edité par HappyBadger 28 janvier 2020 à 16:50:58

HappyBadger a écrit:

Je vais même pas chercher à comprendre

Salut,

Bon ce cours commence sérieusement à me gonfler là, ça fait le 3ème chapitre ou je galère alors que j'ai EXACTEMENT le même code que le prof !!!

Chapitre en question : Ecoutez l'utilisateur avec les Forms - méthode réactive

J'ai supprimé TOUTES les lignes et les components en rapport avec la partie User, j'ai tout recréé en ne faisant QUE des copier-coller du cours et malgré ça, dès que j'importe mon service User dans app.module.ts dans les providers (là où sont tous mes autres services qui tournent nickel), ça me fait planter le site ! Je n'ai plus d'affichage et j'ai un message d'erreur dans la console qui me dit :

Error: Can't resolve all parameters for User: (?, ?, ?, ?, ?).

Pourtant, je les ai ces p*****s de paramètres, les 5 sont bien définis, je veux dire avec des copier/coller y a aucune faute de frappe, alors à moins que ça vienne du cours, là je vois pas !

Dès que je supprime le service User, mon site s'affiche parfaitement et tout fonctionne :/

Et c'est vraiment chiant parce que je peux pas avancer dans le cours si ça bloque, vu qu'on rajoute des fonctionnalités sur ce qui existe...

Donc là ça fait 3h que j'essaie de faire ce foutu chapitre et je ne COMPRENDS PAS pourquoi ça bloque :/ Et si ça vient du cours, comment signaler le problème ? Je ne sais pas à qui m'adresser et j'ai déjà relevé plusieurs coquilles dans les chapitres précédents, comme des oublis de mots qui te change le sens d'une phrase par exemple ou un manque de précision sur où dont-on mettre telles lignes...

Merci de votre aide, désolée de m'énerver mais là je perds patience...

Cordialement

Bonjour,

PERSONNE n'a eu le même soucis ? Comme je n'ai pas réussi à trouver le bug, je ne peux pas continuer le cours, vu que le TP blog se sert de cette base :/ Du coup je suis un peu frustrée, j'en ai marre de toute effacer, tout refaire et que ça ne fonctionne pas

Le repo git est accessible ici :

Mon projet angular

Si quelqu'un a le temps de regarder, j'ai terminé la lecture du cours et j'ai eu le certificat mais je n'ai pas pu terminé les TP, et j'aimerai bien les finir :/

Jeviens de regarder ton code (tes commits m'ont fait rire), dans "app.module" c'est le model que tu mets dans le tableau "providers", ça devrait être le service plutôt 

import { User } from './models/User.model';
//Plutôt
import { UserService } from './services/user.service';

Et tu adaptes le nom dans "providers"

Salut ! Désolée, j'ai les notifications avec pas mal de retard (dunno why) et je viens seulement de regarder et en effet, ça résout tout :/ Je vais aller relire le cours, j'ai vraiment dû rater un truc quelque part. Après (vilaine moi) comme les imports se faisaient automatiquement, j'ai pas été voir plus haut, donc mea culpa, je vais prendre l'habitude de les rentrer à la mano n__n"

Je laisse ouvert pour l'instant, vu que j'ai pas encore fini (j'ai pas fait la pratique du chapitre http et Firebase), ON SAIT JAMAIS !

Merci d'avoir pris le temps d'aller voir et de me dépatouiller <3

Bon, bah ça n'aura pas été long :/

Alors le code du chapitre Http et Firebase fonctionne très bien, mais y a juste un bug Une fois que j'ai tout connecté et mis en place mes fonctions save, get, fetch etc, le prof dit de vider l'array appareils qu'on avait en dur. Donc de passer de ça :

private appareils = [
    {
      id: 1,
      name: 'Lave-linge',
      status: 'éteint'
    },
  ]

à ça :

private appareils = [  ]

Mais quand je fait ça, j'ai un problème lors de l'enregistrement d'un nouvel appareil.

En effet, dans la méthode d'ajout, on définit le numéro de l'id en récupérant la longueur du tableau - 1 et on rajoute + 1 pour le nouvel id :

// Pour le calcul de l'id, je récupère le dernier id enregistré et j'y ajoute + 1
    appareilObjet.id = this.appareils[(this.appareils.length - 1)].id + 1;

Sauf que si mon tableau vaut 0, ça ne fonctionne pas :/

J'ai ce message d'erreur dans la console :

ERROR TypeError: "this.appareils[(this.appareils.length - 1)] is undefined"

Du coup, à l'aide de mes deux petits neurones, je me dis : faut faire une condition.

Si le tableau est vide, l'id prend 0

S'il n'est pas vide, on repart sur la formule donnée et ça roule.

Sauf que je sais pas si c'est bon (ça me paraît logique de faire comme ça mais j'ai un doute) et si c'est bon, je vois pas trop comment coder ça en fait n___n"

Voilà, c'est pas bloquant en soi parce qu'en laissant un appareil, ça fonctionne super bien, c'est juste qu'en partant de zéro j'ai ce petit bug et qu'il en parle pas du tout dans le site, alors à moins que j'ai (encore et encore) raté un truc, je ne vois pas xD

-
Edité par HappyBadger 10 décembre 2019 à 15:41:32

Oui, bien sûr que c'est bon. Tu peux essayer

appareilObjet.id = this.appareils.length > 0 ? this.appareils[this.appareils.length - 1].id + 1 : 1;

Si le tableau n'est pas vide on utilise la formule, sinon on lui attribue "1" comme id

Super, ça fonctionne, merci !

Du coup, j'ai commencé l'application de la bibliothèque, et pour l'instant ça se passe bien, je bloque juste sur un truc : l'import de DataSnapshot depuis firebase.data.DataSnapshot.

J'ai essayé

import { DataSnapshot } from 'firebase.database.DataSnapshot';

Mais ça ne donne rien. Après une recherche sur Google, je suis tombée sur cette syntaxe :

import DataSnapshot = 'firebase.database.DataSnapshot';

Mais ça ne marche pas mieux.

J'ai été jusqu'à déclarer :

DataSnapshot = 'firebase.database.DataSnapshot';

directement dans ma classe, sous books et bookSubject, mais ça ne fonctionne toujours pas :/ ça me souligne toujours DataSnapshot plus bas dans mon code et quand je laisse la souris au dessus, ça me dit " Cannot find name 'DataSnapshot' "

Si tu as une idée, je suis toujours preneuse

Oui, j'ai bien fait le 'npm install firebase --save' (qui n'a pas fonctionné du premier coup d'ailleurs)

En plus du coup, maintenant que j'ai fini de codé la partie jusqu'à storage, je ne peux pas vérifier car j'ai un message de warning dans la console :

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

Typescript:
import * as firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

EDIT : petite faute de frappe, une majuscule qui s'est glissé dedans.

Mais les problèmes s'accumulent ! Je n'ai pas accès au visu d'un livre seul, alors que j'ai accès à la liste, que je suis connectée et que les deux pages sont protégées de la même manière... étrange... La console dit que je n'ai pas la permission d'aller voir le détail de chaque livre

EDIT 2 :

J'ai finalement pu importer DataSnapshot, j'avais 2 ' ' qui trainaient et que je ne voyais pas, même en ayant le nez dessus u___u

Mais ça ne résout toujours pas mon problème d'affichage de livre, je peux voir la liste mais j'ai toujours rien qui s'affiche quand je clique sur un livre en particulier, comme si je ne récupérais rien dans ma base. Et toujours ce message d'erreur dans la console :/

ERROR Error: "Uncaught (in promise): Error: permission_denied at /books/1: Client doesn't have permission to access the desired data.
errorForServerCode@http://localhost:4200/vendor.js:103173:17
onComplete@http://localhost:4200/vendor.js:111513:51
startListening/<@http://localhost:4200/vendor.js:115051:44
./node_modules/@firebase/database/dist/index.cjs.js/PersistentConnection.prototype.sendListen_/<@http://localhost:4200/vendor.js:114195:32
./node_modules/@firebase/database/dist/index.cjs.js/PersistentConnection.prototype.onDataMessage_@http://localhost:4200/vendor.js:114437:27
./node_modules/@firebase/database/dist/index.cjs.js/Connection.prototype.onDataMessage_@http://localhost:4200/vendor.js:113754:14
./node_modules/@firebase/database/dist/index.cjs.js/Connection.prototype.onPrimaryMessageReceived_@http://localhost:4200/vendor.js:113748:18
./node_modules/@firebase/database/dist/index.cjs.js/Connection.prototype.connReceiver_/<@http://localhost:4200/vendor.js:113649:27
./node_modules/@firebase/database/dist/index.cjs.js/WebSocketConnection.prototype.appendFrame_@http://localhost:4200/vendor.js:113241:18
./node_modules/@firebase/database/dist/index.cjs.js/WebSocketConnection.prototype.handleIncomingFrame@http://localhost:4200/vendor.js:113291:22
./node_modules/@firebase/database/dist/index.cjs.js/WebSocketConnection.prototype.open/this.mySock.onmessage@http://localhost:4200/vendor.js:113188:19
wrapFn@http://localhost:4200/polyfills.js:4426:39
invokeTask@http://localhost:4200/polyfills.js:3626:31
onInvokeTask@http://localhost:4200/vendor.js:73280:33
invokeTask@http://localhost:4200/polyfills.js:3625:60
runTask@http://localhost:4200/polyfills.js:3403:47
invokeTask@http://localhost:4200/polyfills.js:3700:34
invokeTask@http://localhost:4200/polyfills.js:4838:14
globalZoneAwareCallback@http://localhost:4200/polyfills.js:4864:27
"

D'après le message j'en conclus que c'est un problème de droit mais je ne vois pas bien d'où ça vient, tout ça :/

Lien du repo : My Library

-
Edité par HappyBadger 11 décembre 2019 à 14:42:33

Bonjour,

J'ai le même souci que toi.
J'ai une liste mais vide, aucun intitulé ne s'affiche. Si je clique dessus, je vois bien que l'ID est récupéré dans l'URL mais cela ne récupère pas les données. Toi aussi ?

J'ai ce message d'erreur :

Bon je ne t'aide pas, désolée

Je regarderai la doc firebase demain.

Bon courage !

Alors de mon côté, je récupère bien les livres, ils s'incrémentent dans ma liste, par contre je ne peux pas aller sur single-book en gros, je ne peux pas voir le détail d'un livre (genre sa couverture et son résumé).

Là pour l'instant je suis en pause car sans visu, ça va être compliqué de vérifier que l'image s'uploade bien, donc si quelqu'un avait le temps de jeter un œil, ça serait cool

En relisant le message d'erreur, je me demande si le lien ne vient pas de ma configuration de Firebase :

ERROR Error: "Uncaught (in promise): Error: PERMISSION_DENIED: Permission denied
./node_modules/@firebase/database/dist/index.cjs.js/Repo.prototype.callOnCompleteCallback/<@http://localhost:4200/vendor.js:115371:33
exceptionGuard@http://localhost:4200/vendor.js:103216:9

Mais là, j'avoue que je ne vois pas comment rectifier ça, je ne suis pas encore très à l'aise sur Firebase :/

@byrachel, de ce que je lis, sans voir le code, je dirais que y a un soucis au niveau de la récupération du titre et que donc ta variable est vide, d'ou le null ?

EDIT :

Forcément, avec la bonne info ça marche mieux, je peux passer à la suite héhéhéhéhé !!!

-
Edité par HappyBadger 13 décembre 2019 à 9:58:16

Ah génial que tu aies résolu ton histoire !

Je suis bien en real-time database, il faut que je trouve pourquoi ça reste "undefined" alors que tout est bien créé en BDD.

Belle continuation !

HappyBadger a écrit:

Y  moyen de voir ton code quelque part byrachel ? 

Hello,

Ca y est c'est fonctionnel pour cette partie.
Je cherche maintenant à n'afficher que les articles d'une seule catégorie.

J'ai mis mon code sur Github : https://github.com/byrachel/devio

J'ai hésité à faire les cours O'clock, j'ai finalement choisi des cours en présentiel, je viens juste de terminer. Tu en as été contente ?

Concernant O'clock, c'était super, y avait un suivi de malade, on n'était jamais seul ou isolé, quand on posait une question dans l'heure on avait une réponse, donc tu restais pas bloqué pendant des heures. Les formateurs étaient souvent dispo jusqu'à 21h, donc tu avais bien le temsp de faire les "devoirs" et de poser des questions si t'avais du mal. Après ,c'était intense, faut pas se leurrer, mais franchement, si c'était à refaire je retournerai chez eux D'ailleurs je me tâte à faire leur formation fullstack JS, si j'arrive à avoir le financement ça me plairait bien de refaire un saut chez eux, j'ai adoré leur pédagogie

Je vois que ton repo est sur un projet personnel, je ne te garantis rien mais je vais y jeter un œil, peut-être que je verrais ce qui ne va pas (mais bon, je suis méga débutante en Angular alors je ne te promets rien xD)

Merci à toi, j'ai évité pleins de galères intensives à te lire ainsi que les intervenants...
Désolé si ça fait un peu déterrage

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.