Angular2-选择器my-app不匹配任何元素（仅在第一次加载时）

Question

有人知道我第一次在Angular2应用程序中加载页面时出现此错误的原因吗？当我浏览我的应用程序时，它会清除，不会回来。如果我按CTRL-F5键，它会返回（虽然不是每次都会）。此应用程序的路由如下所示：

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

顶级索引。html文件具有

错误详细信息：

例外：选择器my-app不匹配任何元素BrowserDomAdapter.log错误@angular2.dev.js:22823BrowserDomAdapter.log组@angular2.dev.js:[e-mail]:1163（匿名函数) @ <[e-mail]:13405collection_1。StringMapWrapper.merge.on错误@angular2.dev.js:[e-mail]:141（匿名函数）@angular2.dev.js:[e-mail]:111lib$es6$promise$$内部$$try [e-mail]:1511lib$es6$promise$$内部$$调用回调@angular2-polyfills.js:1523lib$es6$promise$$内部$$发布@angular2-polyfills.js:1494（匿名函数）@angular2-polyfills.js:243微任务@angular2.dev.js:13360运行@angular2-polyfills.js:138（匿名函数）@angular2.dev.js:13328zoneBoundFn@angular2js： 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$$内部$$try Catch@angular2-Polyfills. js： 1511lib$es6$promise$内部$$调用@angular2-Polyfills. js： 1523lib$es6$promise$内部$$发布@angular2-Polyfills. js： 1494（匿名函数）@angular2-polfills. js： 243microment@angular2. dev. js： 13360run@angular2-polfills. js： 138（匿名函数）@angular2. dev. js： 13328zoneBoundFn@angular2-polfills. js： 111lib$es6$promise$asap$$flush@angular2-polfills. js： 1305 angular2. dev. js： 22823错误：选择器“我的应用程序”与新BaseExcture中的任何元素不匹配（超文本传输协议：//localhost： 3000/node_modules/angular2/bundles/angular2. dev. js： 7104:21）在DomRenderer. selectRootElement（超文本传输协议：//localhost： 3000/node_modules/angular2/bundles/angular2. dev. js： 13724:15）在HostViewFactory。viewFactory_HostAppComponent0[作为视工厂]（viewFactory_HostAppComponent： 72:18）在AppViewManager_. createRootHostView（超文本传输协议：//localhost： 3000/node_modules/angular2/bundles/angular2. dev. js： 9226： 34）在Zone. run（超文本传输协议：//localhost： 3000/node_modules/angular2/bundles/angular2. dev. js： 12246:46）在Zone. run（超文本传输协议：//localhost： 3000/node_modules/angular2/bundles/angular2-Polyfills. js： 138:17）在ZoneBoundFn（超文本传输协议：//localhost： 3000/node_modules/angular2/bundles/angular2. dev. js： 13328:32）传输协议：//localhost： 3000/node_modules/angular2/bundles/angular2-polfills. js： 111:19）在lib$es6$promise$$内部$$tryCatch（超文本传输协议：//localhost： 3000/node_modules/angular2/bundles/angular2-polfills. js： 1511:16）在lib$es6$promise$$内部$$调用（超文本传输协议：//localhost： 3000/node_modules/angular2/bundles/angular2-polfills. js： 1523:17）

-----异步间隙------在_GetStackTraceWithUnCughtError处出错(http://localhost:3000/node_modules/angular2/bundles/angular2-多填料。js:2195:26）在分区。叉子(http://localhost:3000/node_modules/angular2/bundles/angular2-多填料。js:2253:40）在分区。束缚(http://localhost:3000/node_modules/angular2/bundles/angular2-多填料。js:109:48）在bindArguments(http://localhost:3000/node_modules/angular2/bundles/angular2-多填料。js:980:29）在lib$es6$promise$promise$$promise。obj。（匿名功能）[与当时一样](http://localhost:3000/node_modules/angular2/bundles/angular2-多填料。js:1000:37）在DynamicComponentLoader上。加载根(http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12245:49)在迪尤1号。提供使用工厂(http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12343:39)在喷油器处_实例化(http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:11354:19)在喷油器处_实例化提供者(http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:11287:21)在喷油器处_新的(http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:11277:19)

-----异步间隙------在_GetStackTraceWithUnCughtError处出错(http://localhost:3000/node_modules/angular2/bundles/angular2-多填料。js:2195:26）在分区。叉子(http://localhost:3000/node_modules/angular2/bundles/angular2-多填料。js:2253:40）在NgZone_createInnerZone(http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13316:39)在新工业区(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)在平台上。应用(http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12440:31)反对。引导(http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24543:64)执行时(http://localhost:3000/app/main.js:15:23)至少，重新评估(http://localhost:3000/node_modules/systemjs/dist/system.src.js:3202:26)反对。执行(http://localhost:3000/node_modules/systemjs/dist/system.src.js:3323:13)浏览器适配器。logError@angular2。dev.js:22823异常处理程序。打电话给@angular2。dev.js:1166（匿名函数）@angular2。dev.js:12481NgZone_notifyOnError@angular2。dev.js:13405collection_1。StringMapWrapper。合并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:243微任务@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

在你的索引中。html应该与你的应用程序匹配。路由器的ts组件选择器

@Component({
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES],
  template: `

///////////////////

<body>
    <script>
        System.config({
            packages: {
                appScripts: {
                    defaultExtension: 'js'
                }
            }
        });
        System.import('appScripts/app')
              .then(null, console.error.bind(console));
    </script>
       <my-app></my-app> <!--  -->
</body>

Answer 2

我猜索引中没有元素。与AppComponent中的选择器匹配的html。

Answer 3

可能您应该添加

您的脚本应该在DOM就绪后运行。

更新：

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