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.html
De 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. Pratique
Dans 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�ma
Dans 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. Pratique
J'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 package
Il 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�ma
Dans /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-docker
Lorsque 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 API
Dans 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 SEO
Lorsque 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
4
5
6
7
| 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 !
Tutoriel sur une introduction au framework web Angular
Retrouvez les meilleurs cours et tutoriels pour le d�veloppement avec Angular
R�pondre avec citation
Partager