Ng-lazyload-image: 정의되지 않은 속성 '종류'를 읽을 수 없음 - Angular 7 Universal 응용 프로그램

@Denis-Evseev, 이 라이브러리를 7.0.1 버전으로 다운그레이드할 수 있습니까?

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

npm install 다시 실행하시겠습니까?)

이 문제가 최신 버전에 도입되었는지 아니면 이전 버전에 있었는지 알고 싶습니다.

@tjoskar - "7.0.1"로 문제가 해결되지 않고 여전히 동일한 오류가 발생합니다.
감사 해요

@tjoskar - 아이디어가 있습니까?

어떤 버전의 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

Google에서 오류를 검색했는데 cli와 로컬 Angular 버전이 일치하지 않을 때 발생할 수 있는 것 같습니다. ng --version 의 출력은 무엇입니까?

안녕하세요, SSR 파일을 빌드하려고 할 때 Angular 8에서도 동일한 문제가 발생했습니다.

ng-lazyload-이미지: 7.1.0

업데이트:
7.0.1로 다운 그레이드하면 저에게 효과적이었습니다.

@RFreij , Angular CLI 버전을 로컬 버전과 정렬하여 경고가 사라지도록 할 수 있습니까? 예. 로컬 Angular 버전을 8.3.25 로 업그레이드 하시겠습니까?

@tjoskar 는 다운그레이드 후 시도하고 싶은 두 번째 옵션이었습니다. 그러나 7.0.1로 다운 그레이드하는 것이 이미 저에게 효과가 있었던 것 같습니다.

7.1.0과 로컬 cli 버전으로 시도해 보겠습니다. 배제하기만 하면

@tjoskar는 불행히도 글로벌과 동일한 로컬 cli 버전을 가지고 v7.1.0에서 작동하지 않았습니다.

@tjoskar @ RFreij- 고칠 방법에 대한 아이디어가 없습니까?

@Denis-Evseev는 7.0.1로 다운그레이드하여 작동했습니다.

같은 문제가 있습니다. 7.0.1로 다운그레이드해도 도움이 되지 않습니다.

7.0.1로 다운그레이드도 도움이 되었습니다 :tada:

Angular의 로컬 버전과 일치하지 않는 Angular CLI 버전을 사용하지 않고는 이것을 재현할 수 없습니다. 이 문제를 재현할 수 있고 나와 공유할 수 있는 프로젝트가 있는 사람이 있습니까?

@tjoskar 나는 당신을 위해 하나를 만들려고했습니다. 그러나 Angular 8을 새로 설치할 때 재현할 수 없는 것 같습니다. ng Serve와 ng build --prod 모두 새로 설치하면 제대로 작동합니다.

다른 버전의 Angular하지만 SSR에서도 동일한 오류가 발생합니다.

데이터나 테스트가 필요한 경우 알려주십시오. 나는 또한 7.0.1 및 7.1.0으로 테스트했습니다.

나는 이 문제에 대해 구글링을 했고 오류가 이전 버전의 typescript에 일반적이라는 것을 발견했으며 1년 전에 출시된 3.1.1 2018년 9월에 출시된 3.2.4 있는 것으로 나타났습니다. typescript 버전을 업데이트할 수 있습니까?

A-문제가 발생하기 전

내 각도 종속성
"@angular/animations": "^8.2.14",
"@angular/common": "~8.1.2",
"@각도/컴파일러": "~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",
"@각도/컴파일러": "~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",

나는 lazy-image를 6.0.1로 다운그레이드했고 이제 작동합니다.
그 전에 나는 angular7에 있고 현재 angular8로 업그레이드하는 데 관심이 없다는 것을 감안할 때 내 프로젝트에 허용되는 가장 높은 버전이 3.3.0인 결과가 없는 typescript 버전을 업그레이드하려고 했습니다.

각도 컴파일러의 오류에는 TypeScript >=3.1.1 및 <3.3.0이 필요하지만 대신 3.8.3이 발견되었습니다.

@jmelich 답변 감사합니다. 그냥 궁금해서 Angular를 업그레이드하고 싶지 않습니까? Angular 7용 LTS가 4월 18일에 종료되니 때가 된 것 같아요 :)

지금은 다른 우선 순위와 작업이 있습니다. 그 후에는 확실히 이 앱을 가장 최근의 각도로 업데이트하지만 지금은 업데이트하지 않을 것입니다. 라이브러리가 관련된 이 최신 수정은 많은 이미지가 포함되어 있는 경우 적은 노력으로 페이지 속도를 크게 향상시키는 것입니다. 그건 그렇고, 당신의 관심과 패키지 덕분에 정말 잘 작동합니다 :P

@jmelich 오늘 30분 동안 Angular 8로 마이그레이션했습니다!
Lazy loading은 이제 매력처럼 작동합니다!
사용: https://medium.com/better-programming/upgrade-to-angular-8-beta-within-10-minutes-cd831fb8dd0e

@Denis-Evseev 귀하의 링크에 정말 감사드리며 30분이라는 것을 인증해 주시면 시도해 보겠습니다. :) . 사실 우리는 버전 7에서 2개의 앱을 Angular로 만들었습니다. 그러나 그 중 하나는 정말 크고 이상한 요구 사항과 많은 종속성에 대한 많은 해결 방법이 있습니다. 어쨌든 지금으로서는 우리 모두가 보낼 시간이 너무 많은 것 같으니 곧 시도해 보겠습니다. 감사 해요!

이것이 여러분 모두의 문제라는 점에 대해 유감스럽게 생각합니다. 해결책이 있으면 좋겠지만 문제가 무엇인지 모르겠습니다. 나는 그것이 typescript (및 Angular) 버전과 관련이 있다고 확신합니다. 디버그할 수 있도록 문제를 재현할 수 있는 프로젝트를 만들 수 있기를 원하지만 동시에 Angular 7은 한 달 이내에 더 이상 사용되지 않으며 Angular 팀에서 더 이상 지원하지 않습니다. 나로도.

누구든지 이것을 재현할 수 있는 프로젝트를 공유할 수 있다면 살펴보고 수정하도록 노력하겠습니다.

@Denis-Evseev, 이 라이브러리를 7.0.1 버전으로 다운그레이드할 수 있습니까?

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

npm install 다시 실행하시겠습니까?)

이 문제가 최신 버전에 도입되었는지 아니면 이전 버전에 있었는지 알고 싶습니다.

이 작업을 확인할 수 있습니다(다운그레이드).

7.1.0 버전에서 ng-packagr 을 버전 9.0.0으로 업그레이드

Angular 7의 경우:
ng-lazyload-image 버전을 7.0.1 로 다운그레이드하는 것이 대부분의 사용자에게 적합한 것 같습니다. Angular 팀이 단 몇 주(4월 18일)에 버전 7에 대한 지원을 중단할 것이기 때문에 저는 그렇지 않습니다. 내가 이것을 고칠 것이라고 확신합니다. 그러나 누군가가 원하는 경우 PR을 수락합니다.

1. 이 라이브러리를 확인하십시오
2. ng-packagr 를 5.7.0으로, 타이프스크립트를 3.5.3으로 다운그레이드
3. 이 lib에서 ts 구문을 다운그레이드합니다(빌드를 시도할 때 나타날 ts 문제 수정이라고도 함)
4. 로컬 버전의 lib 빌드(npm run build && cd dist && npm pack)
5. 앱에 번들을 설치합니다(npm install ../path/to/ng-lazyload-image/dist/ng-lazyload-image-7.1.0.tgz).
6. 앱에서 ng build --prod 를 실행하여 오류가 사라지는지 확인합니다.

Angular 8의 경우:
typescript를 3.6.4 업그레이드할 수 있고 작동하는 것 같습니다.

Angular 9의 경우:
이 버전은 typescript 3.7 이상만 지원하므로 여기서는 문제가 없습니다.

내가 어떤 식 으로든 잘못된 경우 알려주십시오.

@Denis-Evseev, 이 라이브러리를 7.0.1 버전으로 다운그레이드할 수 있습니까?

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

npm install 다시 실행하시겠습니까?)

이 문제가 최신 버전에 도입되었는지 아니면 이전 버전에 있었는지 알고 싶습니다.

감사 해요.
그것은 나를 위해 작동합니다!

7.1.0에서 7.0.1로 다운그레이드했을 때 실제로 작동했지만 이 기능이 실제로 7.1.0 버전에서 제공된 것처럼 보이기 때문에 OnStateChange 이벤트를 사용할 수 없다는 것이 밝혀졌습니다. 부울 값만 반환하는 onLoad를 사용해야 했습니다.

@Denis-Evseev가 말했듯이 "7.0.1"로 직접 변경하고 "7.0.1"을 새로 설치할 수 있도록 package.lock 파일에서 "7.1.0"에 대한 참조도 삭제해야 합니다. 1" 버전. 또한 node_modules 디렉토리에서 "ng-lazy-load-image" 폴더를 삭제할 수 있습니다.

Angular 7은 Angular 팀에서 더 이상 지원하지 않으므로 ng-lazyload-image 지원하지 않습니다. 그러나 이 문제를 해결하는 방법에 대한 PR이나 제안을 수락하게 되어 기쁩니다.

Angular 8 또는 9에서 비슷한 문제가 있는 사람이 있으면 새 문제를 만드세요.