Ng-lazyload-image: 无法读取未定义的属性“种类” - Angular 7 Universal 应用程序
昨天安装了 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条评论
@Denis-Evseev，您能否尝试将此库降级到版本7.0.1 （只需设置编辑：
- "ng-lazyload-image": "^7.1.0",
+ "ng-lazyload-image": "7.0.1",
并再次运行npm install ？）
我只想知道这个问题是最新版本引入的还是早期版本
tjoskar
于 2020-02-26
@tjoskar - "7.0.1" 没有解决问题，仍然出现同样的错误。
谢谢
Denis-Evseev
于 2020-02-26
@tjoskar - 有什么想法吗？
Denis-Evseev
于 2020-02-27
您使用的是哪个版本的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
于 2020-02-27
您好，我们在 Angular 8 上尝试构建 SSR 文件时遇到了同样的问题。
ng-lazyload-image: 7.1.0
更新：
降级到 7.0.1 对我有用..
RFreij
于 2020-02-28
@RFreij ，您是否可以将 Angular CLI 版本与本地版本保持一致（以便警告消失？）。 例如。 通过将本地 Angular 版本升级到8.3.25 ？
tjoskar
于 2020-02-28
@tjoskar这是我降级后想尝试的第二个选择。 但似乎降级到 7.0.1 已经对我有用。
我会用 7.1.0 和本地 cli 版本为你尝试。 只是为了排除它
RFreij
于 2020-02-28
@tjoskar不幸的是，具有与全局相同的本地 cli 版本不适用于 v7.1.0
RFreij
于 2020-02-28
@tjoskar @RFreij - 不知道如何解决？
Denis-Evseev
于 2020-03-04
@Denis-Evseev 对我来说，它通过降级到 7.0.1 起作用
RFreij
于 2020-03-04
我有同样的问题。 降级到 7.0.1 对我没有帮助
fourAnge
于 2020-03-04
降级到 7.0.1 对我也有帮助 :tada:
Prozi
于 2020-03-06
如果不使用与本地版本的 Angular 不匹配的 Angular CLI 版本，我就无法重现这一点。 有没有人有可以重现此问题的项目，您可以与我分享吗？
tjoskar
于 2020-03-07
@tjoskar我试着为你创造一个。 但似乎我无法在全新安装的 Angular 8 上重现它.. ng serve 和 ng build --prod 在全新安装上都可以正常工作..
RFreij
于 2020-03-07
不同版本的 angular 和 SSR 也有同样的错误
告诉我是否需要任何数据或测试。 我也用 7.0.1 和 7.1.0 测试过
jmelich
于 2020-03-09
我在谷歌上搜索了这个问题，发现该错误对于旧版本的打字稿很常见，我看到您使用的是一年多前发布的3.2.4 ，而3.1.1于 2018 年 9 月发布。您是否可以尝试更新打字稿版本？
tjoskar
于 2020-03-09
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/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",
和 "ng-lazyload-image": "^7.1.0",
B-现在修正问题后
一切都保持不变，除了
"ng-lazyload-image": "^7.0.1",
"@angular-devkit/build-angular": "~0.803.24",
fourAnge
于 2020-03-09
我已经将 lazy-image 降级到 6.0.1，现在可以使用了。
在此之前，我尝试升级打字稿版本但没有结果，因为我的项目允许的最高版本是 3.3.0，因为我使用的是 angular7，而且我目前对升级到 angular8 不感兴趣。
Angular Compiler 中的 ERROR 需要 TypeScript >=3.1.1 和 <3.3.0，但找到了 3.8.3。
jmelich
于 2020-03-11
感谢您的回复@jmelich。 只是好奇，你为什么不想升级 Angular？ Angular 7 的 LTS 将于 4 月 18 日结束，所以我认为是时候了:)
tjoskar
于 2020-03-12
现在我们还有其他优先事项和任务要做，在那之后我们肯定会将这个应用程序更新到最新的角度，但不是现在。 涉及您的库的最新修改是在它包含大量图像的情况下以很小的努力显着提高页面速度。 顺便说一句，感谢您的兴趣和您的包裹，它真的很好用：P
jmelich
于 2020-03-13
@jmelich我今天迁移到 Angular 8 30 分钟！
延迟加载现在就像魅力一样！
使用： https :
Denis-Evseev
于 2020-03-17
@Denis-Evseev 我真的很感谢你的链接，如果你证明它只有 30 分钟，我会试一试:)。 事实上，我们有 2 个用 angular 制作的应用程序，都是 7 版，但其中一个非常大，并且有许多解决奇怪需求和大量依赖项的解决方法。 无论如何，现在我们都有太多时间可以花，所以我会尽快尝试。 谢谢！
jmelich
于 2020-03-20
很抱歉这对你们所有人来说都是一个问题，我希望我有一个解决方案，但我不知道问题是什么。 我很确定它与打字稿（和 Angular）版本有关。 我希望能够创建一个可以重现问题的项目，以便我可以对其进行调试，但同时 Angular 7 将在不到一个月的时间内被弃用，并且将不再受到 Angular 团队的支持，因此不会由我。
如果有人可以分享一个可以复制的项目，我会看看并尝试修复它。
tjoskar
于 2020-03-20
@Denis-Evseev，您能否尝试将此库降级到版本
7.0.1（只需设置编辑：- "ng-lazyload-image": "^7.1.0", + "ng-lazyload-image": "7.0.1",并再次运行
npm install？）我只想知道这个问题是最新版本引入的还是早期版本
我可以确认这有效（降级）
Prozi
于 2020-03-21
在7.1.0我将ng-packagr升级到 9.0.0 版本，看起来 3.6.4 之前的 TypeScript 版本不再受支持，但看起来 Angular 8 支持 typescript 3.4 到 3.7。
对于 Angular 7：
看起来对你们大多数人来说，将ng-lazyload-image降级到7.0.1版本是可行的，因为 Angular 团队将在短短几周内（4 月 18 日）放弃对版本 7 的支持，我不是确定我会解决这个问题。 但是，如果有人想要，我会接受 PR：
- 签出这个库
- 将
ng-packagr降级到 5.7.0，将 typescript 降级到 3.5.3 - 降级此库中的 ts 语法（也就是修复尝试构建时出现的 ts 问题）
- 构建本地版本的 lib (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：
此版本仅支持 typescript 3.7 及更高版本，因此这里没有问题。
如果我有任何错误，请告诉我。
tjoskar
于 2020-03-28
@Denis-Evseev，您能否尝试将此库降级到版本
7.0.1（只需设置编辑：- "ng-lazyload-image": "^7.1.0", + "ng-lazyload-image": "7.0.1",并再次运行
npm install？）我只想知道这个问题是最新版本引入的还是早期版本
谢谢。
这个对我有用！
JUNWOO45
于 2020-05-11
事实证明，当我从 7.1.0 降级到 7.0.1 时，它确实有效，但后来我无法使用 OnStateChange 事件，因为似乎此功能实际上是在 7.1.0 版本中出现的。 我不得不使用只返回布尔值的 onLoad。
正如@Denis-Evseev 所说，您需要直接更改为“7.0.1”，并从 package.lock 文件中删除对“7.1.0”的引用，以便它可以全新安装“7.0.1”。 1" 版本。 此外，您可以从 node_modules 目录中删除“ng-lazy-load-image”文件夹
teedon
于 2020-05-12
Angular 团队不再支持 Angular 7，因此ng-lazyload-image也不支持。 但是，我很高兴接受有关如何解决此问题的 PR 或建议。
如果有人对 Angular 8 或 9 有类似问题，请创建一个新问题。
tjoskar
于 2020-05-29
相关问题
walfro
·
11评论
coryrylan
·
7评论
AndreasSchmid1
·
3评论
rimlin
·
5评论
vugar005
·
10评论
最有用的评论
@Denis-Evseev，您能否尝试将此库降级到版本
7.0.1（只需设置编辑：并再次运行
npm install？）我只想知道这个问题是最新版本引入的还是早期版本