Ng-lazyload-image: Cannot read property 'kind' of undefined - Angular 7 Universal application
Installed yesterday ng-lazyload-image and getting an 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)
when run
ng build --prod
but looks good with _ng serve_
Could you help, I have been fighting with it for more than one day.
My dependencies just in case:
"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
All 28 comments
@Denis-Evseev, can you try to downgrade this lib to version 7.0.1 (by just setting edit:
- "ng-lazyload-image": "^7.1.0",
+ "ng-lazyload-image": "7.0.1",
and run npm install again?)
I just want to know if this issue was introduced in the latest version or if it was in an earlier version
tjoskar
on 26 Feb 2020
@tjoskar - "7.0.1" didn't solve the issue, still getting the same error.
Thanks
Denis-Evseev
on 26 Feb 2020
@tjoskar - any ideas?
Denis-Evseev
on 27 Feb 2020
What version of ng-cli are you using? I just did the following:
❯ 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
I googled the error and it seems like it can occur when the cli and local Angular version miss-match. What is the output of ng --version?
tjoskar
on 27 Feb 2020
Hi there, we got the same problem on Angular 8 when trying to build the SSR files.
ng-lazyload-image: 7.1.0
Update:
Downgrading to 7.0.1 worked for me..
RFreij
on 28 Feb 2020
@RFreij, Is it possible for you to align you Angular CLI version with you local version (so that the warning disappear?). Eg. by upgrading you local Angular version to 8.3.25?
tjoskar
on 28 Feb 2020
@tjoskar that was my second option i wanted to try after downgrading. But it seems downgrading to 7.0.1 already worked for me.
I'll try it with 7.1.0 and with local cli version the same for you. Just to rule it out
RFreij
on 28 Feb 2020
@tjoskar unfortunately having local cli version the same as global did not work with v7.1.0
RFreij
on 28 Feb 2020
@tjoskar @RFreij - no ideas on how to fix it ?
Denis-Evseev
on 4 Mar 2020
@Denis-Evseev for me, it worked by downgrading to 7.0.1
RFreij
on 4 Mar 2020
I have the same issue. Downgrading to 7.0.1 doesn't help me
fourAnge
on 4 Mar 2020
Downgrade to 7.0.1 helped me too :tada:
Prozi
on 6 Mar 2020
I can not reproduce this without using a version of Angular CLI that mismatch with the local version of Angular. Does anyone have a project where this issue can be reproduced, that you can share with me?
tjoskar
on 7 Mar 2020
@tjoskar I tried to create one for you. But it seems I can't reproduce it on a fresh install of Angular 8.. Both ng serve and ng build --prod are workign fine on the fresh install..
RFreij
on 7 Mar 2020
Same error here with different version of angular but also SSR
Tell me if any data or test is required. I've also tested with 7.0.1 and 7.1.0
jmelich
on 9 Mar 2020
I have googled for the issue and found that the error is common for older versions of typescript and I see that you are using 3.2.4 which was released over a year ago and 3.1.1 Was released September 2018. Is it possible for you to try to update the typescript version?
tjoskar
on 9 Mar 2020
A-Before when I got the issue
My angular dependencies
"@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",
The dev dependencies
"@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",
And "ng-lazyload-image": "^7.1.0",
B-Now After correcting the issue
Everything remains the same except
"ng-lazyload-image": "^7.0.1",
"@angular-devkit/build-angular": "~0.803.24",
fourAnge
on 9 Mar 2020
I've downgraded lazy-image to 6.0.1 and now works.
Before it I tried to upgrade typescript version with no result given highest allowed version for my project was 3.3.0 given I'm on angular7 and I'm not currently interested in upgrading to angular8.
ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.3.0 but 3.8.3 was found instead.
jmelich
on 11 Mar 2020
Thanks for your reply @jmelich. Just of curiosity, why don't you want to upgrade Angular? The LTS for Angular 7 will end on 18 April so I think it is time :)
tjoskar
on 12 Mar 2020
For now we have other priorities and tasks to do, after that for sure we'll update this app to most recent angular but not right now. This latest modification where your library was involved was to make a significant improvement on page speed with small effort given it contains lots of images. By the way, thanks for your interest and your package, it works really good :P
jmelich
on 13 Mar 2020
@jmelich I migrated to Angular 8 today for 30 mins!
Lazy loading works like charm now!
Used: https://medium.com/better-programming/upgrade-to-angular-8-beta-within-10-minutes-cd831fb8dd0e
Denis-Evseev
on 17 Mar 2020
@Denis-Evseev I really appreciate your link and I'll give a try if you certify it was just 30min :) . In fact we have 2 apps made in angular, both with version 7 but one of them is really big and with many workarounds for strange requirements and lots of dependencies. Anyway looks like for now we all are having too much time to spend so I'll try soon. Thanks!
jmelich
on 20 Mar 2020
I'm sorry that this is an issue for you all and I wish I had a solution but I don't know what the issue is. I'm pretty sure it has something to do with the typescript (and Angular) version. I would love to be able to create a project where I can reproduce the issue so I can debug it but at the same time will Angular 7 be deprecated in less than a month, and will no longer be supported by the Angular team and therefor not by me either.
If anyone can share a project where this can be reproduced I will take a look and try to fix it.
tjoskar
on 20 Mar 2020
@Denis-Evseev, can you try to downgrade this lib to version
7.0.1(by just setting edit:- "ng-lazyload-image": "^7.1.0", + "ng-lazyload-image": "7.0.1",and run
npm installagain?)I just want to know if this issue was introduced in the latest version or if it was in an earlier version
I can confirm this works (downgrade)
Prozi
on 21 Mar 2020
In version 7.1.0 I upgraded ng-packagr to version 9.0.0 and it looks like TypeScript versions prior to 3.6.4 no longer is supported, but it looks like Angular 8 is supporting typescript 3.4 up to 3.7.
For Angular 7:
It looks like it works for most of you to downgrade ng-lazyload-image to version 7.0.1 and since the Angular team will drop the support for version 7 in just a few weeks (18 April) I'm not sure that I will fix this. I will, however, accept PRs if someone wants to:
- Checkout this lib
- Downgrade
ng-packagrto 5.7.0 and typescript to 3.5.3 - Downgrade the ts syntax in this lib (aka. fix the ts issue that will appear when trying to build)
- Build a local version of the lib (npm run build && cd dist && npm pack)
- Install the bundle in your app (npm install ../path/to/ng-lazyload-image/dist/ng-lazyload-image-7.1.0.tgz)
- Run
ng build --prodin your app to see if the error goes away.
For Angular 8:
It looks like you can upgrade typescript to 3.6.4 and it will work
For Angular 9:
This version only supports typescript 3.7 and above so there is no issue here.
Please let me know if I'm wrong in any way.
tjoskar
on 28 Mar 2020
@Denis-Evseev, can you try to downgrade this lib to version
7.0.1(by just setting edit:- "ng-lazyload-image": "^7.1.0", + "ng-lazyload-image": "7.0.1",and run
npm installagain?)I just want to know if this issue was introduced in the latest version or if it was in an earlier version
Thanks you.
It works for me!
JUNWOO45
on 11 May 2020
Turns out that, when I downgraded from 7.1.0 to 7.0.1, it actually works, but then I was unable to used the OnStateChange Event as it seems this functionality actually came in the 7.1.0 version. I had to result to using the onLoad which only returns a boolean.
just as @Denis-Evseev stated, you need to change directly to "7.0.1" and also delete the reference to the "7.1.0" from the package.lock file so that it can make a fresh installation of the "7.0.1" version. Additionally you can delete the "ng-lazy-load-image" folder from the node_modules directory
teedon
on 12 May 2020
Angular 7 is no longer supported by the Angular team and is therefore not supported by ng-lazyload-image either. I'm however happy to accept PRs or sugestions on how to fix this.
If someone has a similar problem with Angular 8 or 9, please create a new issue.
tjoskar
on 29 May 2020
Related issues
vincent-cm
·
10Comments
vugar005
·
10Comments
rimlin
·
5Comments
audacitus
·
5Comments
AzerHeshim
·
5Comments
Most helpful comment
@Denis-Evseev, can you try to downgrade this lib to version
7.0.1(by just setting edit:and run
npm installagain?)I just want to know if this issue was introduced in the latest version or if it was in an earlier version