选择器“my-app”不匹配任何元素答案

【问题标题】：The selector "my-app" did not match any elements选择器“my-app”不匹配任何元素
【发布时间】：2016-06-09 05:17:15
【问题描述】：

问题是当我运行我的应用程序时，它运行良好。但是当我刷新它时，大部分时间我都低于味精。

选择器“my-app”没有匹配任何元素

但奇怪的是，当我多次刷新我的应用时，它也能正常工作。

所以最终我的应用程序出现了奇怪的行为，无法解决这个问题。
有时有效，有时无效...

有什么建议，想不出代码？？？

注意：我还没有复杂的结构或组件，而是简单的实现。

【问题讨论】：

发布完整的错误消息或代码的任一部分或my-app 组件。
在 IE11 - Potentially unhandled rejection [2] The selector "micropuppy-app" did not match any elements 和 FF- 中'例外：选择器“my-app”不匹配任何元素 BaseException@cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/… ..... ... ... 。 . 并继续'
我见过这几次 - 这是一个 IE 问题，特别是如果我没记错的话它是如何加载脚本的。恐怕我不知道它的修复方法，这是很久以前的事了，但希望它可以为您指明正确的方向。
Sasxa，我在 FF 中也遇到了这个问题。我不知道有什么问题。 N感到无助……

标签： angular

【解决方案1】：

这发生在我身上，因为我在 head 标记中导入了我的代码，因此它可能正在运行并尝试在 DOM 准备好之前进行引导。

您可以将脚本移动到 body 标记的底部，或者将引导代码放在事件侦听器中：

document.addEventListener("DOMContentLoaded", function(event) {
  bootstrap(AppComponent);
});

或：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example app</title>
  </head>
  <body>
    <my-app></my-app>
  </body>
  <script src="main.js" charset="utf-8"></script>
</html>

【讨论】：

打字稿文档中的 plunker 演示中没有包含 main.js 脚本。虽然我确实有错误。
直到我尝试捆绑已编译的打字稿文件时才收到此错误。
我在使用 webpack 进行模块捆绑时遇到了同样的问题......一旦我将脚本放在 .. body 标签之后......它正在工作......
也可以附加到window.onload事件中：window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }
我的天啊，我在墙上撞了这么久，试图弄清楚这一点，它是如此简单。谢谢！

【解决方案2】：

Angular 4：我必须在 index.html 文件中将 <app-root></app-root> 更改为 <my-app></my-app>

【讨论】：

angular-cli 在 index.html 文件中创建 app-root 引用似乎存在问题，而英雄之旅教程入口点 ts 文件则引用 my-app。 IMO 两者应该使用相同的命名约定，因为 Angular 团队一直推荐 angular-cli 作为创建项目的最佳方式。
有点类似，以防万一有人遇到 webpack-dev-server (WDS) 的这个问题 - 我在选择器为时构建了我的应用程序，并使用 WDS 启动了应用程序。然后我在我的组件和 index.html 中将选择器更改为。那是我开始克服错误的时候。问题是，'dist' 文件夹下的 index.html 没有更新。我停止了 WDS，再次构建了我的应用程序，然后启动了应用程序。一切都开始正常了！

【解决方案3】：

要做的事情：

转到 app.module.ts（主要模块，在大多数情况下这是一个名称）
检查您是否有部分“boostrap:” - 如果没有添加：

bootstrap: [AppComponent] // AppComponent 是你的主要组件
检查它现在是否工作，如果不能 - 转到 AppComponent 并检查您的选择器。它应该与 index.html 中正文中的标签相同

所以 index.html 应该包含如下内容：

<body>
  <app-root>Loading...</app-root>
</body>

你应该使用主 AppComponent 中的选择器而不是 <app-root>

如果您在外部网站中使用 Angular 应用程序，那么您应该考虑在 Angular 文件的标头中使用 defer

【讨论】：

<body> 标签已修复
谢谢！它解决了我的问题。

【解决方案4】：

我在使用 Angular Universal 时遇到了同样的问题。不过是因为我在main.node.ts中使用BrowserModule，解决方法是

  imports: [
    UniversalModule,
    BrowserModule   // <- delete this will solve the issue
  ],

点击此处了解更多信息：https://github.com/angular/universal/issues/542

【讨论】：

最新版本的 Angular 并非如此。这些天 BrowserModule 取代了 UniversalModule 但 appId 作为参数传递，以便客户端和服务器可以交换。见这里：github.com/angular/universal/blob/…

【解决方案5】：

以上答案均未解决我的问题。这就是解决同类错误的方法。您不应该有多个组件作为 Bootstarp 组件。因此，Bootstrap 数组应该只有一个组件。我错误地将 4 个组件放入 bootstrap 数组中。我从那里删除了这 4 个组件并放入 entryComponents 数组（如下面的代码）。这对我有帮助。

@NgModule({
 declarations: [
AppComponent,
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],
entryComponents:[ 
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],

imports: [
BrowserModule,
BrowserAnimationsModule
],
 providers: [],
 bootstrap: [AppComponent
]
})
export class AppModule { }

【讨论】：

【解决方案6】：

如果您从这里使用 angular2 / asp.net 核心模板：http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/，您可能会发现将 boot-client.ts 的最后几行替换为以下帮助（并且避免了很多看起来很吓人的控制台错误） HMR 重新加载您的页面）：

const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
    window.onload = () => bootApplication();
    location.reload();
} else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}

【讨论】：

【解决方案7】：

我正在将 Angular 5.2 应用程序更新到 Angular 6.1 并遇到类似问题。在这种情况下，问题在于 index.html 文件根本没有 <body>。它被包含在 my-app 组件中。

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

这曾经适用于 Angular 5.2（以及更早的版本），因为在生成的 index.html 中，脚本标签放在最后。升级到 6.1 后，脚本标签被放置在文件的开头（因此我假设在 <my-app></my-app> 根元素实际存在之前执行。

解决方案是将<body> 移动到index.html。（它最初被放置在组件中，因为有人想将条件类应用于带有 ngClass 的 body 元素。）

【讨论】：

【解决方案8】：

当我将引导组件从 AppComponent 更改为新组件时，这发生在我身上。当您更改它时，您还需要在主 index.html 中更改它。 index.html 应该包含引导组件。

例如，如果您在引导部分的app.module.ts 中将app-component 更改为app-login，那么您应该像这样更新您的index.html

<body>
  <app-login></app-login>
</body>

【讨论】：

【解决方案9】：

也许你可以使用

推迟

在您的标头 js 文件中标记。

http://www.w3schools.com/TAgs/att_script_defer.asp

【讨论】：

这个答案适用于这个错误的大多数情况。这确实应该是答案。

【解决方案10】：

Django+Angular

我有一个自定义 index.html，而不是 angular CLI 生成的那个。

我遇到了这个错误，因为我将生成的脚本文件放在<head> 部分而不是在结束</body> 标记的末尾（在<app-root></app-root> 标记之后）

【讨论】：

【解决方案11】：

当我创建新组件时，需要按照以下步骤来解决以下问题。

第 1 步 - 使用 ng g c lakshya 创建新组件。第 2 步- 在应用程序 lakshya folfer 下创建了 4 个文件。 Step-3- Index.html 需要<app-root></app-root> 到<app-lakshya></app-lakshya> 步骤 4- app.Module.ts 文件更改 bootstrap: [AppComponent] 为 bootstrap: [LakshyaComponent]

所以上面的错误解决了。

【讨论】：

【解决方案12】：

在您的 app.module.ts 中，如果您在引导程序中有 my-app，请评论或删除它。

引导程序：[ 应用组件， // 我的应用 ]

【讨论】：

【解决方案13】：

就我而言，' 所在文件的 index.html 中有问题（大多数情况下是根文件夹）。

修复后一切正常。

【讨论】：

【解决方案14】：

确定您使用了应用路由模块，并且必须将选择器：'my-app' 更改为 'app-root'（文件：app.component.ts）

【讨论】：