Je suis en train de voir le cours "Complétez vos connaissances sur Angular". Ayant perdu bêtement les fichiers de "Débutez avec Angular", j'ai copié les fichiers mis à disposition sur Github. C'est là que ça a dû merder... J'ai passé trois jours à relire mon code pour essayer de le comprendre. Aujourd'hui, j'ai trois messages d'erreurs, qui semblent venir du même endroit. Deux font référence à la même ligne :
NG8001: 'app-face-snap' is not a known element: 1. If 'app-face-snap' is an Angular component, then verify that it is part of this module. 2. If 'app-face-snap' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]
NG8002: Can't bind to 'faceSnap' since it isn't a known property of 'app-face-snap'.
1. If 'app-face-snap' is an Angular component and it has 'faceSnap' input, then verify that it is part of this module.
2. If 'app-face-snap' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. [plugin angular-compiler]
src/app/face-snap-list/face-snap-list.component.html:3:19:
3 │ <app-face-snap [faceSnap]="faceSnap"></app-face-snap>
╵ ~~~~~~~~~~~~~~~~~~~~~
Et la troisième :
TS-992012: Component imports must be standalone components, directives, pipes, or must be NgModules. [plugin angular-compiler]
src/app/landing-page/landing-page.component.ts:7:24:
7 │ imports: [RouterLink, Router],
╵ ~~~~~~
Voici mon fichier face-snap-list.component.html :
@for (faceSnap of faceSnaps; track faceSnap.title) {
<app-face-snap [faceSnap]="faceSnap"></app-face-snap>
}
J'espère que vous aurez assez d'éléments pour m'aider. J'ai retourné le code dans tous les sens depuis trois jours, je relis des tutos sur Angular, rien n'y fait !
Hello je crois que tu n'as pas partagé le bon component pour LandingPageComponent.
Je suis loin d'avoir le niveau pour te débugger mais de ce je vois dans l'erreur :
TS-992012: Component imports must be standalone components, directives, pipes, or must be NgModules. [plugin angular-compiler]
src/app/landing-page/landing-page.component.ts:7:24:
7 │ imports: [RouterLink, Router],
╵ ~~~~~~
Tu as un soucis de module, c'est un peu le problème entre le 1er et le 2eme tuto sur angular (les deux ne sont plus raccord).
Le premier est sur angular 17 et l'autre sur une version précédente (ce qu'on récupère sur github tourne sur angular 12...c'est pas gênant jusqu'à la 16) et entre les deux il y a une différence majeur, les modules à mettre dans app.module.ts. Ce qui n'est plus le cas sur Angular 17, les composant sont standalone.
Tu n'as plus besoin de rajouter dans les app.modules.ts, mais il faut rajouter les imports dans le fichier concerné, LandingPageComponent.ts et surtout rajouter
@Component({
selector: 'app-face-snap-list',
standalone: true,
imports: [...imports à mettre si besoin],
templateUrl: './face-snap-list.component.html',
styleUrls: ['./face-snap-list.component.scss'],
})
Et je pense que pour plusieurs de tes erreurs, tu vas avoir besoin de rajouter cette ligne dans tes components :
standalone: true,
J'espère que ça t'aidera en partie, on a assez peu d'aide sur ce forum j'ai l'impression.
Merci pour ta réponse, je suis désolé de ne pas t'avoir répondu plus tôt, je viens juste d'en prendre connaissance, j'avais laissé tout ça de côté, de guerre lasse.
Tu me confirmes ce que je ressentais : il y a un problème de version entre les deux cours sur Angular, et c'est là que ça a dû merder. Les deux cours ne sont pas raccord.
En revanche, je ne suis pas sûr de bien comprendre tes conseils. La ligne "standalone: true" est déjà dans le code, et le @Component est déjà tel que tu le décris. Ça ne marche toujours pas, et j'ai les mêmes erreurs. En revanche, en relisant mon code, je vois que j'ai deux modules qui semblent faire doublon, et je ne sais pas comment supprimer l'un ou l'autre sans tout faire foirer : app.routes.ts et app-routing.module.ts.
Le premier (app.routes.ts) est pratiquement vide, mais déclare une constante. Je ne sais pas ce qui peut se passer si je le supprime, ou comment le remplacer par l'autre.
J'avoue qu'il est difficile de comprendre comment Angular renvoie d'un fichier à l'autre, en se contentant des explications de Will.
J'ai été tenté de recommencer tout à zéro pour voir où j'ai merdé. C'est ce que je m'apprêtais à faire quand j'ai découvert ton message, d'ailleurs. Mais tu m'en as dissuadé : le problème vient bien du hiatus entre les deux cours sur Angular.
... Si je recopie le contenu de app-routing.module.ts sur app.routes.ts, ça a l'air de marcher mieux. Mais que penses-tu de ce message d'erreur :
X [ERROR] TS-992012: Component imports must be standalone components, directives, pipes, or must be NgModules. [plugin angular-compiler]
src/app/landing-page/landing-page.component.ts:8:24:
8 │ imports: [RouterLink, Router],
╵ ~~~~~~
Il souligne "Router", on dirait que c'est ce qui le gêne. Pourquoi ?
Oui, dit comme ça, ça a l'air facile et évident. Sauf qu'il y a au moins un fichier qui fait référence à app.routes.ts. J'ai pu trouver facilement lequel, il s'agit de app.config.ts, j'ai donc fait la modification, et je peux supprimer le fichier.
Sauf que... guess what ? Je reviens à mon point de départ : toujours les mêmes erreurs :
X [ERROR] NG8001: 'app-face-snap' is not a known element:
1. If 'app-face-snap' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'app-face-snap' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]
src/app/face-snap-list/face-snap-list.component.html:3:4:
3 │ <app-face-snap [faceSnap]="faceSnap"></app-face-snap>
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component FaceSnapListComponent.
src/app/face-snap-list/face-snap-list.component.ts:8:15:
8 │ templateUrl: './face-snap-list.component.html',
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
X [ERROR] NG8002: Can't bind to 'faceSnap' since it isn't a known property of 'app-face-snap'.
1. If 'app-face-snap' is an Angular component and it has 'faceSnap' input, then verify that it is included in the '@Component.imports' of this component.
2. If 'app-face-snap' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component. [plugin angular-compiler]
src/app/face-snap-list/face-snap-list.component.html:3:19:
3 │ <app-face-snap [faceSnap]="faceSnap"></app-face-snap>
╵ ~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component FaceSnapListComponent.
src/app/face-snap-list/face-snap-list.component.ts:8:15:
8 │ templateUrl: './face-snap-list.component.html',
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
X [ERROR] TS-992012: Component imports must be standalone components, directives, pipes, or must be NgModules. [plugin angular-compiler]
src/app/landing-page/landing-page.component.ts:8:24:
8 │ imports: [RouterLink, Router],
╵ ~~~~~~
Je continue de chercher, et je vous remercie tous·tes pour vos réponses, mais je tourne en rond.
X [ERROR] NG8001: 'app-face-snap' is not a known element: 1. If 'app-face-snap' is an Angular component, then verify that it is included in the '@Component.imports' of this component. 2. If 'app-face-snap' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]
As-tu vérifié qu'il y a un import de app-face-snap ?
Le GitHub que j'ai importé ne fonctionne pas non plus, il y a une incohérence de version entre la première partie du cours et la deuxième. Voici le lien GitHub :
... J'ai importé CommonModule dans face-snap.component.ts, et je n'ai plus qu'une erreur ! Mais je n'arrive pas à la comprendre :
Dans landing-page.component.ts, angular ne veut pas importer Router :
X [ERROR] TS-992012: Component imports must be standalone components, directives, pipes, or must be NgModules. [plugin angular-compiler]
src/app/landing-page/landing-page.component.ts:9:24:
9 │ imports: [RouterLink, Router, FaceSnapComponent],
╵ ~~~~~~
Comment dois-je faire ? Je constate pourtant que RouterLink, lui, passe crème. Pourquoi ?
J'avance : j'ai supprimer un import de "Router" quelque part, il semble que ce soit dans landing-page.component.ts, et ça s'est mis à fonctionner. L'application fonctionne à présent presque normalement. Le problème, c'est que, à force de tâtonnements, je ne me souviens plus trop ce que j'ai bidouillé pour y arriver. En fait, il ne doit y avoir aucun import dans le LandingPageComponent. Je vais vérifier les imports qui sont en trop.
Il reste quelques instructions que j'ai dû supprimer pour que ça marche normalement. Notamment celle-ci :
<p>Mis en ligne {{ faceSnap.createdDate | date: 'à HH:mm, le d MMMM yyyy' }}</p>
qui fait bugger le rendu, et la nouvelle version de la condition avec @if, qui doit être mal construite :
<p *ngIf="faceSnap.location">Photo prise à {{ faceSnap.location }}</p>
fonctionne, mais pas celle-ci :
<p @if(faceSnap.location)>Photo prise à {{ faceSnap.location }}</p>
Sinon, tout semble à peu près rentré dans l'ordre. Il faut que je vérifie avec VSCode quelles sont les lignes de code inutiles, comme les imports, par exemple.
Sinon le plus simple n'aurait pas été de refaire l'exercice du cours dans la nouvelle version ? (en suivant le cours le plus récent de "Débutez avec Angular"
Je ne sais pas avec quelle version a été fait chaque cours, mais justement, ça a fonctionné jusqu'à la fin de "Débutez avec Angular". Mais j'ai commencé le cours suivant, "Complétez vos connaissances avec Angular". Ça doit être celui-là qui n'a pas la bonne version, et mériterait d'être mis à jour. C'est dans celui-ci que j'ai repris la version sur GitHub et que tout a commencé à foirer !
ou tu as installé la dernière version au lieu de la version 12 utilisée par le projet.
(il y a 2 cours "Débuter avec angular" qui a priori n'utilise pas la même version, donc selon celui que tu as suivi, et donc la version que tu as installé, tu te retrouves avec ces soucis
J'ai en effet installé la dernière version. Mais je n'ai pas eu de problème avec "Débuter avec Angular". C'est avec "Complétez vos connaissances..." que ça a commencé à merder.
J'ai installé Angular 18.2.12., npm 10.9.0.
Merci encore pour ton aide. Tout fonctionne à merveille maintenant.
A priori, je devrais pouvoir reprendre "Complétez vos connaissances". À moins que ça déconne à nouveau, du fait du décalage, justement. Je vais tâcher de sauvegarder cette version.
À+
Ex-prof, développeur "Junior" (Haha !).
Angular : template et propriété non reconnus.
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.