Angular2 - 选择器 "my-app"与任何元素都不匹配(仅在第一次加载时)

Question

有谁知道为什么当我的 Angular2 应用程序中第一次加载页面时会出现此错误？当我浏览我的应用程序时，它会消失并且不会再出现。如果我按 CTRL+F5，它往往会回来(尽管不是每次都如此!)。该应用程序的路由如下所示:

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

顶级index.html 文件具有<my-app></my-app>标签中的错误会定期提示，所以我很困惑它怎么可能在页面上看不到该标签!

错误详细信息:

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

Answer 1

也许您应该添加您的 <script>在你的index.html文件中</body>之后标记标签。

您的脚本应该在 DOM 准备好后运行。

更新:

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