Ng-lazyload-image: Impossible de lire la propriété « genre » d'undefined - Application universelle d'Angular 7
Installé hier ng-lazyload-image et obtenant une erreur :
ERROR in ./node_modules/ng-lazyload-image/fesm5/ng-lazyload-image.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
at isAngularDecoratorMetadataExpression (C:\Users\Denis\Desktop\Projects\VPWebsite\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:265:35)
at checkNodeForDecorators (C:\Users\Denis\Desktop\Projects\VPWebsite\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:77:21)
at visitNodes (C:\Users\Denis\Desktop\Projects\VPWebsite\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16144:30)
at Object.forEachChild (C:\Users\Denis\Desktop\Projects\VPWebsite\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16370:24)
quand courir
ng build --prod
mais ça a l'air bien avec _ng serve_
Pourriez-vous m'aider, je me bats avec ça depuis plus d'un jour.
Mes dépendances au cas où :
"dependencies": {
"@angular/animations": "6.1.10",
"@angular/cdk": "6.4.7",
"@angular/common": "7.2.13",
"@angular/compiler": "7.2.13",
"@angular/core": "7.2.13",
"@angular/forms": "7.2.13",
"@angular/http": "7.2.13",
"@angular/material": "6.4.7",
"@angular/platform-browser": "7.2.13",
"@angular/platform-browser-dynamic": "7.2.13",
"@angular/platform-server": "7.2.13",
"@angular/router": "7.2.13",
"@ng-bootstrap/ng-bootstrap": "4.1.1",
"@ng-select/ng-select": "2.17.0",
"@ng-toolkit/pwa": "7.1.1",
"@ng-toolkit/universal": "7.1.1",
"@ngneat/content-loader": "^4.1.0",
"@nguniversal/express-engine": "7.1.1",
"@nguniversal/module-map-ngfactory-loader": "7.1.1",
"@ngx-meta/core": "7.0.0",
"@swimlane/ngx-charts": "^12.0.1",
"ajv-keywords": "3.4.0",
"angular2-yandex-maps": "1.0.42",
"bootstrap": "4.3.1",
"core-js": "2.6.5",
"crypto": "1.0.1",
"crypto-js": "^3.1.9-1",
"ejs": "^1.0.0",
"et-line": "1.0.1",
"express": "^4.16.4",
"font-awesome": "4.7.0",
"fs": "0.0.1-security",
"http": "0.0.0",
"jquery": "3.4.0",
"jsencrypt": "^3.0.0-rc.1",
"mock-browser": "^0.92.14",
"moment": "2.24.0",
"net": "1.0.2",
"ng-lazyload-image": "^7.1.0",
"ng-sidebar": "8.0.0",
"ng5-slider": "1.1.14",
"ngx-daterangepicker-material": "1.3.4",
"ngx-mat-daterange-picker": "1.1.4",
"ngx-owl-carousel": "2.0.7",
"owl.carousel": "2.3.4",
"path": "0.12.7",
"popper.js": "1.15.0",
"rxjs": "6.4.0",
"rxjs-compat": "6.4.0",
"stream": "0.0.2",
"webpack-bundle-analyzer": "3.3.2",
"zlib": "1.0.5",
"zone.js": "0.8.29"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.13.9",
"@angular/cli": "7.3.8",
"@angular/compiler-cli": "7.2.13",
"@angular/language-service": "7.2.13",
"@types/jasmine": "2.8.16",
"@types/jasminewd2": "2.0.3",
"@types/node": "8.9.4",
"codelyzer": "4.5.0",
"http-server": "0.11.1",
"jasmine-core": "2.99.1",
"jasmine-spec-reporter": "4.2.1",
"karma": "^4.3.0",
"karma-chrome-launcher": "2.2.0",
"karma-coverage-istanbul-reporter": "2.0.5",
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.4.2",
"ts-loader": "5.3.3",
"ts-node": "7.0.0",
"tslint": "5.11.0",
"typescript": "3.1.1",
"webpack-cli": "3.3.0"
}
Denis-Evseev
Tous les 28 commentaires
@Denis-Evseev, pouvez-vous essayer de rétrograder cette bibliothèque vers la version 7.0.1 (en définissant simplement éditer :
- "ng-lazyload-image": "^7.1.0",
+ "ng-lazyload-image": "7.0.1",
et exécuter à nouveau npm install ?)
Je veux juste savoir si ce problème a été introduit dans la dernière version ou s'il s'agissait d'une version antérieure
tjoskar
le 26 févr. 2020
@tjoskar - "7.0.1" n'a pas résolu le problème, obtenant toujours la même erreur.
Merci
Denis-Evseev
le 26 févr. 2020
@tjoskar - des idées ?
Denis-Evseev
le 27 févr. 2020
Quelle version de ng -cli utilisez-vous ? Je viens de faire ce qui suit :
❯ ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.0.3
Node: 12.8.0
OS: darwin x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.900.3
@angular-devkit/core 9.0.3
@angular-devkit/schematics 9.0.3
@schematics/angular 9.0.3
@schematics/update 0.900.3
rxjs 6.5.3
❯ ng new my-app
❯ cd my-app
❯ ng build --prod
Your global Angular CLI version (9.0.3) is greater than your local
version (8.0.6). The local Angular CLI version is used.
...
build OK
# Adding ng-lazyload-image
❯ ng build --prod
Your global Angular CLI version (9.0.3) is greater than your local
version (8.0.6). The local Angular CLI version is used.
...
ERROR in ./node_modules/ng-lazyload-image/fesm5/ng-lazyload-image.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
...
# Upgrade angular to version 9 so that Angular CLI and the local version match
❯ ng build --prod
# Build complete without warning or error
J'ai recherché l'erreur sur Google et il semble que cela puisse se produire lorsque le cli et la version angulaire locale ne correspondent pas. Quelle est la sortie de ng --version ?
tjoskar
le 27 févr. 2020
Bonjour, nous avons eu le même problème sur Angular 8 en essayant de créer les fichiers SSR.
ng-lazyload-image : 7.1.0
Mettre à jour:
La mise à niveau vers la version 7.0.1 a fonctionné pour moi.
RFreij
le 28 févr. 2020
@RFreij , Vous est-il possible d'aligner votre version Angular CLI avec votre version locale (pour que l'avertissement disparaisse ?). Par exemple. en mettant à niveau votre version Angular locale vers 8.3.25 ?
tjoskar
le 28 févr. 2020
@tjoskar c'était ma deuxième option que je voulais essayer après la rétrogradation. Mais il semble que la rétrogradation à 7.0.1 ait déjà fonctionné pour moi.
Je vais l'essayer avec 7.1.0 et avec la version cli locale la même chose pour vous. Juste pour l'exclure
RFreij
le 28 févr. 2020
@tjoskar ayant malheureusement une version cli locale identique à la version globale ne fonctionnait pas avec la v7.1.0
RFreij
le 28 févr. 2020
@tjoskar @RFreij - aucune idée pour y remédier ?
Denis-Evseev
le 4 mars 2020
@Denis-Evseev pour moi, cela a fonctionné en rétrogradant à 7.0.1
RFreij
le 4 mars 2020
J'ai le même problème. Passer à la version 7.0.1 ne m'aide pas
fourAnge
le 4 mars 2020
La mise à niveau vers 7.0.1 m'a aussi aidé :tada:
Prozi
le 6 mars 2020
Je ne peux pas reproduire cela sans utiliser une version d'Angular CLI qui ne correspond pas à la version locale d'Angular. Quelqu'un a-t-il un projet où ce problème peut être reproduit, que vous pouvez partager avec moi ?
tjoskar
le 7 mars 2020
@tjoskar J'ai essayé d'en créer un pour vous. Mais il semble que je ne puisse pas le reproduire sur une nouvelle installation d'Angular 8.. ng serve et ng build --prod fonctionnent correctement sur la nouvelle installation.
RFreij
le 7 mars 2020
Même erreur ici avec une version différente d'angular mais aussi SSR
Dites-moi si des données ou des tests sont nécessaires. J'ai aussi testé avec 7.0.1 et 7.1.0
jmelich
le 9 mars 2020
J'ai recherché le problème sur Google et j'ai trouvé que l'erreur est courante pour les anciennes versions de tapuscrit et je vois que vous utilisez 3.2.4 qui a été publié il y a plus d'un an et 3.1.1 été publié en septembre 2018. Est-il possible pour vous d'essayer de mettre à jour la version tapuscrit ?
tjoskar
le 9 mars 2020
A-Avant quand j'ai eu le problème
Mes dépendances angulaires
"@angular/animations": "^8.2.14",
"@angular/common": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/core": "~8.1.2",
"@angular/forms": "~8.1.2",
"@angular/platform-browser": "~8.1.2",
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/routeur": "~8.1.2",
Les dépendances de développement
"@angular-devkit/architect": "~0.801.2",
"@angular-devkit/build-angular": "~0.801.2",
"@angular-devkit/core": "~8.1.2",
"@angular-devkit/schematics": "~8.1.2",
"@angular/cli": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/compiler-cli": "~8.1.2",
"@angular/language-service": "~8.1.2",
"@ionic/angular-toolkit": "~2.0.0",
Et "ng-lazyload-image": "^7.1.0",
B-Maintenant Après avoir corrigé le problème
Tout reste pareil sauf
"ng-lazyload-image": "^7.0.1",
"@angular-devkit/build-angular": "~0.803.24",
fourAnge
le 9 mars 2020
J'ai rétrogradé lazy-image à 6.0.1 et cela fonctionne maintenant.
Avant cela, j'ai essayé de mettre à niveau la version tapuscrit sans résultat étant donné que la version la plus élevée autorisée pour mon projet était la 3.3.0 étant donné que je suis sur angular7 et que je ne suis actuellement pas intéressé par la mise à niveau vers angular8.
ERREUR dans le compilateur angulaire nécessite TypeScript >=3.1.1 et <3.3.0 mais 3.8.3 a été trouvé à la place.
jmelich
le 11 mars 2020
Merci pour votre réponse @jmelich. Juste par curiosité, pourquoi ne voulez-vous pas mettre à niveau Angular ? Le LTS pour Angular 7 se terminera le 18 avril donc je pense qu'il est temps :)
tjoskar
le 12 mars 2020
Pour l'instant, nous avons d'autres priorités et tâches à accomplir, après cela, nous mettrons à jour cette application à l'angle le plus récent, mais pas pour le moment. Cette dernière modification dans laquelle votre bibliothèque a été impliquée visait à améliorer considérablement la vitesse de la page avec un petit effort étant donné qu'elle contient beaucoup d'images. Au fait, merci pour votre intérêt et votre package, ça marche vraiment bien :P
jmelich
le 13 mars 2020
@jmelich J'ai migré vers Angular 8 aujourd'hui pendant 30 minutes !
Le chargement paresseux fonctionne à merveille maintenant !
Utilisé : https://medium.com/better-programming/upgrade-to-angular-8-beta-within-10-minutes-cd831fb8dd0e
Denis-Evseev
le 17 mars 2020
@Denis-Evseev J'apprécie vraiment votre lien et je vais essayer si vous certifiez que c'était juste 30min :) . En fait, nous avons 2 applications créées en angulaire, toutes deux avec la version 7, mais l'une d'entre elles est vraiment volumineuse et avec de nombreuses solutions de contournement pour des exigences étranges et de nombreuses dépendances. Quoi qu'il en soit, il semble que pour l'instant nous ayons tous trop de temps à consacrer, alors je vais essayer bientôt. Merci!
jmelich
le 20 mars 2020
Je suis désolé que ce soit un problème pour vous tous et j'aimerais avoir une solution mais je ne sais pas quel est le problème. Je suis presque sûr que cela a quelque chose à voir avec la version tapuscrit (et angulaire). J'aimerais pouvoir créer un projet où je peux reproduire le problème afin que je puisse le déboguer mais en même temps Angular 7 sera obsolète dans moins d'un mois, et ne sera plus pris en charge par l'équipe Angular et donc pas par moi non plus.
Si quelqu'un peut partager un projet où cela peut être reproduit, j'y jetterai un coup d'œil et j'essaierai de le réparer.
tjoskar
le 20 mars 2020
@Denis-Evseev, pouvez-vous essayer de rétrograder cette bibliothèque vers la version
7.0.1(en définissant simplement éditer :- "ng-lazyload-image": "^7.1.0", + "ng-lazyload-image": "7.0.1",et exécuter à nouveau
npm install?)Je veux juste savoir si ce problème a été introduit dans la dernière version ou s'il s'agissait d'une version antérieure
Je peux confirmer que cela fonctionne (rétrograder)
Prozi
le 21 mars 2020
Dans la version 7.1.0 j'ai mis à niveau ng-packagr vers la version 9.0.0 et il semble que les versions de TypeScript antérieures à 3.6.4 ne soient plus prises en charge, mais il semble qu'Angular 8 charge TypeScript 3.4 jusqu'à 3.7.
Pour angulaire 7 :
Il semble que cela fonctionne pour la plupart d'entre vous de rétrograder ng-lazyload-image vers la version 7.0.1 et puisque l'équipe Angular abandonnera le support de la version 7 dans quelques semaines (18 avril), je ne suis pas sûr que je vais réparer ça. J'accepterai cependant les PR si quelqu'un souhaite :
- Découvrez cette bibliothèque
- Rétrogradez
ng-packagrà 5.7.0 et dactylographié à 3.5.3 - Rétrogradez la syntaxe ts dans cette lib (aka. corrigez le problème ts qui apparaîtra lors de la tentative de compilation)
- Construire une version locale de la lib (npm run build && cd dist && npm pack)
- Installez le bundle dans votre application (npm install ../path/to/ng-lazyload-image/dist/ng-lazyload-image-7.1.0.tgz)
- Exécutez
ng build --proddans votre application pour voir si l'erreur disparaît.
Pour angulaire 8 :
Il semble que vous puissiez mettre à niveau le script dactylographié vers 3.6.4 et cela fonctionnera
Pour Angular 9 :
Cette version ne prend en charge que le tapuscrit 3.7 et supérieur, il n'y a donc pas de problème ici.
S'il vous plaît laissez-moi savoir si je me trompe de quelque façon que ce soit.
tjoskar
le 28 mars 2020
@Denis-Evseev, pouvez-vous essayer de rétrograder cette bibliothèque vers la version
7.0.1(en définissant simplement éditer :- "ng-lazyload-image": "^7.1.0", + "ng-lazyload-image": "7.0.1",et exécuter à nouveau
npm install?)Je veux juste savoir si ce problème a été introduit dans la dernière version ou s'il s'agissait d'une version antérieure
Merci.
Ça marche pour moi!
JUNWOO45
le 11 mai 2020
Il s'avère que, lorsque je suis passé de 7.1.0 à 7.0.1, cela fonctionne réellement, mais je n'ai pas pu utiliser l'événement OnStateChange car il semble que cette fonctionnalité soit en fait disponible dans la version 7.1.0. J'ai dû utiliser le onLoad qui ne renvoie qu'un booléen.
tout comme @Denis-Evseev l'a déclaré, vous devez passer directement à "7.0.1" et également supprimer la référence au "7.1.0" du fichier package.lock afin qu'il puisse effectuer une nouvelle installation du "7.0.0. Version 1". De plus, vous pouvez supprimer le dossier "ng-lazy-load-image" du répertoire node_modules
teedon
le 12 mai 2020
Angular 7 n'est plus pris en charge par l'équipe Angular et n'est donc pas non plus pris en charge par ng-lazyload-image . Je suis cependant heureux d'accepter des relations publiques ou des suggestions sur la façon de résoudre ce problème.
Si quelqu'un a un problème similaire avec Angular 8 ou 9, veuillez créer un nouveau problème.
tjoskar
le 29 mai 2020
Questions connexes
vincent-cm
·
10Commentaires
el-davo
·
4Commentaires
elitenick
·
11Commentaires
myrsk
·
6Commentaires
MonchiLin
·
3Commentaires
Commentaire le plus utile
@Denis-Evseev, pouvez-vous essayer de rétrograder cette bibliothèque vers la version
7.0.1(en définissant simplement éditer :et exécuter à nouveau
npm install?)Je veux juste savoir si ce problème a été introduit dans la dernière version ou s'il s'agissait d'une version antérieure