Le sélecteur "my-app" ne correspond à aucun élément

85

Le problème est que lorsque je lance mon application, cela fonctionne bien. Mais quand je le rafraîchis, la plupart du temps je suis en dessous de msg.

Le sélecteur "my-app" ne correspond à aucun élément

Mais ce qui est étrange, c'est que souvent, lorsque j'actualise mon application, cela fonctionne également.

Donc, finalement, j'ai un comportement étrange de mon application et je suis incapable de le comprendre.
Parfois cela fonctionne parfois non ...

Toute suggestion, impossible de trouver du code ???

Remarque: je n'ai pas encore de structure ou de composants complexes mais une implémentation simple.

angular micronyques
la source
publier le message d'erreur complet ou une partie du code ou du my-appcomposant.
Pardeep Jain
Dans IE11 - Potentially unhandled rejection [2] The selector "micropuppy-app" did not match any elementset Dans FF- 'EXCEPTION: Le sélecteur "my-app" ne correspond à aucun élément BaseException @ cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/ ... ... .. ... ... .. et continuer '
micronyks
J'ai vu cela quelques fois - c'est un problème d'IE, en particulier comment il charge les scripts si je me souviens bien. J'ai peur de ne pas connaître le correctif, c'était il y a longtemps, mais j'espère que cela pourra vous orienter dans la bonne direction.
Sasxa le
Sasxa, je suis confronté à ce problème dans FF aussi. Je ne sais pas quel est le problème. N feel helpless ...
micronyks

Réponses:

101

Cela m'est arrivé parce que j'importais mon code dans la headbalise, donc il était potentiellement en cours d'exécution et tentait de démarrer avant que le DOM ne soit prêt.

Vous pouvez soit déplacer le script vers le bas de la bodybalise, soit placer le code d'amorçage dans un écouteur d'événement:

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

ou:

<!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
la source
Il n'y a pas d' main.jsinclusion de script dans les démos de plunker dans la documentation dactylographiée. Bien que j'ai l'erreur.
Elfayer
5
Je n'ai pas eu cette erreur avant d'essayer de regrouper mes fichiers dactylographiés compilés.
ps2goat
2
J'ai rencontré le même problème lors de l'utilisation de webpack pour le regroupement de modules .... et une fois que j'ai placé le script après .. balise de corps .. ça fonctionne ...
refactor
2
Vous pouvez également le joindre à l'événement window.onload:window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }
kitimenpolku
3
OMG, je me cognais la tête contre le mur pendant si longtemps en essayant de comprendre cela et c'était si simple. Merci!
Patrick Graham
69

Angular 4: j'ai dû changer <app-root></app-root>avec <my-app></my-app>dans le fichier index.html

Mladen Rakonjac
la source
2
Il semble y avoir un problème avec la angular-clicréation d'une app-rootréférence dans le index.htmlfichier, alors que le fichier de points d'entrée du didacticiel Tour of Heroes fait référence à la place my-app. IMO les deux devraient utiliser la même convention de dénomination puisque l'équipe Angular a recommandé angular-clicomme le meilleur moyen de créer un projet.
Que contient une recherche Google du
Un peu similaire, juste au cas où quelqu'un serait confronté à ce problème avec webpack-dev-server (WDS) - j'avais construit mon application lorsque le sélecteur était <app-root> et lancé l'application en utilisant WDS. Ensuite, j'ai changé le sélecteur en <my-app> dans mon composant et index.html. C'est à ce moment que j'ai commencé à avoir une erreur ci-dessus. Le problème était que index.html sous le dossier «dist» n'était pas mis à jour. J'ai arrêté WDS, créé à nouveau mon application, puis lancé l'application. Tout a commencé à fonctionner correctement!
ramtech
26

Choses à faire:

  1. Allez sur app.module.ts (vers les modules principaux, dans la plupart des cas, c'est un nom)

  2. Vérifiez si vous avez une partie " boostrap :" - si aucun ajout:

    bootstrap: [AppComponent] // où AppComponent est votre composant principal

  3. Vérifiez si cela fonctionne maintenant, sinon - allez dans AppComponent et vérifiez votre sélecteur . Il doit être identique aux balises du corps dans index.html

donc index.html devrait contenir quelque chose comme ceci:

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

où au lieu de <app-root>vous devriez utiliser le sélecteur de AppComponent principal

  1. Si vous utilisez votre application angulaire sur un site Web externe, vous devriez envisager d'utiliser différer dans les en-têtes pour les fichiers angulaires.
Przemek Struciński
la source
4
<body>la balise l'a corrigé
Alex Okrushko
Merci! Cela a résolu mon problème.
Muhammad Ayyaz le
6

J'ai le même problème lorsque j'utilise Angular Universal. Mais c'est parce que j'utilise BrowserModuledans main.node.ts , la solution est

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

Et vérifiez ici pour plus d'informations: https://github.com/angular/universal/issues/542

Hongbo Miao
la source
Ce n'est pas vrai pour les dernières versions d'Angular. De nos jours, BrowserModule remplace UniversalModule mais un appId est passé en paramètre afin que le client et le serveur puissent échanger. Voir ici: github.com/angular/universal/blob/…
Dessus
5

Si vous utilisez le modèle de base angular2 / asp.net à partir d'ici: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/, vous trouverez peut-être le remplacement des dernières lignes de boot-client.ts avec les aides suivantes (et évite de nombreuses erreurs de console effrayantes lorsque HMR recharge votre page):

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

Je mettais à jour une application Angular 5.2 vers Angular 6.1 et j'ai rencontré un problème similaire. Dans ce cas, le problème était que le fichier index.html n'avait pas <body>du tout. Il a plutôt été inclus dans le my-appcomposant.

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

Cela fonctionnait avec Angular 5.2 (et les versions antérieures aussi) car dans l' index.html généré, les balises de script étaient placées à la fin. Après la mise à niveau vers la version 6.1, les balises de script ont été placées au début du fichier (et je suppose donc exécutées avant le<my-app></my-app> élément racine ne soit réellement présent.

La solution était de passer <body>à index.html . (Il a été initialement placé dans le composant parce que quelqu'un voulait appliquer des classes conditionnelles à l'élément de corps avec ngClass.)

Joni Nousjärvi
la source
4

Aucune des réponses ci-dessus n'a résolu mon problème. Voici comment résoudre le même type d'erreur. Vous ne devriez pas avoir plus d'un composant comme composant Bootstarp .Ainsi, le tableau Bootstrap ne devrait avoir qu'un seul composant.Par erreur, j'ai mis 4 composants dans le tableau bootstrap.J'ai supprimé ces 4 composants et mis dans le tableau entryComponents (comme indiqué dans le code ci-dessous) .Cela m'a aidé.

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

imports: [
BrowserModule,
BrowserAnimationsModule
],
 providers: [],
 bootstrap: [AppComponent
]
})
export class AppModule { }
TRIPATHIE DIBYA RANJAN
la source
2

Vous pourriez peut-être utiliser le

reporter

Marquez vos en-têtes js-files.

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

Mad Max
la source
Cette réponse fonctionne dans la majorité des cas pour cette erreur. Cela devrait vraiment être la réponse.
Chinmay
2

Cela m'est arrivé lorsque j'ai changé le composant d'amorçage AppComponenten un nouveau composant. Lorsque vous le modifiez, vous devez également le modifier dans le principal index.html. index.htmldoit contenir le composant bootstrap.

Par exemple, si vous modifiez la app-componentà app-loginen app.module.tsdans la section d'amorçage, vous devez mettre à jour votre index.htmlcomme celui - ci

<body>
  <app-login></app-login>
</body>
PC Krishnadas
la source
1

Lorsque je crée un nouveau composant, je dois suivre les étapes ci-dessous pour résoudre les problèmes ci-dessous.

Étape 1 - Créez un nouveau comonent avec ng g c lakshya. Étape 2 - Sous l'application lakshya folfer créée avec 4 fichiers. Étape-3- besoin index.html <app-root></app-root>à<app-lakshya></app-lakshya> étape 4 - amorçage du changement de fichier app.Module.ts: [AppComponent] pour amorcer: [LakshyaComponent]

donc au-dessus de résoudre l'erreur.

Krishna
la source
0

Django + Angulaire

J'avais un index.html personnalisé, pas celui généré par angular CLI.

J'ai eu cette erreur car j'ai placé les fichiers de script générés dans la <head>section plutôt qu'à la fin de la </body>balise de fermeture (après les <app-root></app-root>balises)

Luca Filip
la source
0

Dans votre app.module.ts, si vous avez my-app dans le bootstrap, commentez-le ou supprimez-le.

bootstrap: [AppComponent, // mon-application]

Lloyd
la source