Hello,
De nouveau merci pour ce tuto que je viens de finir après l'avoir picoré pendant quelques semaines.
Je confirme ma première impression, il est très complet. Je pense que cela a été un sacré boulot de l'écrire !
Le corollaire est qu'il est peut-être un peu ardu pour des personnes découvrant complètement
Angular, ce qui n'était pas mon cas.
Pour contribuer, voici quelques remarques/bugs concernant les codes fournis :
Lorsque l'on initialise un projet Angular, il nous est désormais demandé :
Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
This setting helps improve maintainability and catch bugs ahead of time.
Si on répond "yes", il y a ensuite des problèmes avec toutes les variables déclarées sans être initialisées, sauf si leur type accepte la valeur
undefined.
Cela vient de
TypeScript :
https://www.typescriptlang.org/docs/...cript-2-7.htmlDe même dans le chapitre
XIV-B. Two-way Data Binding, j'ai été obligé de renommer la fonction
réceptionFromChild(...) du script
parent.component.ts du fait de l'accent.
Je ne sais pas si cela venait du mode de strict, mais je pense qu'il vaut mieux éviter d'une manière générale les caractères spéciaux dans le code.
Au bout d'un moment, j'ai refusé le mode strict pour éviter ces problèmes avec les code fournis avec le tuto.
XIV-C-2. PratiqueDans le script
comp2.component.ts, il y a une erreur avec la ligne :
this.stored1Service.emitDataSubject(null);
La raison de l'erreur est que
null n'a pas le type demandé (
IUser)
Une solution possible : rendre tous les attributs du modèle
user optionnels :
1
2
3
4
5
| export interface IUser {
name?: string;
firstname?: string;
genre?: 'madame' | 'monsieur' | 'mademoiselle';
} |
Et remplacer la ligne en erreur par :
this.stored1Service.emitDataSubject({});
XVIII-C. SchémaDans un des commentaires de
app.component.html, on peut lire :
<!-- /comp21, son composant(ou page) sera projeté dans le <router-outlet> du composant racine: app.component.html, donc ici même (voir plus bas) -->
Ce n'est pas le cas, car il n'y a pas de composants "comp21". Mais ce n'est qu'un commentaire resté d'une première version je suppose
XIX-A-2. PratiqueJ'ai rencontré une erreur étrange dans le script
/register/form-register/form-register.component.ts
Il s'agit de la ligne :
import { MustMatch } from '../validators/must-match.validator';
Générant un :
1
2
| Error: ./src/app/register/form-register/form-register.component.ts
Module not found: Error: Can't resolve '../validators/must-match.validator' in '/home/.../angular-form1/src/app/register/form-register' |
J'ai réglé le bug en renommant le script
must-match.validator en
must-match-validator.
XXIV-E-1-c. (A3) Importer dans le fichier module du produit le nouveau packageIl y a une erreur de chemin dans
/features/product/product.module.ts :
import { ProductPdfViewerComponent } from './components/product-pdf-viewer/product-pdf-viewer.component';
Il faut mettre :
import { ProductPdfViewerComponent } from './product-pdf-viewer/product-pdf-viewer.component';
XXVII-B. SchémaDans
/src/app/app.module.ts, il faut remplacer :
import { StoredService } from './button-toggle-mat/services/stored.service';
Par :
import { StoredService } from './services/stored.service';
De même, dans
/src/app/button-toggle-mat/components/button-toggle-mat/button-toggle-mat.component.ts, il faut remplacer :
import { StoredService } from '../../services/stored.service';
Par :
import { StoredService } from '../../../services/stored.service';
Et dans angular.json, j'ai aussi été obligé d'augmenter les "budgets" par passer l'erreur :
Warning: /home/.../src/app/button-toggle-mat/components/button-toggle-mat/button-toggle-mat.component.css exceeded maximum budget. Budget 6.00 kB was not met by 65.96 kB with a total of 71.96 kB.
Peut-être est-ce lié au fait que j'ai choisi l'option css et non scss lors de la création de l'application.
XXVIII-D. ngx-deploy-dockerLorsque je lance :
J'obtiens :
1
2
| An unhandled exception occurred: Cannot read property 'Workspace' of undefined
See "/tmp/ng-PnydI4/angular-errors.log" for further details. |
Et quand je vais voir le log :
1
2
3
4
5
6
7
8
9
10
11
| [error] TypeError: Cannot read property 'Workspace' of undefined
at Object.<anonymous> (/home/.../angular-ngx-docker1/node_modules/ngx-deploy-docker/src/deploy/builder.js:28:57)
at Generator.next (<anonymous>)
at /home/.../angular-ngx-docker1/node_modules/ngx-deploy-docker/src/deploy/builder.js:7:71
at new Promise (<anonymous>)
at __awaiter (/home/.../angular-ngx-docker1/node_modules/ngx-deploy-docker/src/deploy/builder.js:3:12)
at /home/.../angular-ngx-docker1/node_modules/ngx-deploy-docker/src/deploy/builder.js:26:67
at onInput (/home/.../angular-ngx-docker1/node_modules/@angular-devkit/architect/src/create-builder.js:151:30)
at SafeSubscriber._next (/home/.../angular-ngx-docker1/node_modules/@angular-devkit/architect/src/create-builder.js:65:29)
at SafeSubscriber.__tryOrUnsub (/home/.../angular-ngx-docker1/node_modules/@angular-devkit/architect/node_modules/rxjs/internal/Subscriber.js:205:16)
at SafeSubscriber.next (/home/.../node_modules/@angular-devkit/architect/node_modules/rxjs/internal/Subscriber.js:143:22) |
Les configurations manuelles de Docker expliquées dans le chapitre précédent ont fonctionné, donc c'est ok pour moi.
XXIX. Étude de cas n°1 : authentification + accès sécurisé à une APIDans
pages/partials/header/header.component.html, il faut mettre "click" et non "clic".
Dans le fichier
users.json fourni côté
node.js, le mot de passe fait moins de 6 caractères alors qu'on a un
Validators.minLength(6)
Il suffit d'en saisir un plus long dans le fichier.
XXXI. Gestion dynamique des metas tags pour le SEOLorsque l'on revient en
page1 après être passé par la
page2, les
title et
meta description restent ceux de
page2.
C'est logique et en même temps contre-intuitif car je m'attendais à retrouver celles de
app.component.ts.
Donc il vaut mieux définir des valeurs pour chaque page.
XXXII. Les Progressive Web App (PWA)Ce n'est pas une erreur mais il n'est pas spécifié qu'il faut ajouter dans
app.module.ts :
1
2
3
| import { HttpClientModule } from '@angular/common/http';
...
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
], |
Par ailleurs, je n'ai pu tester l'installation de la PWA sur mon PC via firefox (problème connu), mais pas non plus via chromium qui pourtant fonctionne généralement comme chrome. Cela vient peut-être du fait que ma machine est sur GNU/Linux ou bien de l'absence d"https" au début de l'url. Je n'ai pas installé le vrai chrome pour vérifier.
Il y a peut-être eu d'autres petits problèmes que j'ai oublié de noter. Dans un sens, cela oblige à chercher et donc à mieux comprendre le fonctionnement d'Angular
Je pense qu'il faut pratiquer un bout de temps Angular pour que tout cela devienne naturel.
Encore merci pour ce tutoriel !
2 |
0 |
Bonjour chers membres du Club,
Retrouvez les meilleurs cours et tutoriels pour le développement avec Angular 
