Angular2 - The selector "my-app" did not match any elements (only on first load)

Question

Does anyone know why I get this error when the page loads the first time in my Angular2 app? It clears away and doesn't come back as I navigate through my app. If I hit CTRL+F5 it tends to come back (though not every single time!). This routing for this app looks like this:

AppComponent.ts
  LoginComponent.ts
  DashboardComponent(Parent route with its own child routes)
    MainDashboardComponent
    EmployeesComponent

The top level index.html file has the <my-app></my-app> tag in it that the error complains about periodically so I'm confused how it could be that it wouldn't see that tag on the page!

Error Details:

EXCEPTION: The selector "my-app" did not match any elementsBrowserDomAdapter.logError @ angular2.dev.js:22823BrowserDomAdapter.logGroup @ angular2.dev.js:22834ExceptionHandler.call @ angular2.dev.js:1163(anonymous function) @ angular2.dev.js:12481NgZone._notifyOnError @ angular2.dev.js:13405collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13309run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:13328zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:13360run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:13328zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305 angular2.dev.js:22823 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:22823ExceptionHandler.call @ angular2.dev.js:1165(anonymous function) @ angular2.dev.js:12481NgZone._notifyOnError @ angular2.dev.js:13405collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13309run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:13328zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:13360run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:13328zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305 angular2.dev.js:22823 Error: The selector "my-app" did not match any elements at new BaseException (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:7104:21) at DomRenderer.selectRootElement (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13724:15) at HostViewFactory.viewFactory_HostAppComponent0 [as viewFactory] (viewFactory_HostAppComponent:72:18) at AppViewManager_.createRootHostView (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:9226:34) at http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12246:46 at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:138:17) at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13328:32) at zoneBoundFn (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:111:19) at lib$es6$promise$$internal$$tryCatch (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1511:16) at lib$es6$promise$$internal$$invokeCallback (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1523:17)

-----async gap----- Error at _getStacktraceWithUncaughtError (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26) at Zone.fork (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40) at Zone.bind (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:109:48) at bindArguments (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:980:29) at lib$es6$promise$promise$$Promise.obj.(anonymous function) [as then] (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1000:37) at DynamicComponentLoader_.loadAsRoot (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12245:49) at di_1.provide.useFactory (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12343:39) at Injector._instantiate (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:11354:19) at Injector._instantiateProvider (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:11287:21) at Injector._new (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:11277:19)

-----async gap----- Error at _getStacktraceWithUncaughtError (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26) at Zone.fork (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40) at NgZone._createInnerZone (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13316:39) at new NgZone (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13182:32) at createNgZone (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12365:12) at PlatformRef_.application (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12440:31) at Object.bootstrap (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24543:64) at execute (http://localhost:3000/app/main.js:15:23) at ensureEvaluated (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3202:26) at Object.execute (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3323:13)BrowserDomAdapter.logError @ angular2.dev.js:22823ExceptionHandler.call @ angular2.dev.js:1166(anonymous function) @ angular2.dev.js:12481NgZone._notifyOnError @ angular2.dev.js:13405collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13309run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:13328zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:13360run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:13328zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305

Solution 1

Probably you should add your <script> tag in your index.html file after </body> tag.

Your script should run after DOM is ready.

Update:

<body>
  <my-app>Loading...</my-app>
  <script>
    //Your scripts
  </script>
</body>

Solution 2

I guess there is no element in index.html that matches the selector in AppComponent.

Comments

[Vigneshwaran Markandan]

Thanks a lot, I struggled lot for this :)