Discussion :

[Gluups2]

Bonjour tout le monde,

J'ai lâché Angular quelques années, et là je démarre sur une machine, dont le SSD vient d'être remplacé (si seulement ça pouvait durer plus longtemps ...), et par la même occasion Windows 11 a été installé dessus.

J'ai réalisé le "tutorial" des héros deux ou trois fois, et puis comme il est arrivé un moment où je ne savais plus comment corriger une erreur, je me suis dit que ça pouvait être bien d'avoir une version "modèle" basée sur ce que propose Google, dans le fichier toh-pt6.zip.

Bon, télécharger le ZIP c'est bien, après il faut l'installer, histoire d'avoir un projet Visual Studio avec ça dedans.

Dans Visual Studio 2022 community, j'utilise le type de projets "ASP.NET Core avec Angular" (il faut aller fouiller quelque part, pour voir si il y a un numéro de version ?)

À ce que je comprends, pour rapprocher les deux, il faut aller dans le répertoire ClientApp, remplacer le répertoire src par celui du ZIP, et pendant qu'on y est on peut aussi transférer e2e.

Je me suis retrouvé avec un projet qui avait besoin de angular-in-memory-web-api, qu'il n'avait pas.

Alors, j'ai essayé de suivre ça :
https://blog.logrocket.com/angular-i...is-in-angular/

Là-dedans il a fallu taper

Code :

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

ng new angular-api-backend

et c'est là que ça s'est gâté, d'après les messages parce qu'il fallait jasmine-core au moins en version 3.8, alors que je l'ai en 3.5.0

mais alors si je le désinstalle et qu'après je tape

Code :

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

npm install jasmine-core@last

ça me réinstalle la même version.

Il a été question de

Code :

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

npm install --save-dev jasmine

mais ... pareil.

Lors des compilations j'avais bien des messages qui me signalent d'autres paquets obsolètes, mais je commencerais bien par ce qui empêche de compiler le "projet modèle".

Ou je me suis trompé de fichier ?
toh-pt6, c'est dans "Get data from a server"

Il est vrai que dans ce que j'ai fait moi-même j'en étais arrivé deux sections avant, ce qui peut expliquer que la gestion de données en mémoire ne soit pas encore installée.

Voilà, donc classiquement, la question qui se pose, c'est "par quel bout est-ce qu'on attaque ça ?"

Je devinerais bien qu'il faut installer une version plus récente de Jasmine-core, mais ... par npm ?

[duke666]

houla, je ne suis pas assez callé sur les associations entre back et front.

mais ce que je sais, une astuce consiste à supprimer le dossier /node-module du projet
et de faire : npm install

ça devrait installer l'ensemble des packages avec les bonnes versions

[Gluups2]

Bonjour,

Ah oui, d'ailleurs j'ai vu une vidéo qui rappelle ça, là je me suis dit que ça m'aurait aidé il y a cinq ans.

Si je ne confonds pas, ce que tu dis là permet de réinstaller les références qui sont mentionnées dans le fichier package.json

Apparemment, je crois que le plus sain, c'est-à-dire le plus clair, serait que je refasse mes manips avec le fichier ZIP de là où j'étais arrivé, ça doit être toh-pt4.zip, histoire de voir si il y a des problèmes avec ça, et qu'ensuite j'ouvre un fil sur l'installation de angular-in-memory-web-api

Je dois avouer que j'ai voulu aller trop vite, et du coup j'ai mélangé deux problèmes dans le fil, en ne m'en rendant qu'à moitié compte. Ce qui n'est jamais une bonne chose.

Bon, je vais déjà tâcher d'intégrer le toh-pt4, et après je viens dire où j'en suis.
C'est vrai que c'est le premier sujet, et que l'autre, in-memory, je l'ai découvert en cours de route.

[duke666]

Si je ne confonds pas, ce que tu dis là permet de réinstaller les références qui sont mentionnées dans le fichier package.json

bien ça !

[Gluups2]

Bon, j'ai fonctionné avec le fichier toh-pt4, et il y a déjà de quoi faire.

Code :

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

1
2
3
4
5
6
7
8
9
10
Error: Module not found: Error: Can't resolve 'src/polyfills.ts' in 'C:\Projects Visual Studio\Web\Angular_23_04_Model\Angular_23_04_Model\ClientApp'
 
Error: error TS6053: File 'C:/Projects Visual Studio/Web/Angular_23_04_Model/Angular_23_04_Model/ClientApp/src/polyfills.ngtypecheck.ts' not found.
  The file is in the program because:
    Root file specified for compilation
 
 
Error: error TS6053: File 'C:/Projects Visual Studio/Web/Angular_23_04_Model/Angular_23_04_Model/ClientApp/src/polyfills.ts' not found.
  The file is in the program because:
    Root file specified for compilation

Ici, quelqu'un a affirmé s'en être sorti en renommant app.js en app.jsx, et quelqu'un lui a demandé d'en dire plus, mais sans succès.

De mon côté, je n'ai pas de fichier app.js

Ah, je précise : échec de compilation.

***
Ici j'ai trouvé quelque chose à ce sujet.
Je suis prudent car on y modifie les fichiers tsconfig.app.ts et tsconfig.spec.ts

Dans ClientApp j'ai tsconfig.json :

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
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2022",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

et tsconfig.spec.json :

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
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

Ah oui je vois qu'il y a de la lecture de suggérée, là-dedans.

[duke666]

déjà, est ce que le npm install fonctionnne?

[Gluups2]

Tout dépend de ce que tu appelles fonctionner.

Si c'est se terminer sans erreur, non.

[duke666]

faut résoudre ça en preums

[Gluups2]

Tiens c'est pas con, ce que tu dis là.
Alors OK, il faut que je me tape la doc de tsconfig.
Si quelqu'un a envie de me souffler quelque chose de plus rapide ...

[Gluups2]

Bonjour,

Oui alors dans un fichier de config, il y a en tête un lien de proposé pour lire une doc.

C'est certainement intéressant, mais pour faire démarrer le projet, pas forcément le plus direct.

Sur l'écran il y a deux messages d'erreur d'affichés, mentionnant deux fichiers manquants, dont polyfills.ts

J'ai copié dans le répertoire indiqué le fichier polyfills.ts récupéré d'une autre version du projet (parce qu'avant de vouloir installer le modèle il m'est quand même arrivé de mener à bien quelques-uns des ateliers, donc il y avait tout dedans).

Dès que j'ai fait ça, ça a ronronné une minute ou deux, et puis ça a affiché la liste des héros.

Donc, je vais pouvoir marquer ce fil résolu. Peut-être serait-ce un peu hâtif de dire tout de suite que ça y est, je maîtrise Angular, mais enfin je vais avoir une base pour comparer ce que j'aurai tapé avec ce qui fonctionne.

Maintenant que j'ai dit ça je remarque quand même des petites choses qui m'étonnent.
L'écran réclamait aussi polyfills.ngtypecheck.ts, celui-là si je l'ai il est bien caché, mais ça n'a pas l'air de poser de problème.

Par ailleurs, dans la fenêtre d'erreurs de Visual Studio (je rappelle que le sujet est de finaliser un type de projet Visual Studio pour démarrer Angular), j'ai deux fois l'erreur TS2037, à savoir qu'il manque protractor
"(TS) Cannot find module 'protractor' or its corresponding type declarations."

Dans la mesure où ça n'a pas empêché le projet d'afficher la page web souhaitée, je dirai qu'il y avait une erreur bloquante, que j'ai corrigée, et que maintenant il reste à peaufiner.

Donc déjà voir à quoi sert protractor, ça doit bien être écrit quelque part, et puis alors ...

D'habitude, quand je compile le projet comme expliqué dans le "turorial" des héros sur angular.io, ça m'affiche une liste longue comme le bras de modules périmés qu'il s'agit de s'occuper "urgemment vite fait" de mettre à jour.
Je peine à croire qu'il soit plus rapide de mettre à jour un type de projet Visual Studio, qui si je ne m'abuse était stocké sur ma machine, qu'un tutorial sur le web, auquel Google a accès en permanence.

Alors je sais, urgemment vite fait, ça rappelle des souvenirs à ceux qui ont vu une certaine Maouie-Téouèse tenir la permanence aux urgences de l'hôpital. C'est connu, ça, pas vrai ?
Mais quand même, ça craint, non ?

Alors est-ce qu'il y a quelqu'un ici pour en penser quelque chose, de ça ?
Si le projet ne m'affiche pas d'erreurs, est-ce que ça veut dire que par miracle ma machine était plus à jour que le site Google, ou comme je crois qu'il y a un loup quelque part, et que je ne regarde pas au bon endroit ?

[Gluups2]

Question complémentaire : ma première tentative a foiré par échec pour installer angular-in-memory-web-api

Il y a cinq ans j'ai eu des soucis avec ça, déjà.

Est-ce que d'autres ont pu installer ça sans problème, est-ce qu'il y a des prérequis à signaler, par exemple au niveau du matériel ? J'ai 64 Go de mémoire ça ne devrait pas nuire, mais si d'entrée de jeu il faut autre chose, c'est aussi bien de le savoir, et je me dis qu'en cinq ans on a dû avoir le temps de baliser le terrain.

[Gluups2]

Donc déjà voir à quoi sert protractor, ça doit bien être écrit quelque part

Protractor sert à mener les tests unitaires sous Angular.

Son installation commence très fort :

Code :

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

npm WARN deprecated har-validator@5.1.5: this library is no longer supported

Bon, et un peu plus bas :

Code :

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

13 vulnerabilities (11 moderate, 1 high, 1 critical)

Ah il m'avait bien semblé que j'avais vu passer des choses comme ça ...

Comment ça se gère, ça, je déclare l'installation du projet résolue et j'ouvre un nouveau fil pour protractor ?

Un rapporteur ...
Dites voir, c'est quoi cette idée de mesurer des angles ?
Dans la liste des héros, par exemple, je vais trouver beaucoup d'angles, à mesurer ?

À part ça il m'avait bien semblé avoir vu quelque part que protractor et rapporteur étaient liés.
Là :
https://expliquant.com/pourquoi-rapp...our-angularjs/

On y lit ça :

Plus tôt cette année, l’équipe Angular a annoncé qu’elle cesserait le développement de l’outil de test automatisé de bout en bout open source Protractor à la fin de 2022. En tant qu’outil populaire et établi de longue date pour les tests automatisés d’applications Web, Protractor a été l’un des premiers pionniers. en permettant des tests de bout en bout axés sur le comportement.

Ah ... Ouvrir un fil dédié sur protractor, pas forcément utile, si ?
Ou pour lui trouver un remplaçant peut-être.

Au fait, une petite question au passage ... Quelquefois, c'est plus animé, ici ?
Avec suffisamment de gens qui répondent pour que parmi eux il y en ait qui sachent ?

[Gluups2]

Ah, je me rends compte que ça ne rime plus à grand-chose de laisser ce fil ouvert, puisque ça y est jusqu'à la section 5 du Tour of Heroes, ça baigne.

J'ai un souci avec la section 6, pour obtenir des données depuis le web, mais j'ai ouvert un autre fil pour ça. Ça m'arrangerait d'avoir des réponses, par exemple.

Alors, je vais marquer ce fil-ci résolu.