Discussion :

[dukoid]

Bonjour chers membres du Club,

Je vous propose ce tutoriel sur Angular dans lequel tous les principaux concepts sont présentés :

Introduction au framework web Angular

Ce tutoriel est sous la forme d'un mémo présentant les chapitres les plus importants du framework Angular.
Chaque chapitre est composé de codes source agrémentés de diverses explications et points-clés à connaitre.
Ce mémo est destiné aux développeurs Angular débutants et aussi confirmés.
Connaissances prérequises :

• TypeScript : débutant ;
• Angular : débutant.

Profitez de cette discussion pour laisser vos commentaires.


Retrouvez les meilleurs cours et tutoriels pour le développement avec Angular

[egann538]

Très bon exposé des fonctionnalités principales d'Angular. Et plus rapide à lire que la documentation officielle

[crevecoeurj]

Super boulot dukoid.

ça me titille depuis longtemps de me mettre à Angular /Typescript...
C'est une bonne approche.

[Fab le Fou]

Bonjour,

Je viens de débuter la lecture de ce tutoriel qui me semble déjà de très grande qualité.
Merci pour le partage !

Je signale déjà 2 liens erronés rencontrés en début de tutoriel :

Angular elements - Composant web réutilisable : https://angular.io/guide/éléments ;

La bonne url : https://angular.io/guide/elements sans les accents

Éditeur de code online : https://stackblitz.com/- ;

Là l'url est ok. C'est juste le tiret après le dernier slash qui est en trop.

[dukoid]

Merci à tous pour vos avis positifs

Fab, merci pour le retour. je vais corriger ça dès que je peux..

[Fab le Fou]

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 :

Code :

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

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 :

Code :

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

1
2
3
4
5
export interface IUser {
    name?: string;
    firstname?: string;
    genre?: 'madame' | 'monsieur' | 'mademoiselle';
}

Et remplacer la ligne en erreur par :

Code :

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

this.stored1Service.emitDataSubject({});

XVIII-C. Schéma

Dans un des commentaires de app.component.html, on peut lire :

Code :

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

<!-- /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 :

Code :

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

import { MustMatch } from '../validators/must-match.validator';

Générant un :

Code :

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

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 :

Code :

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

import { ProductPdfViewerComponent } from './components/product-pdf-viewer/product-pdf-viewer.component';

Il faut mettre :

Code :

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

import { ProductPdfViewerComponent } from './product-pdf-viewer/product-pdf-viewer.component';

XXVII-B. Schéma

Dans /src/app/app.module.ts, il faut remplacer :

Code :

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

import { StoredService } from './button-toggle-mat/services/stored.service';

Par :

Code :

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

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 :

Code :

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

import { StoredService } from '../../services/stored.service';

Par :

Code :

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

import { StoredService } from '../../../services/stored.service';

Et dans angular.json, j'ai aussi été obligé d'augmenter les "budgets" par passer l'erreur :

Code :

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

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 :

Code :

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

ng deploy

J'obtiens :

Code :

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

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 :

Code :

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

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 :

Code :

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

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 !