Question

我已经更新了我的项目的很多依赖项，它基于最近发布新版本的主题，并且我使用这个新版本更新了我的项目。

问题是，我在更新后遇到了很多问题（正如我所料），但在修复所有编译器问题后，我发现自己有这个错误：

错误：

错误错误：未捕获（在承诺中）：TypeError：无法读取属性 'nodeName'为null TypeError：无法读取null的属性'nodeName' 在eval（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问题，但这是错误的来源。

所以，为了使这个问题有用并且不删除它，我将解释我是如何得出这个结论的：

TypeError: Cannot read property 'nodeName' of null在jQuery中是典型的，因此，开始在主jQuery库中搜索是一个不错的选择。
导航并看到它只在该视图中发生后，我开始逐一分析该视图的所有组件。
重新安装您的npm包。如果您对项目进行了大幅升级，删除node_modules并在控制台中输入npm install可能会有所帮助（即使是激烈的，但帮助了我）。
使用Chrome的调试程序。
使用控制台日志。
如果您使用的是主题，则此主题正常运行。尝试打破它，一次添加一个东西，直到它中断。您的应用程序需要破解，但您的应用程序的主题不会中断。
比较项目（主题项目和您的项目）以指出潜在的代码问题。

我希望这可以帮助那些暂时解决这个问题的人。

打破我的应用程序以找到问题我发现许多库都抛出了这个错误，所有这些都是基于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

从 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",
...

Angular - TypeError：无法读取null

5 个答案:

额外的细节：