當 Angular 在水合過程中找不到節點時,生產建置會顯示這個錯誤。Angular 會沿著一條在伺服器端渲染時儲存的路徑尋找,但路徑上有個節點遺失了。這表示瀏覽器中的 DOM 與來自伺服器的 HTML 不同。
生產建置不包含錯誤訊息,所以你只會看到代碼 NG0509。開發建置會把同樣的問題顯示為錯誤 NG0502,訊息中會告訴你宿主節點與路徑。
常見原因
原因與錯誤 NG0500 相同。另外也要檢查應用程式以外的變更,例如 CDN 功能或瀏覽器擴充功能造成的變更。請閱讀水合指南中的 CDN 與瀏覽器擴充功能。
除錯方式
- 如果你能在開發建置中看到這個問題,請使用開發建置。
NG0502訊息會告訴你宿主節點與路徑。 - 比較生產環境的 HTML 與本機伺服器的 HTML。如果看到
__cf_email__元素,或發現註解節點遺失,原因很可能是某個 CDN 功能。 - 在沒有安裝任何擴充功能的瀏覽器設定檔中開啟頁面。如果錯誤消失了,表示有擴充功能在變更頁面。