Der Selektor "my-app" stimmte mit keinen Elementen überein

86

Das Problem ist, wenn ich meine App starte, funktioniert es gut. Aber wenn ich es aktualisiere, komme ich die meiste Zeit unter msg.

Der Selektor "my-app" stimmte nicht mit Elementen überein

Aber das Seltsame ist, dass es oft funktioniert, wenn ich meine App aktualisiere.

Letztendlich habe ich ein seltsames Verhalten meiner App und kann dies nicht herausfinden.
Manchmal funktioniert es manchmal nicht ...

Irgendein Vorschlag, kann keinen Code finden ???

Hinweis: Ich habe noch keine komplexe Struktur oder Komponenten, sondern eine einfache Implementierung.

angular Mikronyken
quelle
Veröffentlichen Sie die vollständige Fehlermeldung oder einen Teil des Codes oder der my-appKomponente.
Pardeep Jain
In IE11 - Potentially unhandled rejection [2] The selector "micropuppy-app" did not match any elementsund In FF- 'AUSNAHME: Der Selektor "my-app" stimmte nicht mit Elementen überein. BaseException @ cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/… ... .. ... ... .. und weiter '
Mikronyken
Ich habe das schon ein paar Mal gesehen - es ist ein IE-Problem, insbesondere wie es Skripte lädt, wenn ich mich richtig erinnere. Ich fürchte, ich kenne das Problem nicht, es ist lange her, aber hoffentlich kann es Sie in die richtige Richtung weisen.
Sasxa
Sasxa, ich stehe diesem Problem auch in FF gegenüber. Ich weiß nicht, was das Problem ist. N fühlen sich hilflos ...
Mikronyken

Antworten:

101

Dies ist mir passiert, weil ich meinen Code in das headTag importiert habe , sodass er möglicherweise ausgeführt wurde und versucht hat, einen Bootstrap durchzuführen, bevor das DOM bereit war.

Sie können das Skript entweder an den unteren Rand des bodyTags verschieben oder den Bootstrap-Code in einen Ereignis-Listener einfügen:

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

oder:

<!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>
Ed Hinchliffe
quelle
main.jsIn den Plunker-Demos in der Typoskript-Dokumentation ist kein Skript enthalten. Obwohl ich den Fehler habe.
Elfayer
5
Ich habe diesen Fehler erst erhalten, als ich versucht habe, meine kompilierten Typoskriptdateien zu bündeln.
ps2goat
2
Ich hatte das gleiche Problem, als ich Webpack für die Modulbündelung verwendete ... und als ich das Skript nach ... body tag ... platzierte, funktionierte es ...
Refactor
2
Sie können es auch an das window.onload-Ereignis anhängen:window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }
kitimenpolku
3
OMG Ich habe so lange mit dem Kopf gegen die Wand geschlagen, um das herauszufinden, und es war so einfach. Danke dir!
Patrick Graham
68

Winkel 4: Ich musste <app-root></app-root>mit <my-app></my-app>in der Datei index.html ändern

Mladen Rakonjac
quelle
2
Es scheint ein Problem beim angular-cliErstellen einer app-rootReferenz in der index.htmlDatei zu geben, während sich stattdessen auf die Eintrittspunkt-ts-Datei des Tour of Heroes-Lernprogramms bezieht my-app. IMO sollten die beiden die gleiche Namenskonvention verwenden, da das Angular-Team empfohlen hat angular-cli, ein Projekt am besten zu erstellen.
Was ist in einer Google-Suche
Etwas ähnlich, nur für den Fall, dass jemand mit diesem Problem mit dem Webpack-Dev-Server (WDS) konfrontiert ist - Ich hatte meine App erstellt, als der Selektor <app-root> war, und die App mit WDS gestartet. Dann habe ich den Selektor in meiner Komponente und in der index.html in <my-app> geändert. Zu diesem Zeitpunkt fing ich an, über den Fehler hinauszukommen. Das Problem war, dass index.html im Ordner 'dist' nicht aktualisiert wurde. Ich habe WDS gestoppt, meine App erneut erstellt und dann die App gestartet. Alles begann gut zu funktionieren!
Ramtech
25

Dinge die zu tun sind:

  1. Gehen Sie zu app.module.ts (zu den Hauptmodulen, in den meisten Fällen ist dies ein Name)

  2. Überprüfen Sie, ob Sie den Teil " boostrap :" haben - falls nicht hinzugefügt:

    bootstrap: [AppComponent] // wobei AppComponent Ihre Hauptkomponente ist

  3. Überprüfen Sie, ob es jetzt funktioniert. Wenn nicht, gehen Sie zu AppComponent und überprüfen Sie Ihre Auswahl . Es sollte mit den Tags im Body in index.html identisch sein

Daher sollte index.html ungefähr Folgendes enthalten:

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

<app-root>Wobei Sie stattdessen den Selektor der Haupt-AppComponent verwenden sollten

  1. Wenn Sie Ihre Angular-App auf einer externen Website verwenden, sollten Sie die Verwendung von Defer in Headern für Angular-Dateien in Betracht ziehen
Przemek Struciński
quelle
4
<body>Tag behoben
Alex Okrushko
Danke! Es hat mein Problem gelöst.
Muhammad Ayyaz
6

Ich habe das gleiche Problem, wenn ich Angular Universal verwende. Aber weil ich BrowserModulein main.node.ts verwende , ist die Lösung

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

Weitere Informationen finden Sie hier: https://github.com/angular/universal/issues/542

Hongbo Miao
quelle
Dies gilt nicht für die neuesten Versionen von Angular. Heutzutage ersetzt BrowserModule UniversalModule, aber eine AppId wird als Parameter übergeben, damit Client und Server sich austauschen können. Siehe hier: github.com/angular/universal/blob/…
Dessus
5

Wenn Sie die Angular2 / Asp.net-Kernvorlage von hier aus verwenden: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/ Ersetzen Sie möglicherweise die letzten Zeilen von boot-client.ts mit den folgenden Hilfen (und vermeidet viele beängstigend aussehende Konsolenfehler, wenn HMR Ihre Seite neu lädt):

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

Ich habe eine Angular 5.2-App auf Angular 6.1 aktualisiert und bin auf ein ähnliches Problem gestoßen. In diesem Fall bestand das Problem darin, dass die Datei index.html überhaupt nicht vorhanden war <body>. Es wurde stattdessen in die my-appKomponente aufgenommen.

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

Dies funktionierte früher mit Angular 5.2 (und früheren Versionen auch), da in der generierten index.html die Skript-Tags am Ende platziert wurden. Nach dem Upgrade auf 6.1 wurden die Skript-Tags stattdessen am Anfang der Datei platziert (und ich gehe davon aus, dass sie ausgeführt werden, bevor das <my-app></my-app>Root-Element tatsächlich vorhanden ist.

Die Lösung bestand darin, <body>in index.html zu wechseln . (Es wurde ursprünglich in die Komponente eingefügt, weil jemand bedingte Klassen auf Körperelemente mit anwenden wollte ngClass.)

Joni Nousjärvi
quelle
4

Keine der oben genannten Antworten hat mein Problem behoben. So lösen Sie die gleiche Art von Fehler. Sie sollten nicht mehr als eine Komponente als Bootstarp-Komponente haben. Das Bootstrap-Array sollte also nur eine Komponente haben. Aus Versehen habe ich 4 Komponenten in das Bootstrap-Array eingefügt. Ich habe diese 4 Komponenten von dort entfernt und in das Array entryComponents eingefügt (wie in der Abbildung gezeigt) Code unten). Das hat mir geholfen.

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

imports: [
BrowserModule,
BrowserAnimationsModule
],
 providers: [],
 bootstrap: [AppComponent
]
})
export class AppModule { }
DIBYA RANJAN TRIPATHY
quelle
2

Vielleicht könntest du das benutzen

verschieben

Tagge in deinen Headern js-files.

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

Verrückter Max
quelle
Diese Antwort funktioniert in den meisten Fällen für diesen Fehler. Das sollte wirklich die Antwort sein.
Chinmay
2

Dies ist mir passiert, als ich die Bootstrap-Komponente von AppComponenteiner neuen Komponente geändert habe . Wenn Sie es ändern, müssen Sie es auch in der Hauptsache ändern index.html. index.htmlsollte die Bootstrap-Komponente enthalten.

Wenn Sie beispielsweise im Bootstrap-Abschnitt das in in ändern app-component, sollten Sie dies wie folgt aktualisierenapp-loginapp.module.tsindex.html

<body>
  <app-login></app-login>
</body>
Krishnadas PC
quelle
1

Wenn ich eine neue Komponente erstelle, müssen Sie die folgenden Schritte ausführen, um die folgenden Probleme zu beheben.

Schritt 1 - Erstellen Sie eine neue Komponente mit ng g c lakshya. Schritt-2- Unter App Lakshya Folfer mit 4 Dateien erstellt. Step-3- Index.HTML Notwendigkeit <app-root></app-root>zu <app-lakshya></app-lakshya> Schritt 4 app.Module.ts Datei ändern Bootstrap: [AppComponent] zu Bootstrap: [LakshyaComponent]

also oben Fehlerbehebung.

Krishna
quelle
0

Django + Angular

Ich hatte eine benutzerdefinierte index.html, nicht die von Angular CLI generierte.

Ich hatte diesen Fehler, weil ich die generierten Skriptdateien im <head>Abschnitt anstatt am Ende des schließenden </body>Tags (nach den <app-root></app-root>Tags) platziert habe.

Luca Filip
quelle
0

Wenn Sie in Ihrer app.module.ts my-app im Bootstrap haben, kommentieren oder löschen Sie sie.

Bootstrap: [AppComponent, // my-app]

Lloyd
quelle