Runtime Error Illegal State: Content Query nodes need to be children of directives, at index 0!

Ionic Framework ionic-v3
1 
Error: Illegal State: Content Query nodes need to be children of directives, at index 0!
    at d (http://localhost:8100/build/polyfills.js:3:3991)
    at validateNode (http://localhost:8100/build/main.js:12307:19)
    at viewDef (http://localhost:8100/build/main.js:12204:9)
    at View_IonicApp_0 (ng:///IonicModule/IonicApp.ngfactory.js:11:10)
    at proxyClass (http://localhost:8100/build/main.js:102775:29)
    at resolveViewDefinition (http://localhost:8100/build/main.js:9289:17)
    at createViewNodes (http://localhost:8100/build/main.js:12399:56)
    at createRootView (http://localhost:8100/build/main.js:12343:5)
    at callWithDebugContext (http://localhost:8100/build/main.js:13558:42)
    at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/main.js:13018:12)
    at ComponentFactory_.create (http://localhost:8100/build/main.js:10264:46)
    at ComponentFactoryBoundToModule.create (http://localhost:8100/build/main.js:3800:29)
    at ApplicationRef_.bootstrap (http://localhost:8100/build/main.js:5384:57)
    at http://localhost:8100/build/main.js:5173:79
    at Array.forEach (native)

Has anyone seen this before ? I am unable to figure out what I am doing wrong.

image
image.png1087×750 150 KB 


IonicApp_Host.html:1 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 0, nodeDef: Object, elDef: Object, elView: Object}
View_IonicApp_Host_0 @ IonicApp_Host.html:1
proxyClass @ compiler.es5.js:13572
DebugContext_.logError @ core.es5.js:13146
ErrorHandler.handleError @ core.es5.js:1149
IonicErrorHandler.handleError @ ionic-error-handler.js:63
(anonymous) @ core.es5.js:4684
t.invoke @ polyfills.js:3
onInvoke @ core.es5.js:4149
t.invoke @ polyfills.js:3
n.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.es5.js:4140
t.invokeTask @ polyfills.js:3
n.runTask @ polyfills.js:3
a @ polyfills.js:3
polyfills.js:3 Unhandled Promise rejection: Illegal State: Content Query nodes need to be children of directives, at index 0! ; Zone: <root> ; Task: Promise.then ; Value: Error: Illegal State: Content Query nodes need to be children of directives, at index 0!
    at d (http://localhost:8100/build/polyfills.js:3:3991)
    at validateNode (http://localhost:8100/build/main.js:12307:19)
    at viewDef (http://localhost:8100/build/main.js:12204:9)
    at View_IonicApp_0 (ng:///IonicModule/IonicApp.ngfactory.js:11:10)
    at proxyClass (http://localhost:8100/build/main.js:102775:29)
    at resolveViewDefinition (http://localhost:8100/build/main.js:9289:17)
    at createViewNodes (http://localhost:8100/build/main.js:12399:56)
    at createRootView (http://localhost:8100/build/main.js:12343:5)
    at callWithDebugContext (http://localhost:8100/build/main.js:13558:42)
    at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/main.js:13018:12)
    at ComponentFactory_.create (http://localhost:8100/build/main.js:10264:46)
    at ComponentFactoryBoundToModule.create (http://localhost:8100/build/main.js:3800:29)
    at ApplicationRef_.bootstrap (http://localhost:8100/build/main.js:5384:57)
    at http://localhost:8100/build/main.js:5173:79
    at Array.forEach (native) Error: Illegal State: Content Query nodes need to be children of directives, at index 0!
    at d (http://localhost:8100/build/polyfills.js:3:3991)
    at validateNode (http://localhost:8100/build/main.js:12307:19)
    at viewDef (http://localhost:8100/build/main.js:12204:9)
    at View_IonicApp_0 (ng:///IonicModule/IonicApp.ngfactory.js:11:10)
    at proxyClass (http://localhost:8100/build/main.js:102775:29)
    at resolveViewDefinition (http://localhost:8100/build/main.js:9289:17)
    at createViewNodes (http://localhost:8100/build/main.js:12399:56)
    at createRootView (http://localhost:8100/build/main.js:12343:5)
    at callWithDebugContext (http://localhost:8100/build/main.js:13558:42)
    at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/main.js:13018:12)
    at ComponentFactory_.create (http://localhost:8100/build/main.js:10264:46)
    at ComponentFactoryBoundToModule.create (http://localhost:8100/build/main.js:3800:29)
    at ApplicationRef_.bootstrap (http://localhost:8100/build/main.js:5384:57)
    at http://localhost:8100/build/main.js:5173:79
    at Array.forEach (native)
o @ polyfills.js:3
i @ polyfills.js:3
(anonymous) @ polyfills.js:3
a @ polyfills.js:3
polyfills.js:3 Error: Uncaught (in promise): Error: Illegal State: Content Query nodes need to be children of directives, at index 0!
Error: Illegal State: Content Query nodes need to be children of directives, at index 0!
    at d (http://localhost:8100/build/polyfills.js:3:3991)
    at validateNode (http://localhost:8100/build/main.js:12307:19)
    at viewDef (http://localhost:8100/build/main.js:12204:9)
    at View_IonicApp_0 (ng:///IonicModule/IonicApp.ngfactory.js:11:10)
    at proxyClass (http://localhost:8100/build/main.js:102775:29)
    at resolveViewDefinition (http://localhost:8100/build/main.js:9289:17)
    at createViewNodes (http://localhost:8100/build/main.js:12399:56)
    at createRootView (http://localhost:8100/build/main.js:12343:5)
    at callWithDebugContext (http://localhost:8100/build/main.js:13558:42)
    at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/main.js:13018:12)
    at ComponentFactory_.create (http://localhost:8100/build/main.js:10264:46)
    at ComponentFactoryBoundToModule.create (http://localhost:8100/build/main.js:3800:29)
    at ApplicationRef_.bootstrap (http://localhost:8100/build/main.js:5384:57)
    at http://localhost:8100/build/main.js:5173:79
    at Array.forEach (native)
    at d (http://localhost:8100/build/polyfills.js:3:3991)
    at validateNode (http://localhost:8100/build/main.js:12307:19)
    at viewDef (http://localhost:8100/build/main.js:12204:9)
    at View_IonicApp_0 (ng:///IonicModule/IonicApp.ngfactory.js:11:10)
    at proxyClass (http://localhost:8100/build/main.js:102775:29)
    at resolveViewDefinition (http://localhost:8100/build/main.js:9289:17)
    at createViewNodes (http://localhost:8100/build/main.js:12399:56)
    at createRootView (http://localhost:8100/build/main.js:12343:5)
    at callWithDebugContext (http://localhost:8100/build/main.js:13558:42)
    at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/main.js:13018:12)
    at ComponentFactory_.create (http://localhost:8100/build/main.js:10264:46)
    at ComponentFactoryBoundToModule.create (http://localhost:8100/build/main.js:3800:29)
    at ApplicationRef_.bootstrap (http://localhost:8100/build/main.js:5384:57)
    at http://localhost:8100/build/main.js:5173:79
    at Array.forEach (native)
    at d (http://localhost:8100/build/polyfills.js:3:3991)
    at l (http://localhost:8100/build/polyfills.js:3:3244)
    at http://localhost:8100/build/polyfills.js:3:2600
    at http://localhost:8100/build/polyfills.js:3:14556
    at t.invoke (http://localhost:8100/build/polyfills.js:3:11562)
    at n.run (http://localhost:8100/build/polyfills.js:3:6468)
    at http://localhost:8100/build/polyfills.js:3:3767
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12256)
    at n.runTask (http://localhost:8100/build/polyfills.js:3:7153)
    at a (http://localhost:8100/build/polyfills.js:3:2312)
    at <anonymous>

My package.json

{
  "name": "ionic-hello-world",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "^4.1.3",
    "@angular/compiler": "4.0.2",
    "@angular/compiler-cli": "4.0.2",
    "@angular/core": "^4.1.3",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@ionic-native/core": "3.6.1",
    "@ionic-native/geolocation": "^3.6.1",
    "@ionic-native/network": "^3.8.0",
    "@ionic-native/splash-screen": "3.6.1",
    "@ionic-native/status-bar": "3.6.1",
    "@ionic/storage": "2.0.1",
    "@types/decimal.js": "0.0.21-alpha",
    "@types/leaflet": "^1.0.60",
    "@types/long": "^3.0.31",
    "@types/node": "^7.0.22",
    "angular2-uuid": "^1.1.1",
    "aws-sdk": "^2.49.0",
    "cordova-android": "^6.2.3",
    "cordova-plugin-compat": "^1.1.0",
    "cordova-plugin-console": "1.0.5",
    "cordova-plugin-device": "1.1.4",
    "cordova-plugin-geolocation": "^2.4.3",
    "cordova-plugin-network-information": "^1.3.3",
    "cordova-plugin-splashscreen": "~4.0.1",
    "cordova-plugin-statusbar": "2.2.2",
    "cordova-plugin-whitelist": "1.3.1",
    "decimal": "0.0.2",
    "ionic-angular": "3.1.1",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "3.0.0",
    "istanbul": "^0.4.5",
    "leaflet": "^1.0.3",
    "nodes2ts": "^1.1.9",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@angular/common": "^4.1.3",
    "@ionic/app-scripts": "1.3.7",
    "@ionic/cli-plugin-ionic-angular": "1.2.0",
    "@types/node": "^7.0.22",
    "typescript": "^2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard",
    "cordova-plugin-splashscreen"
  ],
  "cordovaPlatforms": [],
  "description": "s: An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-geolocation": {}
    },
    "platforms": [
      "android"
    ]
  }
}
2

I’m having the same problem, did you find a solution?

3

Here’s where that error originates.

4

It’s got to do with npm dependencies. Run the command ncu in your project folder to check if your package.json versions match the installed versions. If not, run the command ncu -a to update. If there’s a notification for another update with command npm i -g npm-check-updates, run that too. Then do npm install. Should work now.

5