Ng-lazyload-image: Não é possível ler a propriedade 'tipo' de indefinido - aplicativo Angular 7 Universal
Instalado ontem ng-lazyload-image e recebendo um erro:
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)
quando corre
ng build --prod
mas fica bem com _ng serve_
Você poderia ajudar, estou lutando contra isso há mais de um dia.
Minhas dependências apenas no caso:
"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 comentários
@ Denis-Evseev, você pode tentar fazer o downgrade desta lib para a versão 7.0.1 (apenas configurando edit:
- "ng-lazyload-image": "^7.1.0",
+ "ng-lazyload-image": "7.0.1",
e execute npm install novamente?)
Só quero saber se esse problema foi introduzido na versão mais recente ou se estava em uma versão anterior
tjoskar
em 26 fev. 2020
@tjoskar - "7.0.1" não resolveu o problema, ainda obtendo o mesmo erro.
Obrigado
Denis-Evseev
em 26 fev. 2020
@tjoskar - alguma ideia?
Denis-Evseev
em 27 fev. 2020
Qual versão de ng -cli você está usando? Acabei de fazer o seguinte:
❯ 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
Pesquisei o erro no Google e parece que pode ocorrer quando o cli e a versão Angular local falham. Qual é a saída de ng --version ?
tjoskar
em 27 fev. 2020
Olá, tivemos o mesmo problema no Angular 8 ao tentar criar os arquivos SSR.
ng-lazyload-image: 7.1.0
Atualizar:
O downgrade para 7.0.1 funcionou para mim.
RFreij
em 28 fev. 2020
@RFreij , É possível alinhar sua versão Angular CLI com sua versão local (para que o aviso desapareça?). Por exemplo. atualizando sua versão Angular local para 8.3.25 ?
tjoskar
em 28 fev. 2020
@tjoskar, essa era minha segunda opção que eu queria tentar depois de fazer o downgrade. Mas parece que o downgrade para 7.0.1 já funcionou para mim.
Vou tentar com 7.1.0 e com a versão CLI local da mesma forma para você. Só para descartar
RFreij
em 28 fev. 2020
@tjoskar infelizmente, ter a versão cli local igual à global não funcionou com a v7.1.0
RFreij
em 28 fev. 2020
@tjoskar @RFreij - nenhuma ideia de como consertar?
Denis-Evseev
em 4 mar. 2020
@Denis-Evseev para mim, funcionou fazendo o downgrade para 7.0.1
RFreij
em 4 mar. 2020
Eu tenho o mesmo problema. Fazer downgrade para 7.0.1 não me ajuda
fourAnge
em 4 mar. 2020
O downgrade para 7.0.1 também me ajudou: tada:
Prozi
em 6 mar. 2020
Não posso reproduzir isso sem usar uma versão do Angular CLI incompatível com a versão local do Angular. Alguém tem um projeto onde este problema possa ser reproduzido, que você possa compartilhar comigo?
tjoskar
em 7 mar. 2020
@tjoskar Tentei criar um para você. Mas parece que não consigo reproduzi-lo em uma nova instalação do Angular 8. Tanto o ng serve quanto o ng build --prod funcionam bem com a nova instalação.
RFreij
em 7 mar. 2020
Mesmo erro aqui com versão diferente do angular, mas também SSR
Diga-me se algum dado ou teste é necessário. Eu também testei com 7.0.1 e 7.1.0
jmelich
em 9 mar. 2020
Pesquisei o problema no Google e descobri que o erro é comum para versões anteriores do texto datilografado e vejo que você está usando 3.2.4 que foi lançado há mais de um ano e 3.1.1 foi lançado em setembro de 2018. É possível tentar atualizar a versão datilografada?
tjoskar
em 9 mar. 2020
A-antes de quando eu peguei o problema
Minhas dependências angulares
"@ angular / animations": "^ 8.2.14",
"@ angular / comum": "~ 8.1.2",
"@ angular / compilador": "~ 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 / router": "~ 8.1.2",
As dependências de desenvolvimento
"@ 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",
E "ng-lazyload-image": "^ 7.1.0",
B-agora depois de corrigir o problema
Tudo permanece o mesmo exceto
"ng-lazyload-image": "^ 7.0.1",
"@ angular-devkit / build-angular": "~ 0.803.24",
fourAnge
em 9 mar. 2020
Eu fiz downgrade do lazy-image para 6.0.1 e agora funciona.
Antes disso, tentei atualizar a versão do texto datilografado sem nenhum resultado, pois a versão mais alta permitida para meu projeto era 3.3.0, dado que estou no angular7 e atualmente não estou interessado em atualizar para o angular8.
ERROR in The Angular Compiler requer TypeScript> = 3.1.1 e <3.3.0 mas 3.8.3 foi encontrado em seu lugar.
jmelich
em 11 mar. 2020
Obrigado pela sua resposta @jmelich. Só por curiosidade, por que você não quer atualizar o Angular? O LTS para Angular 7 terminará em 18 de abril, então acho que é a hora :)
tjoskar
em 12 mar. 2020
Por enquanto, temos outras prioridades e tarefas a fazer, depois disso com certeza iremos atualizar este aplicativo para o angular mais recente, mas não agora. Essa última modificação em que sua biblioteca estava envolvida foi para fazer uma melhoria significativa na velocidade da página com pouco esforço, pois contém muitas imagens. A propósito, obrigado pelo seu interesse e pelo seu pacote, funciona muito bem: P
jmelich
em 13 mar. 2020
@jmelich Eu
O carregamento lento funciona como um charme agora!
Usado: https://medium.com/better-programming/upgrade-to-angular-8-beta-within-10-minutes-cd831fb8dd0e
Denis-Evseev
em 17 mar. 2020
@Denis-Evseev Agradeço muito o seu link e vou dar uma chance se você atestar que durou apenas 30min :). Na verdade, temos 2 aplicativos feitos em angular, ambos com a versão 7, mas um deles é realmente grande e com muitas soluções alternativas para requisitos estranhos e muitas dependências. De qualquer forma, parece que por enquanto todos nós estamos tendo muito tempo para gastar, então vou tentar em breve. Obrigado!
jmelich
em 20 mar. 2020
Lamento que este seja um problema para todos vocês e gostaria de ter uma solução, mas não sei qual é o problema. Tenho certeza de que tem algo a ver com a versão datilografada (e Angular). Adoraria poder criar um projeto em que pudesse reproduzir o problema para depurá-lo, mas ao mesmo tempo o Angular 7 será descontinuado em menos de um mês e não terá mais suporte da equipe Angular e, portanto, não por mim também.
Se alguém puder compartilhar um projeto onde isso possa ser reproduzido, irei dar uma olhada e tentar consertar.
tjoskar
em 20 mar. 2020
@ Denis-Evseev, você pode tentar fazer o downgrade desta lib para a versão
7.0.1(apenas configurando edit:- "ng-lazyload-image": "^7.1.0", + "ng-lazyload-image": "7.0.1",e execute
npm installnovamente?)Só quero saber se esse problema foi introduzido na versão mais recente ou se estava em uma versão anterior
Posso confirmar que isso funciona (downgrade)
Prozi
em 21 mar. 2020
Na versão 7.1.0 eu atualizei o ng-packagr para a versão 9.0.0 e parece que as versões TypeScript anteriores a 3.6.4 não são mais suportadas, mas parece que Angular 8 está suportando typescript 3.4 até 3.7.
Para Angular 7:
Parece que funciona para a maioria de vocês fazer o downgrade de ng-lazyload-image para a versão 7.0.1 e, uma vez que a equipe Angular abandonará o suporte para a versão 7 em apenas algumas semanas (18 de abril), não estou certeza de que vou consertar isso. Vou, no entanto, aceitar PRs se alguém quiser:
- Confira esta lib
- Downgrade de
ng-packagrpara 5.7.0 e datilografado para 3.5.3 - Faça downgrade da sintaxe ts neste lib (também conhecido como corrigir o problema ts que aparecerá ao tentar construir)
- Crie uma versão local da lib (npm execute build && cd dist && npm pack)
- Instale o pacote em seu aplicativo (npm install ../path/to/ng-lazyload-image/dist/ng-lazyload-image-7.1.0.tgz)
- Execute
ng build --prodem seu aplicativo para ver se o erro desaparece.
Para Angular 8:
Parece que você pode atualizar o texto digitado para 3.6.4 e ele funcionará
Para Angular 9:
Esta versão suporta apenas o typescript 3.7 e superior, portanto, não há problema aqui.
Por favor, deixe-me saber se eu estou errado de alguma forma.
tjoskar
em 28 mar. 2020
@ Denis-Evseev, você pode tentar fazer o downgrade desta lib para a versão
7.0.1(apenas configurando edit:- "ng-lazyload-image": "^7.1.0", + "ng-lazyload-image": "7.0.1",e execute
npm installnovamente?)Só quero saber se esse problema foi introduzido na versão mais recente ou se estava em uma versão anterior
Te agradece.
Funciona para mim!
JUNWOO45
em 11 mai. 2020
Acontece que, quando fiz o downgrade de 7.1.0 para 7.0.1, ele realmente funcionou, mas não consegui usar o evento OnStateChange porque parece que essa funcionalidade veio na versão 7.1.0. Tive que usar o onLoad que só retorna um booleano.
assim como @ Denis-Evseev afirmou, você precisa mudar diretamente para "7.0.1" e também deletar a referência ao "7.1.0" do arquivo package.lock para que ele possa fazer uma nova instalação do "7.0. Versão de 1 ". Além disso, você pode excluir a pasta "ng-lazy-load-image" do diretório node_modules
teedon
em 12 mai. 2020
O Angular 7 não é mais compatível com a equipe Angular e, portanto, também não é compatível com ng-lazyload-image . No entanto, estou feliz em aceitar PRs ou sugestões sobre como corrigir isso.
Se alguém tiver um problema semelhante com o Angular 8 ou 9, crie um novo problema.
tjoskar
em 29 mai. 2020
Questões relacionadas
lares83
·
3Comentários
el-davo
·
4Comentários
dkmostafa
·
7Comentários
alisahinozcelik
·
4Comentários
kodeine
·
7Comentários
Comentários muito úteis
@ Denis-Evseev, você pode tentar fazer o downgrade desta lib para a versão
7.0.1(apenas configurando edit:e execute
npm installnovamente?)Só quero saber se esse problema foi introduzido na versão mais recente ou se estava em uma versão anterior