Ng-lazyload-image: 未定義のプロパティ「種類」を読み取れません-Angular7ユニバーサルアプリケーション
昨日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
しかし、_ngserve_で見栄えがします
助けてくれませんか、私はそれと1日以上戦っています。
念のために私の依存関係：
"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日
こんにちは。SSRファイルをビルドしようとすると、Angular8でも同じ問題が発生しました。
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は、ダウングレード後に試してみたかった2番目のオプションでした。 しかし、7.0.1へのダウングレードはすでに機能しているようです。
7.1.0とローカルCLIバージョンで同じように試してみます。 それを除外するためだけに
RFreij
2020年02月28日
@tjoskar残念ながら、グローバルと同じローカル
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と一致しないバージョンのAngularCLIを使用せずにこれを再現することはできません。 この問題を再現できるプロジェクトがありますか？それを私と共有できますか？
tjoskar
2020年03月07日
@tjoskar私はあなたのためにそれを作成しようとしました。 しかし、Angular 8のフレッシュインストールでは再現できないようです。ngserveとngbuild --prodはどちらも、フレッシュインストールで正常に動作します。
RFreij
2020年03月07日
角度のバージョンが異なるだけでなくSSRでも同じエラーが発生します
データやテストが必要かどうか教えてください。 7.0.1と7.1.0でもテストしました
jmelich
2020年03月09日
この問題をグーグルで検索したところ、エラーは古いバージョンのtypescriptで一般的であり、1年以上前にリリースされた3.2.4と2018年9月にリリースされた3.1.1を使用していることがわかりました。タイプスクリプトのバージョンを更新することはできますか？
tjoskar
2020年03月09日
A-問題が発生する前
私の角度依存関係
"@ angle / animations"： "^ 8.2.14"、
"@ angle / common"： "〜8.1.2"、
"@ angle / compiler"： "〜8.1.2"、
"@ angle / core"： "〜8.1.2"、
"@ angle / forms"： "〜8.1.2"、
"@ angle / platform-browser"： "〜8.1.2"、
"@ angle / platform-browser-dynamic"： "〜8.1.2"、
"@ angle / router"： "〜8.1.2"、
開発者の依存関係
"@ angle-devkit / architect"： "〜0.801.2"、
"@ angle-devkit / build-angular"： "〜0.801.2"、
"@ angle-devkit / core"： "〜8.1.2"、
"@ angle-devkit / schematics"： "〜8.1.2"、
"@ angle / cli"： "〜8.1.2"、
"@ angle / compiler"： "〜8.1.2"、
"@ angle / compiler-cli"： "〜8.1.2"、
"@ angle / language-service"： "〜8.1.2"、
"@ ionic / angle-toolkit"： "〜2.0.0"、
そして「ng-lazyload-image」：「^ 7.1.0」、
B-問題を修正した後
を除いてすべてが同じままです
"ng-lazyload-image"： "^ 7.0.1"、
"@ angle-devkit / build-angular"： "〜0.803.24"、
fourAnge
2020年03月09日
lazy-imageを6.0.1にダウングレードし、動作するようになりました。
それ以前は、typescriptバージョンをアップグレードしようとしましたが、プロジェクトで許可されている最高バージョンは3.3.0でした。現在、angular7を使用していて、angular8へのアップグレードには関心がありません。
Angularコンパイラのエラーには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今日は
遅延読み込みは今や魅力のように機能します！
使用済み： https ：
Denis-Evseev
2020年03月17日
@ Denis-Evseev私はあなたのリンクに本当に感謝しています、そしてあなたがそれがちょうど30分であったことを証明するなら私は試してみます:)。 実際、Angularで作成された2つのアプリがあります。どちらもバージョン7ですが、そのうちの1つは非常に大きく、奇妙な要件と多くの依存関係に対する多くの回避策があります。 とにかく今のところ私たち全員が過ごす時間が多すぎるように見えるので、すぐに試してみます。 ありがとう！
jmelich
2020年03月20日
ご不便をおかけして申し訳ございません。解決策があればいいのですが、何が問題なのかわかりません。 私はそれがtypescript（そしてAngular）バージョンと関係があるとかなり確信しています。 問題を再現してデバッグできるプロジェクトを作成できるようにしたいと思いますが、同時にAngular 7は1か月以内に非推奨になり、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 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の場合：
typescriptを3.6.4アップグレードできるようで、機能します
Angular 9の場合：
このバージョンはtypescript3.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にダウングレードすると、実際には機能することがわかりましたが、この機能は実際には7.1.0バージョンに含まれているようであるため、OnStateChangeイベントを使用できませんでした。 ブール値のみを返すonLoadを使用することになりました。
@ Denis-Evseevが述べたように、「7.0.1」に直接変更し、package.lockファイルから「7.1.0」への参照を削除して、「7.0」を新規インストールできるようにする必要があります。 1 "バージョン。 さらに、node_modulesディレクトリから「ng-lazy-load-image」フォルダを削除できます
teedon
2020年05月12日
Angular 7はAngularチームによってサポートされなくなったため、 ng-lazyload-imageによってもサポートされていません。 ただし、これを修正する方法についてのPRまたは提案を喜んで受け入れます。
誰かがAngular8または9で同様の問題を抱えている場合は、新しい問題を作成してください。
tjoskar
2020年05月29日
関連する問題
vincent-cm
·
10コメント
LobeTia
·
6コメント
kodeine
·
7コメント
el-davo
·
4コメント
audacitus
·
5コメント
最も参考になるコメント
@ Denis-Evseev、このライブラリをバージョン
7.0.1にダウングレードしてみてください（編集を設定するだけです：もう一度
npm installしますか？）この問題が最新バージョンで発生したのか、それとも以前のバージョンで発生したのかを知りたいだけです