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
Pingback: Migrating a TypeScript application from ASP.Net MVC to Angular2 – Lessons Learned | devioblog