Angular - TypeError：無法讀取 null 的屬性“nodeName”

Question

我更新了我的項目的很多依賴項，它基於最近發布新版本的主題，我用這個新版本更新了我的項目。

問題是，更新后我遇到了很多問題（正如我所料），但是在修復了所有編譯器問題后，我發現自己遇到了這個錯誤：

錯誤：

錯誤錯誤：未捕獲（承諾）：TypeError：無法讀取 null 的屬性 'nodeName' TypeError：無法在 eval 中讀取 null 的屬性 'nodeName'（eval at webpackJsonp.../../../../script- loader/addScript.js.module.exports ( http://localhost:4200/0.chunk.js:6326:8 ), :159:258)

我的 package.json：

{
  "name": "projectName",
  "version": "1.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "build:dev": "./node_modules/.bin/ng build",
    "build:prod": "./node_modules/.bin/ng build --prod --aot=false",
    "build:aot": "./node_modules/.bin/ng build --prod --aot",
    "build:aot2": "node --max_old_space_size=4096 ./node_modules/.bin/ng build --prod --aot",
    "build": "npm run build:dev",
    "clean:dist": "npm run rimraf -- dist",
    "clean:install": "npm set progress=false && npm install",
    "clean:start": "npm start",
    "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
    "e2e:live": "npm run e2e -- --elementExplorer",
    "e2e": "npm run protractor",
    "lint": "npm run tslint \"src/**/*.ts\"",
    "postversion": "git push && git push --tags",
    "prebuild:dev": "npm run clean:dist",
    "prebuild:prod": "npm run clean:dist",
    "preclean:install": "npm run clean",
    "preclean:start": "npm run clean",
    "preversion": "npm test",
    "protractor": "protractor",
    "rimraf": "rimraf",
    "server:dev": "./node_modules/.bin/ng serve",
    "server": "npm run server:dev",
    "start": "npm run server:dev",
    "test": "./node_modules/.bin/ng test",
    "tslint": "tslint",
    "typedoc": "typedoc",
    "version": "npm run build",
    "ng": "ng",
    "pree2e": "webdriver-manager update --standalone false --gecko false"
  },
  "private": true,
  "dependencies": {
    "@angular-redux/store": "^6.4.5",
    "@angular/animations": "^4.2.2",
    "@angular/cli": "^1.1.1",
    "@angular/common": "^4.2.2",
    "@angular/compiler": "^4.2.2",
    "@angular/compiler-cli": "^4.2.2",
    "@angular/core": "^4.2.2",
    "@angular/forms": "^4.2.2",
    "@angular/http": "^4.2.2",
    "@angular/platform-browser": "^4.2.2",
    "@angular/platform-browser-dynamic": "^4.2.2",
    "@angular/router": "^4.2.2",
    "X-editable": "github:vitalets/x-editable",
    "angular-2-dropdown-multiselect": "^1.3.2",
    "bootstrap": "3.3.7",
    "bootstrap-colorpicker": "2.5.1",
    "bootstrap-duallistbox": "3.0.6",
    "bootstrap-markdown": "2.10.0",
    "bootstrap-progressbar": "0.9.0",
    "bootstrap-slider": "^9.8.0",
    "bootstrap-tagsinput": "0.7.1",
    "bootstrap-timepicker": "0.5.2",
    "chart.js": "2.6.0",
    "classlist.js": "^1.1.20150312",
    "clockpicker": "0.0.7",
    "clone": "2.1.1",
    "core-js": "2.4.1",
    "debounce": "^1.0.2",
    "dropzone": "^5.1.0",
    "dygraphs": "2.0.0",
    "fuelux": "^3.16.0",
    "he": "1.1.1",
    "highcharts": "5.0.12",
    "intl": "^1.2.5",
    "ion-rangeslider": "2.1.7",
    "jquery": "^3.2.1",
    "jquery-color": "1.0.0",
    "jquery-jcrop": "0.9.13",
    "jquery-knob": "1.2.11",
    "jquery-ui-npm": "1.12.0",
    "jquery-validation": "1.16.0",
    "jquery.maskedinput": "1.4.1",
    "markdown": "0.5.0",
    "morris.js": "0.5.0",
    "ng2-datetime": "https://github.com/elt/ng2-datetime/tarball/dynamic_template",
    "ng2-logger": "^1.0.3",
    "ngx-bootstrap": "^1.7.1",
    "ngx-popover": "0.0.16",
    "nouislider": "10.0.0",
    "raphael": "2.2.7",
    "redux": "^3.6.0",
    "rxjs": "^5.4.0",
    "scriptjs": "2.5.8",
    "select2": "4.0.3",
    "smartadmin-plugins": "^1.0.20",
    "summernote": "^0.8.4",
    "to-markdown": "3.0.4",
    "ts-helpers": "1.1.2",
    "web-animations-js": "^2.2.5",
    "webpack": "^2.6.1",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.52",
    "@types/jquery": "2.0.46",
    "@types/node": "7.0.31",
    "codelyzer": "3.0.1",
    "css-loader": "0.28.4",
    "exports-loader": "0.6.4",
    "expose-loader": "0.7.3",
    "file-loader": "0.11.2",
    "imports-loader": "0.7.1",
    "jasmine-core": "2.6.3",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-remap-istanbul": "0.6.0",
    "protractor": "5.1.2",
    "raw-loader": "0.5.1",
    "script-loader": "^0.7.0",
    "style-loader": "0.18.2",
    "ts-node": "3.0.6",
    "tslint": "5.4.3",
    "typescript": "2.3.4",
    "url-loader": "0.5.9"
  },
  "engines": {
    "node": ">= 4.2.1",
    "npm": ">= 3"
  }
}

在絕望的嘗試中，我重新安裝了： script-loader依賴項，只是為了確定。

我很無能，任何提示或建議甚至解決方案都將不勝感激！

謝謝指教！

更新 1：

我已經發布了我在控制台中發現的錯誤的更清晰和更新的圖像。

當我點擊這些錯誤（見代碼行 6329）時，我會到這里：

如果有人知道導致錯誤的原因，或者甚至知道調試它並找到問題的好方法，那將有很大幫助！

Answer 1

我發現了問題： DataTables 。

我正在使用 DataTables 庫，並且在表的初始化方面遇到了問題。

我還無法修復 DataTables 問題，但這是錯誤的根源。

因此，為了使這個問題有用並且不要刪除它，我將解釋我是如何得出這個結論的：

1. TypeError: Cannot read property 'nodeName' of null在 jQuery 中是典型的，所以，開始在你的主要 jQuery 庫中搜索是一個不錯的選擇。
2. 在導航並看到它僅在該視圖中發生后，我開始 1 對 1 分析該視圖的所有組件。
3. 重新安裝你的 npm 包。 如果您對項目進行了大規模升級，刪除node_modules並在控制台中鍵入npm install可能會有所幫助（即使很激烈，但對我有幫助）。
4. 使用 Chrome 的調試器。
5. 使用控制台日志。
6. 如果您正在使用一個主題，並且該主題工作正常。 嘗試打破它一次添加你的東西，直到它打破。 您的應用程序中斷必須有一個原因，但您的應用程序主題沒有中斷。
7. 比較項目（主題的項目和您的項目）以指出潛在的代碼問題。

我希望這可以幫助那些被這個問題困擾了一段時間的人。

Breaking my App to find the issue 我發現很多庫都會拋出這個錯誤，它們都是基於 jQuery 的庫。

祝你好運！

Answer 2

確保您的表在 thead、tbody、tfoot 中具有相同的元素計數。 如果您有 10 個標題、10 個正文列，但有 9 個頁腳，它將找不到頁腳節點，您將看到錯誤。 常見的錯誤是添加額外的列，但忘記添加頁腳（如果有）。

Answer 3

我在遷移過程中使用混合應用程序（AngularJS 和 Angular）時遇到了這個問題。

在我的降級文件中，一個組件被聲明了兩次：

angular.module('myApp')
    ...
    .directive(
        'myDowngradedComponent',
        downgradeComponent({ component: myDowngradedComponent }) as angular.IDirectiveFactory
    )
    ...
    .directive(
        'myDowngradedComponent',
        downgradeComponent({ component: myDowngradedComponent }) as angular.IDirectiveFactory
    )
    ...

Answer 4

tfoot列的數量與thead列的數量不匹配。 這很可能是問題所在。

參考： https : //datatables.net/forums/discussion/50611/cannot-read-property-nodename-of-null-when-i-am-adding-row-in-tfoot

謝謝

Answer 5

從DataTable({...})刪除responsive: true （我不再使用的屬性DataTable({...})修復了它。

---

額外的細節：

package.json :

...
"datatables.net-bs4": "^1.10.20",
"datatables.net-responsive-bs4": "^2.2.3",
"datatables.net-rowgroup-bs4": "^1.1.1",
...