Ng-lazyload-image: Eigenschaft 'Art' von undefiniert kann nicht gelesen werden - Angular 7 Universelle Anwendung

@Denis-Evseev, können Sie versuchen, diese Bibliothek auf die Version 7.0.1 herunterzustufen (indem Sie einfach Bearbeiten einstellen:

- "ng-lazyload-image": "^7.1.0",
+ "ng-lazyload-image": "7.0.1",

und npm install erneut ausführen?)

Ich möchte nur wissen, ob dieses Problem in der neuesten Version aufgetreten ist oder ob es in einer früheren Version aufgetreten ist

@tjoskar - "7.0.1" hat das Problem nicht gelöst, es wird immer noch der gleiche Fehler
Vielen Dank

@tjoskar - irgendwelche Ideen?

Welche Version von ng -cli verwenden Sie? Ich habe gerade folgendes gemacht:

❯ 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

Ich habe den Fehler gegoogelt und es scheint, als ob er auftreten kann, wenn die cli- und die lokale Angular-Version nicht übereinstimmen. Was ist die Ausgabe von ng --version ?

Hallo, wir haben das gleiche Problem mit Angular 8 beim Versuch, die SSR-Dateien zu erstellen.

ng-lazyload-image: 7.1.0

Aktualisieren:
Das Downgrade auf 7.0.1 hat bei mir funktioniert..

@RFreij , ist es Ihnen möglich, abzugleichen (damit die Warnung verschwindet?). Z.B. indem Sie Ihre lokale Angular-Version auf 8.3.25 aktualisieren?

@tjoskar das war meine zweite Option, die ich nach dem Downgrade ausprobieren wollte. Aber das Downgrade auf 7.0.1 scheint bei mir bereits funktioniert zu haben.

Ich werde es mit 7.1.0 versuchen und mit lokaler cli-Version das gleiche für dich. Nur um es auszuschließen

@tjoskar hat leider eine lokale cli-Version wie die globale nicht mit v7.1.0 funktioniert

@tjoskar @RFreij - keine Ideen, wie man das

@Denis-Evseev für mich hat es durch ein Downgrade auf 7.0.1 funktioniert

Ich habe das gleiche Problem. Ein Downgrade auf 7.0.1 hilft mir nicht

Downgrade auf 7.0.1 hat mir auch geholfen :tada:

Ich kann dies nicht reproduzieren, ohne eine Version von Angular CLI zu verwenden, die nicht mit der lokalen Version von Angular übereinstimmt. Hat jemand ein Projekt, bei dem dieses Problem reproduziert werden kann, das Sie mit mir teilen können?

@tjoskar Ich habe versucht, einen für dich zu erstellen. Aber es scheint, dass ich es bei einer Neuinstallation von Angular 8 nicht reproduzieren kann. Sowohl ng serve als auch ng build --prod funktionieren bei der Neuinstallation einwandfrei.

Gleicher Fehler hier mit anderer Version von Winkel, aber auch SSR

Sagen Sie mir, ob Daten oder Tests erforderlich sind. Ich habe auch mit 7.0.1 und 7.1.0 getestet

Ich habe nach dem Problem gegoogelt und festgestellt, dass der Fehler bei älteren Versionen von Typoskript üblich ist, und ich sehe, dass Sie 3.2.4 das vor über einem Jahr veröffentlicht wurde und 3.1.1 im September 2018 veröffentlicht wurde. Ist es möglich, dass Sie versuchen, die Typoskriptversion zu aktualisieren?

A-Bevor ich das Problem bekam

Meine Winkelabhängigkeiten
"@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",

Die Dev-Abhängigkeiten
"@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",

Und "ng-lazyload-image": "^7.1.0",

B-Jetzt Nach Behebung des Problems

Alles bleibt gleich außer
"ng-lazyload-image": "^7.0.1",
"@angular-devkit/build-angular": "~0.803.24",

Ich habe lazy-image auf 6.0.1 herabgestuft und jetzt funktioniert es.
Davor habe ich versucht, die Typoskriptversion ohne Ergebnis zu aktualisieren, da die höchste zulässige Version für mein Projekt 3.3.0 war, da ich auf angle7 bin und derzeit nicht daran interessiert bin, auf angle8 zu aktualisieren.

ERROR in The Angular Compiler erfordert TypeScript >=3.1.1 und <3.3.0, aber stattdessen wurde 3.8.3 gefunden.

Danke für deine Antwort @jmelich. Nur aus Neugier, warum möchten Sie Angular nicht aktualisieren? Das LTS für Angular 7 endet am 18. April, also denke ich, es ist an der Zeit :)

Im Moment haben wir andere Prioritäten und Aufgaben zu erledigen, danach werden wir diese App sicherlich auf den neuesten Winkel aktualisieren, aber nicht jetzt. Diese letzte Änderung, an der Ihre Bibliothek beteiligt war, sollte die Seitengeschwindigkeit mit geringem Aufwand erheblich verbessern, da sie viele Bilder enthält. Übrigens, danke für dein Interesse und dein Paket, es funktioniert wirklich gut :P

@jmelich Ich bin heute für 30 Minuten zu Angular 8 migriert!
Lazy Loading funktioniert jetzt wie ein Zauber!
Verwendet: https://medium.com/better-programming/upgrade-to-angular-8-beta-within-10-minutes-cd831fb8dd0e

@Denis-Evseev Ich schätze Ihren Link sehr und ich werde es versuchen, wenn Sie bestätigen, dass es nur 30 Minuten waren :) . Tatsächlich haben wir 2 Apps in Angular, beide mit Version 7, aber eine davon ist wirklich groß und mit vielen Workarounds für seltsame Anforderungen und viele Abhängigkeiten. Wie auch immer, es sieht so aus, als ob wir im Moment alle zu viel Zeit haben, also werde ich es bald versuchen. Vielen Dank!

Es tut mir leid, dass dies ein Problem für Sie alle ist, und ich wünschte, ich hätte eine Lösung, aber ich kenne das Problem nicht. Ich bin mir ziemlich sicher, dass es etwas mit der Typoskript- (und Angular-) Version zu tun hat. Ich würde gerne ein Projekt erstellen, in dem ich das Problem reproduzieren kann, damit ich es debuggen kann, aber gleichzeitig wird Angular 7 in weniger als einem Monat veraltet sein und vom Angular-Team nicht mehr unterstützt werden und daher nicht auch von mir.

Wenn jemand ein Projekt teilen kann, in dem dies reproduziert werden kann, werde ich es mir ansehen und versuchen, es zu reparieren.

@Denis-Evseev, können Sie versuchen, diese Bibliothek auf die Version 7.0.1 herunterzustufen (indem Sie einfach Bearbeiten einstellen:

- "ng-lazyload-image": "^7.1.0",
+ "ng-lazyload-image": "7.0.1",

und npm install erneut ausführen?)

Ich möchte nur wissen, ob dieses Problem in der neuesten Version aufgetreten ist oder ob es in einer früheren Version aufgetreten ist

Ich kann bestätigen, dass dies funktioniert (Downgrade)

In Version 7.1.0 ich ng-packagr auf Version 9.0.0

Für Winkel 7:
Es sieht so aus, als ob es für die meisten von euch funktioniert, ng-lazyload-image auf Version 7.0.1 herunterzustufen und da das Angular-Team den Support für Version 7 in wenigen Wochen (18. April) einstellen wird, bin ich nicht sicher werde ich das beheben. Ich werde jedoch PRs akzeptieren, wenn jemand möchte:

1. Checke diese Lib
2. Downgrade ng-packagr auf 5.7.0 und Typoskript auf 3.5.3
3. Reduzieren Sie die ts-Syntax in dieser Bibliothek (auch bekannt als das ts-Problem beheben, das beim Versuch des Builds auftritt)
4. Erstellen Sie eine lokale Version der Bibliothek (npm run build && cd dist && npm pack)
5. Installieren Sie das Bundle in Ihrer App (npm install ../path/to/ng-lazyload-image/dist/ng-lazyload-image-7.1.0.tgz)
6. Führen Sie ng build --prod in Ihrer App aus, um zu sehen, ob der Fehler behoben ist.

Für Winkel 8:
Es sieht so aus, als ob Sie Typoskript auf 3.6.4 aktualisieren können und es wird funktionieren

Für Winkel 9:
Diese Version unterstützt nur Typescript 3.7 und höher, daher gibt es hier kein Problem.

Bitte lassen Sie es mich wissen, wenn ich in irgendeiner Weise falsch liege.

@Denis-Evseev, können Sie versuchen, diese Bibliothek auf die Version 7.0.1 herunterzustufen (indem Sie einfach Bearbeiten einstellen:

- "ng-lazyload-image": "^7.1.0",
+ "ng-lazyload-image": "7.0.1",

und npm install erneut ausführen?)

Ich möchte nur wissen, ob dieses Problem in der neuesten Version aufgetreten ist oder ob es in einer früheren Version aufgetreten ist

Danke.
Für mich geht das!

Es stellte sich heraus, dass es beim Downgrade von 7.1.0 auf 7.0.1 tatsächlich funktioniert, aber dann konnte ich das OnStateChange-Ereignis nicht verwenden, da diese Funktionalität anscheinend tatsächlich in der Version 7.1.0 enthalten war. Ich musste dazu führen, dass onLoad verwendet wird, das nur einen booleschen Wert zurückgibt.

wie @Denis-Evseev sagte, müssen Sie direkt zu "7.0.1" wechseln und auch den Verweis auf "7.1.0" aus der package.lock-Datei löschen, damit eine Neuinstallation der "7.0. 1"-Version. Zusätzlich können Sie den Ordner "ng-lazy-load-image" aus dem Verzeichnis node_modules löschen

Angular 7 wird vom Angular-Team nicht mehr unterstützt und wird daher auch nicht von ng-lazyload-image . Ich nehme jedoch gerne PRs oder Vorschläge zur Behebung dieses Problems an.

Wenn jemand ein ähnliches Problem mit Angular 8 oder 9 hat, erstellen Sie bitte ein neues Problem.