Ng-lazyload-image: No se puede leer la propiedad 'tipo' de indefinido: aplicación Angular 7 Universal
Se instaló ayer ng-lazyload-image y aparece un error:
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)
cuando corre
ng build --prod
pero se ve bien con _ng serve_
¿Podrías ayudarme? He estado luchando con eso durante más de un día.
Mis dependencias por si acaso:
"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
Todos 28 comentarios
@ Denis-Evseev, ¿puedes intentar degradar esta lib a la versión 7.0.1 (simplemente configurando editar:
- "ng-lazyload-image": "^7.1.0",
+ "ng-lazyload-image": "7.0.1",
y ejecutar npm install nuevo?)
Solo quiero saber si este problema se introdujo en la última versión o si estaba en una versión anterior.
tjoskar
en 26 feb. 2020
@tjoskar - "7.0.1" no resolvió el problema, todavía obteniendo el mismo error.
Gracias
Denis-Evseev
en 26 feb. 2020
@tjoskar - ¿alguna idea?
Denis-Evseev
en 27 feb. 2020
¿Qué versión de ng -cli estás usando? Acabo de hacer lo siguiente:
❯ 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
Busqué en Google el error y parece que puede ocurrir cuando el cli y la versión Angular local no coinciden. ¿Cuál es la salida de ng --version ?
tjoskar
en 27 feb. 2020
Hola, tenemos el mismo problema en Angular 8 al intentar construir los archivos SSR.
ng-lazyload-image: 7.1.0
Actualizar:
La degradación a 7.0.1 funcionó para mí.
RFreij
en 28 feb. 2020
@RFreij , ¿es posible que alinee su versión de CLI angular con su versión local (para que desaparezca la advertencia?). P.ej. actualizando su versión Angular local a 8.3.25 ?
tjoskar
en 28 feb. 2020
@tjoskar esa fue mi segunda opción que quería probar después de degradar. Pero parece que la degradación a 7.0.1 ya funcionó para mí.
Lo intentaré con 7.1.0 y con la versión cli local lo mismo para ti. Solo para descartarlo
RFreij
en 28 feb. 2020
@tjoskar lamentablemente tener la versión cli local igual que la global no funcionó con v7.1.0
RFreij
en 28 feb. 2020
@tjoskar @RFreij - ¿No
Denis-Evseev
en 4 mar. 2020
@ Denis-Evseev para mí, funcionó al degradar a 7.0.1
RFreij
en 4 mar. 2020
Tengo el mismo problema. Cambiar a 7.0.1 no me ayuda
fourAnge
en 4 mar. 2020
Bajar a 7.0.1 también me ayudó: tada:
Prozi
en 6 mar. 2020
No puedo reproducir esto sin usar una versión de Angular CLI que no coincida con la versión local de Angular. ¿Alguien tiene un proyecto donde se pueda reproducir este número, que puedas compartir conmigo?
tjoskar
en 7 mar. 2020
@tjoskar Traté de crear uno para ti. Pero parece que no puedo reproducirlo en una nueva instalación de Angular 8 .. Tanto ng serve como ng build --prod funcionan bien en la nueva instalación ..
RFreij
en 7 mar. 2020
El mismo error aquí con una versión diferente de angular pero también SSR
Dime si se requiere algún dato o prueba. También probé con 7.0.1 y 7.1.0
jmelich
en 9 mar. 2020
Busqué en Google el problema y descubrí que el error es común para versiones anteriores de mecanografiado y veo que está usando 3.2.4 que se lanzó hace más de un año y 3.1.1 lanzó en septiembre de 2018. ¿Es posible que intente actualizar la versión mecanografiada?
tjoskar
en 9 mar. 2020
A-Antes cuando me salió el problema
Mis dependencias angulares
"@ angular / animaciones": "^ 8.2.14",
"@ angular / común": "~ 8.1.2",
"@ angular / compilador": "~ 8.1.2",
"@ angular / core": "~ 8.1.2",
"@ angular / formas": "~ 8.1.2",
"@ angular / platform-browser": "~ 8.1.2",
"@ angular / platform-browser-dynamic": "~ 8.1.2",
"@ angular / enrutador": "~ 8.1.2",
Las dependencias de desarrollo
"@ 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 / compilador": "~ 8.1.2",
"@ angular / compiler-cli": "~ 8.1.2",
"@ angular / language-service": "~ 8.1.2",
"@ ionic / angular-toolkit": "~ 2.0.0",
Y "ng-lazyload-image": "^ 7.1.0",
B-Now después de corregir el problema
Todo sigue igual excepto
"ng-lazyload-image": "^ 7.0.1",
"@ angular-devkit / build-angular": "~ 0.803.24",
fourAnge
en 9 mar. 2020
He degradado la imagen diferida a 6.0.1 y ahora funciona.
Antes de eso, intenté actualizar la versión mecanografiada sin resultado dado que la versión más alta permitida para mi proyecto era 3.3.0 dado que estoy en angular7 y actualmente no estoy interesado en actualizar a angular8.
ERROR en The Angular Compiler requiere TypeScript> = 3.1.1 y <3.3.0 pero se encontró 3.8.3 en su lugar.
jmelich
en 11 mar. 2020
Gracias por tu respuesta @jmelich. Solo por curiosidad, ¿por qué no quieres actualizar Angular? El LTS para Angular 7 finalizará el 18 de abril, así que creo que es hora :)
tjoskar
en 12 mar. 2020
Por ahora tenemos otras prioridades y tareas que hacer, después de eso seguro que actualizaremos esta aplicación al angular más reciente, pero no ahora. Esta última modificación en la que participó su biblioteca fue para hacer una mejora significativa en la velocidad de la página con un pequeño esfuerzo dado que contiene muchas imágenes. Por cierto, gracias por tu interés y tu paquete, funciona realmente bien: P
jmelich
en 13 mar. 2020
@jmelich ¡ He migrado a Angular 8 hoy durante 30 minutos!
¡La carga diferida funciona a las mil maravillas ahora!
Utilizado: https://medium.com/better-programming/upgrade-to-angular-8-beta-within-10-minutes-cd831fb8dd0e
Denis-Evseev
en 17 mar. 2020
@ Denis-Evseev Realmente aprecio su enlace y lo intentaré si certifica que fue solo 30 minutos :). De hecho, tenemos 2 aplicaciones hechas en angular, ambas con la versión 7, pero una de ellas es realmente grande y con muchas soluciones para requisitos extraños y muchas dependencias. De todos modos, parece que por ahora todos tenemos demasiado tiempo para gastar, así que lo intentaré pronto. ¡Gracias!
jmelich
en 20 mar. 2020
Lamento que esto sea un problema para todos ustedes y desearía tener una solución, pero no sé cuál es el problema. Estoy bastante seguro de que tiene algo que ver con la versión mecanografiada (y angular). Me encantaría poder crear un proyecto en el que pueda reproducir el problema para poder depurarlo, pero al mismo tiempo, Angular 7 quedará obsoleto en menos de un mes y ya no será compatible con el equipo de Angular y, por lo tanto, no por mi tampoco.
Si alguien puede compartir un proyecto donde se pueda reproducir esto, lo echaré un vistazo e intentaré arreglarlo.
tjoskar
en 20 mar. 2020
@ Denis-Evseev, ¿puedes intentar degradar esta lib a la versión
7.0.1(simplemente configurando editar:- "ng-lazyload-image": "^7.1.0", + "ng-lazyload-image": "7.0.1",y ejecutar
npm installnuevo?)Solo quiero saber si este problema se introdujo en la última versión o si estaba en una versión anterior.
Puedo confirmar que esto funciona (bajar de categoría)
Prozi
en 21 mar. 2020
En la versión 7.1.0 actualicé ng-packagr a la versión 9.0.0 y parece que las versiones de TypeScript anteriores a 3.6.4 ya no son compatibles, pero parece que Angular 8 admite mecanografiado 3.4 hasta 3.7.
Para Angular 7:
Parece que a la mayoría de ustedes les funciona rebajar ng-lazyload-image a la versión 7.0.1 y dado que el equipo de Angular dejará de ofrecer soporte para la versión 7 en unas pocas semanas (18 de abril), no seguro que arreglaré esto. Sin embargo, aceptaré RP si alguien quiere:
- Echa un vistazo a esta lib
- Reducir
ng-packagra 5.7.0 y mecanografiar a 3.5.3 - Reducir la sintaxis de ts en esta biblioteca (también conocido como solucionar el problema de ts que aparecerá al intentar compilar)
- Cree una versión local de lib (npm run build && cd dist && npm pack)
- Instale el paquete en su aplicación (npm install ../path/to/ng-lazyload-image/dist/ng-lazyload-image-7.1.0.tgz)
- Ejecute
ng build --proden su aplicación para ver si el error desaparece.
Para Angular 8:
Parece que puede actualizar mecanografiado a 3.6.4 y funcionará
Para Angular 9:
Esta versión solo admite mecanografiado 3.7 y superior, por lo que no hay ningún problema aquí.
Por favor, avíseme si me equivoco de alguna manera.
tjoskar
en 28 mar. 2020
@ Denis-Evseev, ¿puedes intentar degradar esta lib a la versión
7.0.1(simplemente configurando editar:- "ng-lazyload-image": "^7.1.0", + "ng-lazyload-image": "7.0.1",y ejecutar
npm installnuevo?)Solo quiero saber si este problema se introdujo en la última versión o si estaba en una versión anterior.
Gracias.
¡Esto funciona para mi!
JUNWOO45
en 11 may. 2020
Resulta que, cuando bajé de 7.1.0 a 7.0.1, en realidad funciona, pero luego no pude usar el evento OnStateChange, ya que parece que esta funcionalidad realmente vino en la versión 7.1.0. Tuve que dar como resultado el uso de onLoad que solo devuelve un booleano.
tal como indicó @ Denis-Evseev, debe cambiar directamente a "7.0.1" y también eliminar la referencia a "7.1.0" del archivo package.lock para que pueda realizar una nueva instalación de "7.0. Versión de 1 ". Además, puede eliminar la carpeta "ng-lazy-load-image" del directorio node_modules
teedon
en 12 may. 2020
Angular 7 ya no es compatible con el equipo de Angular y, por lo tanto, ng-lazyload-image tampoco. Sin embargo, estoy feliz de aceptar relaciones públicas o sugerencias sobre cómo solucionar este problema.
Si alguien tiene un problema similar con Angular 8 o 9, cree un nuevo problema.
tjoskar
en 29 may. 2020
Temas relacionados
coryrylan
·
7Comentarios
walfro
·
11Comentarios
vincent-cm
·
10Comentarios
myrsk
·
6Comentarios
dkmostafa
·
7Comentarios
Comentario más útil
@ Denis-Evseev, ¿puedes intentar degradar esta lib a la versión
7.0.1(simplemente configurando editar:y ejecutar
npm installnuevo?)Solo quiero saber si este problema se introdujo en la última versión o si estaba en una versión anterior.