Il selettore "my-app" non corrisponde ad alcun elemento

86

Il problema è che quando eseguo la mia app, funziona bene. Ma quando lo aggiorno, la maggior parte delle volte ottengo sotto msg.

Il selettore "my-app" non ha trovato alcun elemento

Ma la cosa strana è che molte volte quando aggiorno la mia app funziona anche.

Quindi alla fine ho uno strano comportamento della mia app e non riesco a capirlo.
A volte funziona a volte no ...

Qualche suggerimento, non riesci a trovare il codice ???

Nota: non ho ancora una struttura o componenti complessi ma una semplice implementazione.

angular

— micronyks
fonte

pubblicare il messaggio di errore completo o una porzione di codice o my-appcomponente.

— Pardeep Jain

In IE11 - Potentially unhandled rejection [2] The selector "micropuppy-app" did not match any elementse In FF- 'ECCEZIONE: il selettore "my-app" non ha trovato alcun elemento BaseException @ cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/… ... .. ... ... .. e continua '

— micronyks

L'ho visto un paio di volte: è un problema di IE, in particolare il modo in cui carica gli script se ricordo bene. Temo di non conoscere la soluzione per questo, è stato molto tempo fa, ma spero che possa indirizzarti nella giusta direzione.

— Sasxa

Sasxa, sto affrontando questo problema anche in FF. Non so qual è il problema. N si sente impotente ...

— micronyks

102

Questo è successo a me perché stavo importando il mio codice nel headtag, quindi era potenzialmente in esecuzione e stava tentando di eseguire il bootstrap prima che il DOM fosse pronto.

Puoi spostare lo script in fondo al bodytag o inserire il codice bootstrap all'interno di un listener di eventi:

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

o:

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

Non c'è main.jsinclusione di script nelle demo del plunker nella documentazione del dattiloscritto. Anche se ho l'errore.

— Elfayer

5

Non ho ricevuto questo errore finché non ho provato a raggruppare i miei file dattiloscritti compilati.

— ps2goat

2

Ho riscontrato lo stesso problema durante l'utilizzo di webpack per il raggruppamento di moduli ... e una volta posizionato lo script dopo ... body tag .. funziona ...

— refactoring

2

Puoi anche allegarlo all'evento window.onload:window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }

— kitimenpolku

3

OMG ho sbattuto la testa contro il muro per così tanto tempo cercando di capirlo ed è stato così semplice. Grazie!

— Patrick Graham

70

Angular 4: ho dovuto modificare <app-root></app-root>con <my-app></my-app>nel file index.html

— Mladen Rakonjac
fonte

2

Sembra che ci sia un problema con la angular-clicreazione di un app-rootriferimento nel index.htmlfile, mentre il file ts del punto di ingresso del tutorial di Tour of Heroes si riferisce invece a my-app. IMO, i due dovrebbero usare la stessa convenzione di denominazione poiché il team di Angular ha raccomandato angular-clicome il modo migliore per creare un progetto.

— Peter David Carter

Un po 'simile, nel caso qualcuno dovesse affrontare questo problema con webpack-dev-server (WDS) - Avevo creato la mia app quando il selettore era <app-root> e avevo avviato l'app utilizzando WDS. Quindi ho cambiato il selettore in <my-app> nel mio componente e index.html. Questo è quando ho iniziato a ricevere l'errore di cui sopra. Il problema era che index.html nella cartella "dist" non era aggiornato. Ho interrotto WDS, ho creato di nuovo la mia app e poi ho lanciato l'app. Tutto ha iniziato a funzionare bene!

— ramtech

26

Cose da fare:

Vai su app.module.ts (ai moduli principali, nella maggior parte dei casi questo è un nome)
Controlla se hai la parte " boostrap :" - in caso contrario aggiungi:

bootstrap: [AppComponent] // dove AppComponent è il tuo componente principale
Controlla se funziona ora, altrimenti vai su AppComponent e controlla il selettore . Dovrebbe essere lo stesso dei tag nel corpo di index.html

quindi index.html dovrebbe contenere qualcosa del genere:

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

dove invece di <app-root>dovresti usare il selettore da AppComponent principale

Se stai utilizzando la tua app angolare in un sito web esterno, dovresti considerare di utilizzare il differimento nelle intestazioni per i file angolari

— Przemek Struciński
fonte

4

<body>tag risolto

— Alex Okrushko

Grazie! Ha risolto il mio problema.

— Muhammad Ayyaz

6

Ho lo stesso problema quando uso Angular Universal. Ma è perché sto usando BrowserModulein main.node.ts , la soluzione è

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

E controlla qui per maggiori informazioni: https://github.com/angular/universal/issues/542

— Hongbo Miao
fonte

Questo non è vero per le ultime versioni di Angular. In questi giorni BrowserModule sostituisce UniversalModule ma un appId viene passato come parametro in modo che client e server possano scambiarsi. Vedi qui: github.com/angular/universal/blob/…

— Dessus

5

Se stai utilizzando il modello di base angular2 / asp.net da qui: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/ potresti trovare la sostituzione delle ultime righe di boot-client.ts con i seguenti aiuti (ed evita molti spaventosi errori di console quando HMR ricarica la tua pagina):

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

— Ravi Desai
fonte

4

Stavo aggiornando un'app Angular 5.2 ad Angular 6.1 e ho riscontrato un problema simile. In questo caso il problema era che il file index.html non aveva <body>affatto. È stato invece incluso nel my-appcomponente.

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

Questo funzionava con Angular 5.2 (e anche con le versioni precedenti) perché nel index.html generato i tag script erano posizionati alla fine. Dopo l'aggiornamento a 6.1 i tag di script sono stati invece posti all'inizio del file (e presumo quindi eseguiti prima che l' <my-app></my-app>elemento root sia effettivamente presente.

La soluzione era passare <body>a index.html . (È stato originariamente inserito nel componente perché qualcuno voleva applicare classi condizionali all'elemento body con ngClass.)

— Joni Nousjärvi
fonte

4

Nessuna delle risposte precedenti ha risolto il mio problema. Ecco come risolvere lo stesso tipo di errore. Non dovresti avere più di un componente come componente Bootstarp .Quindi, l'array Bootstrap dovrebbe avere un solo componente .Per errore ho inserito 4 componenti nell'array bootstrap Ho rimosso quei 4 componenti da lì e messo nell'array entryComponents (come mostrato nella codice sotto). Questo mi ha aiutato.

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

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

— DIBYA RANJAN TRIPATHY
fonte

2

Forse potresti usare il file

differire

Tag nei file js delle intestazioni.

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

— MadMax
fonte

Questa risposta funziona per la maggior parte dei casi per questo errore. Questa dovrebbe essere davvero la risposta.

— Chinmay

2

Questo è successo a me quando ho cambiato il componente bootstrap da AppComponenta un nuovo componente. Quando lo modifichi, devi cambiarlo anche nel principale index.html. index.htmldovrebbe contenere il componente bootstrap.

Ad esempio, se si modifica la app-componenta app-loginnella app.module.tsnella sezione bootstrap allora si dovrebbe aggiornare il index.htmlcome questo

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

— Krishnadas PC
fonte

1

Django + Angular

Avevo un index.html personalizzato, non quello generato da angular CLI.

Ho riscontrato questo errore perché ho posizionato i file di script generati nella <head>sezione anziché alla fine del </body>tag di chiusura (dopo i <app-root></app-root>tag)

— Luca Filip
fonte

1

Quando creo un nuovo componente, è necessario seguire i passaggi seguenti per risolvere i problemi seguenti.

Passaggio 1- Crea nuovo componente con ng g c lakshya. Passaggio 2- Nell'app lakshya folfer creata con 4 file. Passo-3- Index.html necessità <app-root></app-root>di <app-lakshya></app-lakshya> Fase 4- app.Module.ts di modifica del file di bootstrap: [AppComponent] di bootstrap: [LakshyaComponent]

così sopra l'errore risolto.

— Krishna
fonte

0

Nel tuo app.module.ts, se hai my-app nel bootstrap, commentalo o cancellalo.

bootstrap: [AppComponent, // my-app]

— Lloyd
fonte