Question

问题是当我运行我的应用程序时，它运行正常。但是当我刷新它时，大部分时间我都低于msg。

选择器＆＃34; my-app＆＃34;与任何元素都不匹配

但奇怪的是，很多时候，当我刷新我的应用程序时，它也有效。

所以最终我的应用程序有一个奇怪的行为，无法解决这个问题。
有时它的工作原理有时并不......

任何建议，都不能提出代码???

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

Answer 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>

Answer 2

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

Answer 3

要做的事情：

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

bootstrap: [AppComponent] // AppComponent是您的主要组件
检查现在是否有效 - 如果没有 - 转到AppComponent并检查您的选择器。它应该与index.html中的标签相同

所以index.html应该包含这样的内容：

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

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

如果您在外部网站中使用角度应用，那么您应该考虑在角度文件的标题中使用延迟

Answer 4

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

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

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

Answer 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);
}

Answer 6

也许你可以使用

推迟

标题为js-files。

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

Answer 7

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

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

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

Answer 8

我将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元素。）

Answer 9

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

Answer 10

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

第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]

因此上述错误得以解决。

Answer 11

Django + Angular

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

出现此错误是因为我将生成的脚本文件放置在<head>部分中，而不是放在结束的</body>标签末尾（在<app-root></app-root>标签之后）

Answer 12

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

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

Answer 13

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

修复后，一切正常。

Answer 14

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

选择器＆＃34; my-app＆＃34;与任何元素都不匹配

14 个答案: