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>标签，该标签会定期报告该错误，因此我感到困惑，因为它无法在页面上看到该标签！

错误详情：

例外：选择器“ my-app”与任何元素都不匹配。BrowserDomAdapter.logError@ angular2.dev.js：22823BrowserDomAdapter.logGroup @ angular2.dev.js：22834ExceptionHandler.call @ angular2.dev.js：1163（匿名函数）@ angular2 .dev.js：12481NgZone._notifyOnError @ angular2.dev.js：13405collection_1.StringMapWrapper.merge.onError @ angular2.dev.js：13309run @ angular2-polyfills.js：141（匿名函数）@ 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 $$内部$$发布@ angular2-polyfills.js：1494（匿名函数）@ angular2-polyfills.js：243microtask @ angular2.dev.js：13360run @ angular2-polyfills.js：138（匿名函数）@ 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（匿名函数）@ angular2.dev.js：12481NgZone._notifyOnError @ angular2.dev.js：13405collection_1.StringMapWrapper.merge.onError @ angular2.dev.js：13309run @ angular2-polyfills.js：141 （匿名函数）@ 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（匿名函数）@ angular2-polyfills.js：243microtask @ angular2.dev.js：13360run @ angular2-polyfills.js ：138（匿名函数）@ angular2.dev.js：13328zoneBoundFn @ angular2-polyfills.js：111lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js：1305 angular2.dev.js：22823错误：选择器“ my-app”与新BaseException上的任何元素均不匹配（http：// localhost：3000 / node_modules / angular2 / bundles / angular2.dev.js：7104：21）位于DomRenderer.selectRootElement（http：// localhost：3000 / node_modules / angular2 / bundles / angular2.dev.js：13724 ：15）在HostViewFactory.viewFactory_HostAppComponent0 [作为viewFactory]（viewFactory_HostAppComponent：72：18）在AppViewManager_.createRootHostView（http：// localhost：3000 / node_modules / angular2 / bundles / angular2.dev.js：9226：34）在http：// 在Zone.run上的//localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12246:46（http：// localhost：3000 / node_modules / angular2 / bundles / angular2-polyfills.js：138：17）在Zone.run（http：// localhost：3000 / node_modules / angular2 / bundles / angular2.dev.js：13328：32）在zoneBoundFn（http：// localhost：3000 / node_modules / angular2 / bundles / angular2-polyfills.js：111：19）处lib $ es6 $ promise $$ internal $$ tryCatch（http：// localhost：3000 / node_modules /angular2/bundles/angular2-polyfills.js:1511:16）位于lib $ es6 $ promise $$ internal $$ invokeCallback（http：// localhost：3000 / node_modules / angular2 / bundles / angular2-polyfills.js：1523： 17）

-----异步间隙-----在_getStacktraceWithUncaughtError错误（HTTP：//本地主机：3000 / node_modules / angular2 /捆绑/ angular2-polyfills.js：2195：26）在Zone.fork（HTTP：//本地主机：3000 / node_modules / angular2 / bundles / angular2-polyfills.js：2253：40）在bindArguments的Zone.bind（http：// localhost：3000 / node_modules / angular2 / bundles / angular2-polyfills.js：109：48） （http：// localhost：3000 / node_modules / angular2 / bundles / angular2-polyfills.js：980：29），位于lib $ es6 $ promise $ promise $$ Promise.obj。（匿名函数）[当时]（http： //本地主机：3000 / node_modules / angular2 / bundles / angular2-polyfills.js：1000：37），位于DynamicComponentLoader_.loadAsRoot（http：// localhost：3000 / node_modules / angular2 / bundles / angular2.dev.js：12245：49）位于di_1.provide.useFactory（http：// localhost：3000 / node_modules / angular2 / bundles / angular2.dev.js ：12343：39）在Injector._instantiate（http：// localhost：3000 / node_modules / angular2 / bundles / angular2.dev.js：11354：19）在Injector._instantiateProvider（http：// localhost：3000 / node_modules / angular2 /bundles/angular2.dev.js:11287:21）在Injector._new（http：// localhost：3000 / node_modules / angular2 / bundles / angular2.dev.js：11277：19）

-----异步间隙-----在_getStacktraceWithUncaughtError错误（HTTP：//本地主机：3000 / node_modules / angular2 /捆绑/ angular2-polyfills.js：2195：26）在Zone.fork（HTTP：//本地主机：位于NgZone._createInnerZone（http：// localhost：3000 / node_modules / angular2 / bundles / angular2.dev.js：13316：39）的NgZone._3000 / node_modules / angular2 / bundles / angular2-polyfills.js：2253：40）NgZone（http：// localhost：3000 / node_modules / angular2 / bundles / angular2.dev.js：13182：32）在createNgZone（http：// localhost：3000 / node_modules / angular2 / bundles / angular2.dev.js：12365 ：12）在PlatformRef_.application（http：// localhost：3000 / node_modules / angular2 / bundles / angular2.dev.js：12440：31）执行（http：// localhost：3000 / app / main.js：15：23）在Object.bootstrap（http：// localhost：3000 / node_modules / angular2 / bundles / angular2.dev.js：24543：64））在ensureEvaluated（HTTP：//本地主机：3000 / node_modules / systemjs / DIST / system.src.js：3202：26）在Object.execute（HTTP：//本地主机：3000 / node_modules / systemjs / DIST / system.src .js：3323：13）BrowserDomAdapter.logError @ angular2.dev.js：22823ExceptionHandler.call @ angular2.dev.js：1166（匿名函数）@ angular2.dev.js：12481NgZone._notifyOnError@angular2.dev.js：13405collection_1.StringMapWrapper.merge.onError@angular2.dev .js：13309run @ angular2-polyfills.js：141（匿名函数）@ 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（匿名函数）@ angular2-polyfills.js：243microtask @ angular2 .dev.js：13360run @ angular2-polyfills.js：138（匿名函数）@ 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>