选择器“ my-app”与任何元素均不匹配

85

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

选择器“ my-app”与任何元素都不匹配

但是奇怪的是，当我刷新我的应用程序很多时候它也可以工作。

因此，最终我的应用程序出现异常行为，无法弄清这一点。
有时它起作用有时不起作用...

任何建议，无法提出代码？？？

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

angular

— 小尼克
source

发布完整的错误消息或代码或my-app组件的任何一部分。

— Pardeep Jain

在IE11Potentially 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 / ... ... .. ... ... ..并继续'

— micronyks，2016年

我已经看过两次了-这是IE问题，特别是如果我没记错的话，它是如何加载脚本的。恐怕我不知道该如何解决，很久以前，但是希望它可以为您指明正确的方向。

— 萨斯加

Sasxa，我在FF也面临这个问题。我不知道出什么问题了。N感到无助……

— micronyks

101

这是发生在我身上的原因，因为我正在代码中导入代码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>

— 埃德·辛奇利夫
source

main.js打字稿文档的plunker演示中没有脚本。虽然我确实有错误。

— Elfayer

5

直到尝试捆绑已编译的打字稿文件之前，我没有收到此错误。

— ps2goat

2

我在使用webpack进行模块捆绑时遇到了同样的问题.....一旦我将脚本放置在..body标签之后..它正在工作...

— 重构

2

您还可以将其附加到window.onload事件：window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }

— kitimenpolku 2016年

3

天哪，我一直在想办法解决这个问题，这真是太简单了。谢谢！

— Patrick Graham

69

角4：我不得不改变 <app-root></app-root>与 <my-app></my-app>index.html文件中

— 姆拉登（Mladen Rakonjac）
source

2

在文件中angular-cli创建app-root引用似乎存在问题index.html，而“ Tour of Heroes”教程入口点ts文件则引用my-app。IMO两者应使用相同的命名约定，因为Angular团队一直建议将其angular-cli作为创建项目的最佳方法。

— Google搜索中的内容

有点类似，以防万一有人遇到webpack-dev-server（WDS）的问题-我在选择器为<app-root>时构建了我的应用程序，并使用WDS启动了该应用程序。然后，在我的组件和index.html中将选择器更改为<my-app>。那就是我开始克服错误的时候。问题是，“ dist”文件夹下的index.html没有更新。我停止了WDS，再次构建了我的应用程序，然后启动了应用程序。一切开始正常！

— ramtech '17

26

要做的事情：

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

bootstrap: [AppComponent] //其中AppComponent是您的主要组件
检查它是否现在可以正常运行-转到AppComponent并检查选择器。它应与index.html中正文中的标签相同

因此index.html应包含以下内容：

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

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

如果您在外部网站上使用角度应用程序，则应考虑对角度文件使用延迟标题

— PrzemekStruciński
source

4

<body>标签已修复它

— Alex Okrushko，

谢谢！它解决了我的问题。

— 穆罕默德·阿亚兹

6

使用Angular Universal时遇到相同的问题。但这是因为我BrowserModule在main.node.ts中使用，解决方案是

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

并在此处查看更多信息： https //github.com/angular/universal/issues/542

— 苗洪波
source

对于最新版本的Angular并非如此。如今，BrowserModule取代UniversalModule，但是将appId作为参数传递，以便客户端和服务器可以交换。看到这里：github.com/angular/universal/blob/…–

— Dessus，

5

如果您从以下位置使用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);
}

— 拉维·德赛（Ravi Desai）
source

4

我将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="https://stackoverflow.com/">
  <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。（它最初放置在组件中是因为有人想使用来将条件类应用于body元素ngClass。）

— 乔尼·努萨耶维（JoniNousjärvi）
source

4

以上答案均不能解决我的问题。这是解决同类错误的方法。作为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 { }

— DIBYA RANJAN TRIPATHY
source

2

也许您可以使用

推迟

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

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

— 疯狂的麦克斯
source

对于大多数情况下，此答案适用于此错误。这确实应该是答案。

— 钦迈

2

当我将引导程序组件从AppComponent一个新组件更改为我时，这发生了。当您更改它时，您还需要在主要位置进行更改index.html。index.html应该包含引导程序组件。

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

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

— 克里斯纳达斯PC
source

1

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

步骤1-使用创建新组件ng g c lakshya。步骤2-在使用4个文件创建的应用程序lakshya folfer下。步骤-3-的index.html需要<app-root></app-root>到<app-lakshya></app-lakshya> 步骤4- app.Module.ts文件改变自举：[AppComponent]到自举：[LakshyaComponent]

所以以上错误解决。

— 克里希纳
source

0

Django +角

我有一个自定义index.html，而不是由角度CLI生成的。

我遇到此错误是因为我将生成的脚本文件放置在该<head>部分中，而不是在结束时</body>标记（在<app-root></app-root>标记之后）

— 卢卡·菲利普（Luca Filip）
source

0

在您的app.module.ts中，如果您的引导中包含my-app，请对其进行注释或删除。

引导程序：[AppComponent，// my-app]

— 劳埃德
source