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

【问题标题】：Angular2 - The selector "my-app" did not match any elements (only on first load)Angular2 - 选择器“my-app”不匹配任何元素（仅在第一次加载时）
【发布时间】：2016-05-16 02:18:21
【问题描述】：

有谁知道为什么在我的 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$$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 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$$内部$$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 [as viewFactory] (viewFactory_HostAppComponent:72:18) 在 AppViewManager_.createRootHostView (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:9226:34) 在http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12246:46 在 Zone.run (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://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26) 在 Zone.fork (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40) 在 Zone.bind (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:109:48) 在 bindArguments (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:980:29) 在 lib$es6$promise$promise$$Promise.obj.(匿名函数) [as then] (http://localhost: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://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26) 在 Zone.fork (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40) 在 NgZone._createInnerZone (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13316:39) 在新的 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) 在 Object.bootstrap (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24543:64) 执行时 (http://localhost:3000/app/main.js:15:23) 在 ensureEvaluated (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3202:26) 在 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(匿名函数)@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$$冲洗@ angular2-polyfills.js:1305

【问题讨论】：

我想这需要更多信息。你能创建一个 Plunker 吗？
@emirhosseini.. 这需要更多代码。你能发布你的组件代码吗？

标签： angular angular2-routing

【解决方案1】：

您可能应该在 index.html 文件中的</body> 标记之后添加您的<script> 标记。

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

更新：

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

【讨论】：

非常感谢，我为此付出了很多努力 :)

【解决方案2】：

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

【讨论】：

【解决方案3】：

在你的 index.html 中应该与你的 app.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>

【讨论】：

【解决方案4】：

我认为每个人都需要澄清由于以下原因而发生的错误：

最初，当 angular-cli 创建应用程序时，它会加载“app-root”组件（您可以在 app.module.ts 中查看）

引导程序：[MainComponent]

当您需要根据我们提供的组件启动应用程序时，您需要将该组件导入 app.module.ts 并将该组件添加到“bootstrap”数组中。

引导程序：[登录组件]

要记住的另一件事，当 angular-cli 创建应用程序时，它将使用“app-root”组件在 localhost:4200 上重定向，这意味着当您运行应用程序时，您最初会看到 app.component.html（查看)
这将在 index.html 文件中完成，如下所示
```
<body>
<app-root></app-root> 
</body>
```
要在我们提供的初始值上运行应用程序，您需要更改此使用的组件选择器
```
<body> 
<app-login></app-login> 
</body>`
```

【讨论】：

【解决方案5】：

确保在 LoginComponent.ts 文件的 @Component 部分中指定的选择器链接到正确的 templateUrl 和 styleUrls 值。
将 LoginComponent 添加到您的引导数组（在 app.module.ts 文件中）以使其引导：[LoginComponent]。

【讨论】：

【解决方案6】：

我也遇到了同样的问题，如果您在 Angular 应用程序的 index.html 中添加选择器，它就可以工作。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pcms</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-login></app-login>
</body>
</html>

希望对你有帮助！

【讨论】：

【解决方案7】：

确定您使用应用程序路由并且必须将选择器：'my-app' 更改为 'app-root'

  @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  })

【讨论】：

【解决方案8】：

我遇到了同样的问题。我检查 index.html 和 app 标签丢失。如果您将选择器设置为 my-app，则应该存在我的 -app 标签

<html>
<head>
  <meta charset="utf-8">
  <title>InvoiceAngularUIFinal</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app>Loading...</app>
</body>
</html>

【讨论】：

但原帖明确指出“顶级 index.html 文件中有标签”
请检查 app.component.ts 并检查 selector import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'app', templateUrl: 'app.component.html' }) 导出类 AppComponent { }