The selector “my-app” did not match any elements

Developing my first Angular2 application (baby steps, baby steps), I edit code and, without any changes in the core files (index.html, app.ts, main.ts, etc), the application suddenly won’t start up, and the browser console displays the error message

The selector “my-app” did not match any elements

and an impressive stack dump

angular2.dev.js:23935 EXCEPTION: The selector "my-app" did not match any elements
angular2.dev.js:23925 EXCEPTION: The selector "my-app" did not match any elementsBrowserDomAdapter.logError @ angular2.dev.js:23925
angular2.dev.js:23935 EXCEPTION: Error: Uncaught (in promise): The selector "my-app" did not match any elements
angular2.dev.js:23925 EXCEPTION: Error: Uncaught (in promise): The selector "my-app" did not match any elementsBrowserDomAdapter.logError @ angular2.dev.js:23925
angular2.dev.js:23925 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23925
angular2.dev.js:23925 Error: Uncaught (in promise): The selector "my-app" did not match any elements
 at resolvePromise (angular2-polyfills.js:602)
 at angular2-polyfills.js:638
 at ZoneDelegate.invokeTask (angular2-polyfills.js:423)
 at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (angular2.dev.js:2118)
 at ZoneDelegate.invokeTask (angular2-polyfills.js:422)
 at Zone.runTask (angular2-polyfills.js:320)
 at drainMicroTaskQueue (angular2-polyfills.js:541)
 at XMLHttpRequest.ZoneTask.invoke (angular2-polyfills.js:493)BrowserDomAdapter.logError @ angular2.dev.js:23925
angular2-polyfills.js:528 Unhandled Promise rejection: The selector "my-app" did not match any elements ; Zone: angular ; Task: Promise.then ; Value: BaseExceptionmessage: "The selector "my-app" did not match any elements"stack: "Error: The selector "my-app" did not match any elements? at new BaseException (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:7587:21)? at DomRenderer.selectRootElement (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13997:15)? at DebugDomRenderer.selectRootElement (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:7393:37)? at HostViewFactory.viewFactory_HostAppComponent0 [as viewFactory] (viewFactory_HostAppComponent:72:18)? at AppViewManager_.createRootHostView (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:6665:34)? at http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12521:46? at ZoneDelegate.invoke (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:390:29)? at Object.NgZoneImpl.inner.inner.fork.onInvoke (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:2126:31)? at ZoneDelegate.invoke (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:389:35)? at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:283:44)"__proto__: ErrorconsoleError @ angular2-polyfills.js:528
angular2-polyfills.js:530 Error: Uncaught (in promise): The selector "my-app" did not match any elements(…)consoleError @ angular2-polyfills.js:530
angular2-polyfills.js:528 Unhandled Promise rejection: The selector "my-app" did not match any elements ; Zone: <root> ; Task: Promise.then ; Value: BaseExceptionmessage: "The selector "my-app" did not match any elements"stack: "Error: The selector "my-app" did not match any elements? at new BaseException (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:7587:21)? at DomRenderer.selectRootElement (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13997:15)? at DebugDomRenderer.selectRootElement (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:7393:37)? at HostViewFactory.viewFactory_HostAppComponent0 [as viewFactory] (viewFactory_HostAppComponent:72:18)? at AppViewManager_.createRootHostView (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:6665:34)? at http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12521:46? at ZoneDelegate.invoke (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:390:29)? at Object.NgZoneImpl.inner.inner.fork.onInvoke (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:2126:31)? at ZoneDelegate.invoke (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:389:35)? at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:283:44)"__proto__: ErrorconsoleError @ angular2-polyfills.js:528
angular2-polyfills.js:530 Error: Uncaught (in promise): The selector "my-app" did not match any elements(…)consoleError @ angular2-polyfills.js:530

Opening another browser instance with the same URL does not raise any errors.

Strange.

Replacing the line

 System.import('app/main')

in index.html with

 System.import('./app/main')

seems to fix this behavior – for now, at least.

Update: Seems that joy was premature.

The only way to resolve this condition as of Angular 2.0.0-beta.15 seems to be

• close the web browser tab
• cancel npm lite-server
• restart lite-server using npm start
• completely reload page in browser developer mode

Advertisements