Angular - TypeError: Cannot read property 'nodeName' of null

Question

I have updated a lot of dependencies of my project, it's based on a theme that recently released a new version and I updated my project with this new version.

The problem, is that I'm having many issues after the updates (as I expected), but after fixing all compiler issues I find myself with this error:

Error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nodeName' of null TypeError: Cannot read property 'nodeName' of null at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (http://localhost:4200/0.chunk.js:6326:8), :159:258)

My 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"
  }
}

In a desperate attempt, I reinstalled: script-loader dependency, just to be sure.

I am pretty clueless, any tip or advice or even solution would be much appreciated!

Thanks in advice!

Update 1:

I have posted a more clear and updated image of the error that I find in console.

When I click on those errors (See code line 6329), I get here:

If anybody has a clue of what is causing the error or even know a good way to debug it and find the issue it would be of great help!

Is nodeName a variable in your own code or does it come from a package? Can you identify what package it comes from? — Raven
– Raven, Commented Jun 15, 2017 at 9:15
@Raven Is not a variable but a DOM API property: developer.mozilla.org/en-US/docs/Web/API/Node/nodeName — SrAxi
– SrAxi, Commented Jun 15, 2017 at 9:26

SrAxi · Accepted Answer · 2017-06-16 15:59:21Z

I have found the issue: DataTables.

I'm using the DataTables library, and is having an issue with the initialization of the table.

I could not fix the DataTables issue yet, but this is the source of the error.

So, in order to make this question useful and don't delete it I'll explain how I got to that conclusion:

TypeError: Cannot read property 'nodeName' of null is typical in jQuery, so, start searching in your main jQuery libraries is a good option.
After navigating and seing that it was happening only in that view, I started analyzing 1 by 1 all the components of that view.
Reinstall your npm packages. If you did a huge upgrade of your project, removing node_modules and typing npm install in console can be of help (even if drastic, but helped me).
Use Chrome's debugger.
Use console logs.
If you are using a theme, and this theme is working properly. Try to break it adding your stuff one at a time until it breaks. There has to be a reason for your App breaking but your App's theme not breaking.
Compare projects (the theme's project and yours) in order to point out potential code issues.

I hope this may help someone that's stuck with this issue for a while.

Breaking my App to find the issue I have found that many libraries throw this error, all of them were jQuery based libraries.

Good luck!

armyllc · Accepted Answer · 2017-12-21 17:43:38Z

1

Make sure your table has the same element count in thead, tbody, tfoot. If you have 10 headers, 10 body columns, but 9 footers, it will not find the footer node and you will see the error. Common mistake would be adding additional column, but forgetting adding the footer (if any).

edited Dec 21, 2017 at 17:43

answered Dec 21, 2017 at 17:38

armyllc

1762 silver badges7 bronze badges

Comments

Jeffrey Roosendaal · Accepted Answer · 2019-05-15 17:21:00Z

0

I had this issue when working with an hybrid app (AngularJS and Angular) in a migration process.

In my downgrade file, a component was declared twice:

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

answered May 15, 2019 at 17:21

Jeffrey Roosendaal

7,1978 gold badges45 silver badges58 bronze badges

Comments

Varun Sreedharan · Accepted Answer · 2020-12-18 11:27:46Z

0

The number of tfoot columns doesn't match the number of thead columns. That is likely the issue.

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

Thanks

answered Dec 18, 2020 at 11:27

Varun Sreedharan

5778 silver badges29 bronze badges

Comments

H. Almidan · Accepted Answer · 2021-06-03 16:44:03Z

0

Removing responsive: true (a property that I'm no longer using) from DataTable({...}) fixed it.

Extra details:

package.json:

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

answered Jun 3, 2021 at 16:44

H. Almidan

5284 silver badges12 bronze badges

1 Comment

H. Almidan Over a year ago

Obviously, this solution is not ideal if you want to use the responsive property. I'm not sure why exactly this fixes it, as the console error seems to be a nested jQuery error that's a bit hard to read. Hope it helps someone.

Collectives™ on Stack Overflow

Angular - TypeError: Cannot read property 'nodeName' of null

5 Answers 5

Comments

Comments

Comments

Comments

Extra details:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Extra details:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related