セレクター「my-app」がどの要素とも一致しませんでした

Question 1

問題は、アプリを実行すると正常に動作することです。しかし、それを更新すると、ほとんどの場合、メッセージを下回ります。

セレクター「my-app」がどの要素とも一致しませんでした

しかし、奇妙なことに、アプリを更新すると、それも機能することが何度もあります。

そのため、最終的にはアプリの動作がおかしくなり、これを理解できなくなります。
時々それは時々動作しません...

どんな提案でも、コードを思い付くことができませんか？

注：複雑な構造やコンポーネントはまだありませんが、実装は単純です。

Question 2

これは、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>

Question 3

Angular 4：index.htmlファイルで変更する必要 <app-root></app-root>があり <my-app></my-app>ました

Question 4

やる事：

app.module.tsに移動します（メインモジュールにます。ほとんどの場合、これは名前です）
パーツ「ブーストラップ」があるかどうかを確認します：」の-追加しない場合：

bootstrap: [AppComponent] // AppComponentがメインコンポーネントです
今すぐ機能するかどうかを確認します。機能しない場合は、AppComponentに移動してセレクターを確認します。index.htmlの本文のタグと同じである必要があります

したがって、index.htmlには次のようなものが含まれている必要があります。

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

代わりに<app-root>、メインのAppComponentのセレクターを使用する必要があります

外部WebサイトでAngularアプリを使用している場合は、Angularファイルのヘッダーでdeferを使用することを検討する必要があります

Question 5

AngularUniversalを使用したときに同じ問題が発生しました。しかし、それは私がmain.node.tsで使用BrowserModuleしているためです、解決策は

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

詳細については、こちらを確認してください：https：//github.com/angular/universal/issues/542

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

Question 7

Angular5.2アプリをAngular6.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。）

Question 8

上記の答えのどれも私の問題を解決しませんでした。これは同じ種類のエラーを解決する方法です。Bootstarpコンポーネントとして複数のコンポーネントを含めることはできません。したがって、Bootstrap配列には1つのコンポーネントのみを含める必要があります。誤って4つのコンポーネントをブートストラップ配列に配置しました。それらの4つのコンポーネントをそこから削除し、entryComponents配列に配置しました（以下のコード）これは私を助けました。

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

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

Question 9

多分あなたは使用することができます

延期

ヘッダーにjs-filesのタグを付けます。

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

Question 10

これは、ブートストラップコンポーネントをからAppComponent新しいコンポーネントに変更したときに発生しました。あなたがそれを変えるとき、あなたはそれをメインindex.htmlでも変える必要があります。index.htmlブートストラップコンポーネントが含まれている必要があります。

たとえば、ブートストラップセクションでapp-componentをapp-logininapp.module.tsに変更した場合は、次のindex.htmlように更新する必要があります。

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

Question 11

新しいコンポーネントを作成するときは、以下の問題を解決するために以下の手順に従う必要があります。

ステップ-1-で新しいコンポーネントを作成する ng g c lakshya。を。ステップ-2-4つのファイルで作成されたアプリlakshyafolferの下。ステップ-3-たindex.html必要<app-root></app-root>に<app-lakshya></app-lakshya> ステップ4 - app.Module.tsファイル変更のブートストラップ：[AppComponent]ブートストラップへ：[LakshyaComponent]

したがって、上記のエラーは解決します。

Question 12

Django + Angular

Angular CLIによって生成されたものではなく、カスタムのindex.htmlがありました。

生成されたスクリプトファイルを<head>終了</body>タグの最後（タグの後<app-root></app-root>）ではなくセクションに配置したため、このエラーが発生しました

Question 13

app.module.tsで、ブートストラップにmy-appがある場合は、コメントするか削除します。

ブートストラップ：[AppComponent、// my-app]