Ng-lazyload-image: Невозможно прочитать свойство 'kind' of undefined - универсальное приложение Angular 7
Вчера установил ng-lazyload-image и получаю сообщение об ошибке:
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)
при запуске
ng build --prod
но хорошо смотрится с _ng serve_
Не могли бы вы помочь, борюсь с этим не один день.
Мои зависимости на всякий случай:
"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
Все 28 Комментарий
@ Денис-Евсеев, не могли бы вы попробовать понизить версию этой библиотеки до версии 7.0.1 (просто установив edit:
- "ng-lazyload-image": "^7.1.0",
+ "ng-lazyload-image": "7.0.1",
и снова запустить npm install ?)
Я просто хочу знать, возникла ли эта проблема в последней версии или она была в более ранней версии.
tjoskar
26 февр. 2020
@tjoskar - «7.0.1» не
Спасибо
Denis-Evseev
26 февр. 2020
@tjoskar - есть идеи?
Denis-Evseev
27 февр. 2020
Какую версию ng -cli вы используете? Я только что сделал следующее:
❯ 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
Я погуглил об ошибке, и похоже, что это может произойти, когда cli и локальная версия Angular не совпадают. Что будет на выходе ng --version ?
tjoskar
27 февр. 2020
Привет, у нас возникла та же проблема на Angular 8 при попытке собрать файлы SSR.
ng-lazyload-изображение: 7.1.0
Обновлять:
У меня сработал переход на 7.0.1 ..
RFreij
28 февр. 2020
@RFreij , возможно ли у вас выровнять версию Angular CLI с вашей локальной версией (чтобы исчезло предупреждение?). Например. обновив локальную версию Angular до 8.3.25 ?
tjoskar
28 февр. 2020
@tjoskar, это был мой второй вариант, который я хотел попробовать после
Я попробую с 7.1.0 и с локальной версией cli то же самое для вас. Просто чтобы исключить это
RFreij
28 февр. 2020
@tjoskar, к сожалению, имея локальную версию
RFreij
28 февр. 2020
@tjoskar @RFreij - нет идей, как это исправить?
Denis-Evseev
4 мар. 2020
@ Денис-Евсеев, у меня все заработало при понижении до 7.0.1
RFreij
4 мар. 2020
У меня такая же проблема. Переход на 7.0.1 мне не помогает
fourAnge
4 мар. 2020
Понижение до 7.0.1 мне тоже помогло: tada:
Prozi
6 мар. 2020
Я не могу воспроизвести это без использования версии Angular CLI, которая не соответствует локальной версии Angular. Есть ли у кого-нибудь проект, в котором можно воспроизвести эту проблему, которым вы можете поделиться со мной?
tjoskar
7 мар. 2020
@tjoskar Я пытался создать его для вас. Но, похоже, я не могу воспроизвести его при новой установке Angular 8 .. И ng serve, и ng build --prod работают нормально при новой установке ..
RFreij
7 мар. 2020
Такая же ошибка здесь с другой версией angular, но также с SSR
Скажите, нужны ли какие-либо данные или тест. Я также тестировал с 7.0.1 и 7.1.0
jmelich
9 мар. 2020
Я поискал в Google эту проблему и обнаружил, что ошибка типична для старых версий машинописного текста, и я вижу, что вы используете 3.2.4 который был выпущен более года назад, а 3.1.1 был выпущен в сентябре 2018 года. Можно ли попробовать обновить машинописную версию?
tjoskar
9 мар. 2020
A-раньше, когда у меня возникла проблема
Мои угловые зависимости
"@ 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 / router": "~ 8.1.2",
Зависимости разработчиков
"@ angular-devkit / архитектор": "~ 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",
И «ng-lazyload-image»: «^ 7.1.0»,
B-Сейчас после исправления проблемы
Все осталось по-прежнему, кроме
"ng-lazyload-image": "^ 7.0.1",
"@ angular-devkit / build-angular": "~ 0.803.24",
fourAnge
9 мар. 2020
Я понизил версию lazy-image до 6.0.1 и теперь работает.
Перед этим я попытался обновить версию машинописного текста, но безрезультатно, учитывая, что максимальная разрешенная версия для моего проекта была 3.3.0, учитывая, что я использую angular7, и в настоящее время я не заинтересован в обновлении до angular8.
ОШИБКА в компиляторе Angular требует TypeScript> = 3.1.1 и <3.3.0, но вместо этого был обнаружен 3.8.3.
jmelich
11 мар. 2020
Спасибо за ответ @jmelich. Из любопытства, почему бы вам не обновить Angular? LTS для Angular 7 закончится 18 апреля, так что я думаю, что пора :)
tjoskar
12 мар. 2020
На данный момент у нас есть другие приоритеты и задачи, после чего мы обязательно обновим это приложение до последней версии angular, но не сейчас. Эта последняя модификация, в которой была задействована ваша библиотека, заключалась в значительном улучшении скорости страницы с небольшими усилиями, поскольку она содержит много изображений. Кстати, спасибо за интерес и за ваш пакет, он действительно хорошо работает: P
jmelich
13 мар. 2020
@jmelich Сегодня я перешел на Angular 8 за 30 минут!
Ленивая загрузка теперь работает как шарм!
Используется: https://medium.com/better-programming/upgrade-to-angular-8-beta-within-10-minutes-cd831fb8dd0e
Denis-Evseev
17 мар. 2020
@ Denis-Evseev Я очень ценю вашу ссылку, и я попробую, если вы подтвердите, что это было всего 30 минут :). На самом деле у нас есть 2 приложения, созданных на angular, оба с версией 7, но одно из них действительно большое и со множеством обходных путей для странных требований и множества зависимостей. В любом случае, похоже, сейчас у нас у всех слишком много времени, поэтому я постараюсь в ближайшее время. Спасибо!
jmelich
20 мар. 2020
Мне жаль, что это проблема для всех вас, и я хотел бы найти решение, но я не знаю, в чем проблема. Я почти уверен, что это как-то связано с машинописной (и угловой) версией. Я хотел бы иметь возможность создать проект, в котором я мог бы воспроизвести проблему, чтобы я мог ее отладить, но в то же время Angular 7 устареет менее чем через месяц и больше не будет поддерживаться командой Angular, и поэтому не я тоже.
Если кто-то может поделиться проектом, где это можно воспроизвести, я посмотрю и постараюсь исправить.
tjoskar
20 мар. 2020
@ Денис-Евсеев, не могли бы вы попробовать понизить версию этой библиотеки до версии
7.0.1(просто установив edit:- "ng-lazyload-image": "^7.1.0", + "ng-lazyload-image": "7.0.1",и снова запустить
npm install?)Я просто хочу знать, возникла ли эта проблема в последней версии или она была в более ранней версии.
Я могу подтвердить, что это работает (переход на более раннюю версию)
Prozi
21 мар. 2020
В версии 7.1.0 я обновил ng-packagr до версии 9.0.0, и похоже, что версии TypeScript до 3.6.4 больше не поддерживаются, но похоже, что Angular 8 поддерживает typescript от 3.4 до 3.7.
Для Angular 7:
Похоже, что для большинства из вас работает понижение версии ng-lazyload-image до версии 7.0.1 и поскольку команда Angular прекратит поддержку версии 7 всего через несколько недель (18 апреля), я не уверен, что исправлю это. Однако я приму PR, если кто-то захочет:
- Оформить заказ в этой библиотеке
- Понизить
ng-packagrдо 5.7.0 и машинописный текст до 3.5.3 - Понизьте синтаксис ts в этой библиотеке (или исправьте проблему ts, которая появится при попытке сборки)
- Создайте локальную версию библиотеки (npm run build && cd dist && npm pack)
- Установите пакет в свое приложение (npm install ../path/to/ng-lazyload-image/dist/ng-lazyload-image-7.1.0.tgz)
- Запустите
ng build --prodв своем приложении, чтобы увидеть, исчезла ли ошибка.
Для Angular 8:
Похоже, вы можете обновить машинописный текст до 3.6.4 и он будет работать
Для Angular 9:
Эта версия поддерживает только машинописный текст 3.7 и выше, поэтому здесь нет никаких проблем.
Пожалуйста, дайте мне знать, если я ошибаюсь.
tjoskar
28 мар. 2020
@ Денис-Евсеев, не могли бы вы попробовать понизить версию этой библиотеки до версии
7.0.1(просто установив edit:- "ng-lazyload-image": "^7.1.0", + "ng-lazyload-image": "7.0.1",и снова запустить
npm install?)Я просто хочу знать, возникла ли эта проблема в последней версии или она была в более ранней версии.
Спасибо вам.
Меня устраивает!
JUNWOO45
11 мая 2020
Оказывается, когда я понизил версию 7.1.0 до 7.0.1, это действительно работает, но потом я не смог использовать событие OnStateChange, поскольку, похоже, эта функциональность действительно появилась в версии 7.1.0. Мне пришлось использовать onLoad, который возвращает только логическое значение.
как заявил @ Denis-Evseev, вам нужно перейти непосредственно на «7.0.1», а также удалить ссылку на «7.1.0» из файла package.lock, чтобы он мог выполнить новую установку «7.0.1». 1-дюймовая версия. Кроме того, вы можете удалить папку «ng-lazy-load-image» из каталога node_modules.
teedon
12 мая 2020
Angular 7 больше не поддерживается командой Angular и, следовательно, не поддерживается и ng-lazyload-image . Однако я рад принять PR или предложения о том, как это исправить.
Если у кого-то есть аналогичная проблема с Angular 8 или 9, создайте новую проблему.
tjoskar
29 мая 2020
Смежные вопросы
lares83
·
3Комментарии
audacitus
·
5Комментарии
elitenick
·
11Комментарии
el-davo
·
4Комментарии
dkmostafa
·
7Комментарии
Самый полезный комментарий
@ Денис-Евсеев, не могли бы вы попробовать понизить версию этой библиотеки до версии
7.0.1(просто установив edit:и снова запустить
npm install?)Я просто хочу знать, возникла ли эта проблема в последней версии или она была в более ранней версии.