프로덕션 빌드에서는 Angular가 하이드레이션 중 노드를 찾을 수 없을 때 이 오류가 표시됩니다. Angular는 서버 사이드 렌더링 중 저장한 경로를 따라가지만, 이 경로에 있어야 할 노드가 누락되어 있습니다. 이는 브라우저의 DOM이 서버에서 받은 HTML과 다르다는 뜻입니다.
프로덕션 빌드에는 오류 메시지가 포함되지 않으므로 NG0509 코드만 표시됩니다.
개발 빌드에서는 같은 문제를 NG0502 오류로 표시하며, 메시지에 호스트 노드와 경로가 나옵니다.
일반적인 원인
원인은 NG0500 오류와 같습니다. CDN 기능이나 브라우저 확장 프로그램처럼 애플리케이션 외부에서 발생하는 변경도 확인하세요. 하이드레이션 가이드의 CDN과 브라우저 확장 프로그램을 참고하세요.
오류 디버깅
- 개발 빌드에서 문제를 재현할 수 있다면 해당 빌드를 사용하세요.
NG0502메시지에서 호스트 노드와 경로를 확인할 수 있습니다. - 프로덕션의 HTML과 로컬 서버의 HTML을 비교하세요.
__cf_email__엘리먼트가 있거나 주석 노드가 누락되었다면 CDN 기능이 원인일 가능성이 높습니다. - 확장 프로그램이 없는 브라우저 프로필에서 페이지를 여세요. 오류가 사라진다면 확장 프로그램이 페이지를 변경하고 있는 것입니다.