El selector "mi-aplicación" no coincide con ningún elemento

85

El problema es que cuando ejecuto mi aplicación, funciona bien. Pero cuando lo actualizo, la mayoría de las veces aparece debajo de msg.

El selector "mi-aplicación" no coincide con ningún elemento

Pero lo extraño es que muchas veces cuando actualizo mi aplicación también funciona.

Entonces, en última instancia, tengo un comportamiento extraño de mi aplicación y no puedo resolver esto.
A veces funciona, a veces no ...

¿Alguna sugerencia, no se me ocurre el código?

Nota: Todavía no tengo una estructura o componentes complejos, pero una implementación simple.

angular

— micronyks
fuente

Publique el mensaje de error completo o cualquier parte del código o my-appcomponente.

— Pardeep Jain

En IE11 - Potentially unhandled rejection [2] The selector "micropuppy-app" did not match any elementsy en FF- 'EXCEPCIÓN: El selector "my-app" no coincide con ningún elemento BaseException @ cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/… ... .. ... ... .. y continuar '

— micronyks

Lo he visto un par de veces: es un problema de IE, específicamente cómo carga los scripts si recuerdo correctamente. Me temo que no conozco la solución, fue hace mucho tiempo, pero espero que pueda apuntar en la dirección correcta.

— Sasxa

Sasxa, también estoy enfrentando este problema en FF. No sé cuál es el problema. N siento impotente ...

— micronyks

101

Esto me sucedió porque estaba importando mi código en la headetiqueta, por lo que potencialmente se estaba ejecutando e intentando arrancar antes de que el DOM estuviera listo.

Puede mover la secuencia de comandos al final de la bodyetiqueta o poner el código de arranque dentro de un detector de eventos:

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
fuente

No hay main.jsinclusión de script en las demostraciones de plunker en la documentación de mecanografiado. Aunque tengo el error.

— Elfayer

5

No recibí este error hasta que intenté agrupar mis archivos de mecanografiado compilados.

— ps2goat

2

Me enfrenté al mismo problema mientras usaba el paquete web para la agrupación de módulos ... y una vez que coloqué el script después de ... la etiqueta del cuerpo ... está funcionando ...

— refactorización

2

También puede adjuntarlo al evento window.onload:window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }

— kitimenpolku

3

Dios mío, estuve golpeándome la cabeza contra la pared durante tanto tiempo tratando de resolver esto y fue tan simple. ¡Gracias!

— Patrick Graham

69

Angular 4: tuve que cambiar <app-root></app-root>con <my-app></my-app>el archivo index.html

— Mladen Rakonjac
fuente

2

Parece haber un problema con la angular-clicreación de una app-rootreferencia en el index.htmlarchivo, mientras que el archivo ts del punto de entrada del tutorial Tour of Heroes se refiere en su lugar my-app. En mi opinión, los dos deberían usar la misma convención de nomenclatura ya que el equipo de Angular ha estado recomendando angular-clicomo la mejor manera de crear un proyecto.

— ¿Qué hay en una búsqueda de Google el

Algo similar, en caso de que alguien se enfrente a este problema con webpack-dev-server (WDS): había creado mi aplicación cuando el selector era <app-root> e inicié la aplicación usando WDS. Luego cambié el selector a <my-app> en mi componente e index.html. Fue entonces cuando comencé a recibir el error anterior. El problema era que index.html en la carpeta 'dist' no se actualizó. Detuve WDS, construí mi aplicación de nuevo y luego lancé la aplicación. ¡Todo empezó a funcionar bien!

— ramtech

26

Cosas para hacer:

Vaya a app.module.ts (a los módulos principales, en la mayoría de los casos este es un nombre)
Compruebe si tiene la parte " boostrap :" - si no, agregue:

bootstrap: [AppComponent] // donde AppComponent es su componente principal
Verifique si funciona ahora, si no, vaya a AppComponent y verifique su selector . Debe ser igual que las etiquetas en el cuerpo en index.html

entonces index.html debería contener algo como esto:

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

donde en lugar de <app-root>debe usar el selector de AppComponent principal

Si está utilizando su aplicación angular en un sitio web externo, debería considerar el uso de diferir en los encabezados para archivos angulares

— Przemek Struciński
fuente

4

<body>la etiqueta lo arregló

— Alex Okrushko

¡Gracias! Resolvió mi problema.

— Muhammad Ayyaz

6

Tengo el mismo problema cuando uso Angular Universal. Pero es porque estoy usando BrowserModuleen main.node.ts , la solución es

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

Y consulte aquí para obtener más información: https://github.com/angular/universal/issues/542

— Hongbo Miao
fuente

Esto no es cierto para las últimas versiones de Angular. Actualmente, BrowserModule reemplaza a UniversalModule, pero se pasa un appId como parámetro para que el cliente y el servidor puedan intercambiarse. Ver aquí: github.com/angular/universal/blob/…

— Dessus

5

Si está utilizando la plantilla principal de angular2 / asp.net desde aquí: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/, es posible que deba reemplazar las últimas líneas de boot-client.ts con las siguientes ayudas (y evita muchos errores de consola de aspecto aterrador cuando HMR recarga su página):

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

— Ravi Desai
fuente

4

Estaba actualizando una aplicación Angular 5.2 a Angular 6.1 y encontré un problema similar. En este caso, el problema era que el archivo index.html no tenía <body>nada. En cambio, se incluyó en el 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>

Esto solía funcionar con Angular 5.2 (y versiones anteriores también) porque en el index.html generado, las etiquetas del script se colocaban al final. Después de la actualización a 6.1, las etiquetas de script se colocaron al principio del archivo (y, por lo tanto, supongo que se ejecutaron antes de que el <my-app></my-app>elemento raíz esté realmente presente.

La solución fue pasar <body>a index.html . (Originalmente se colocó en el componente porque alguien quería aplicar clases condicionales al elemento del cuerpo con ngClass).

— Joni Nousjärvi
fuente

4

Ninguna de las respuestas anteriores resolvió mi problema. Así es como se resuelve el mismo tipo de error. No debería tener más de un componente como componente Bootstarp. Por lo tanto, la matriz Bootstrap debe tener solo un componente. Por error, puse 4 componentes en la matriz Bootstrap. Eliminé esos 4 componentes de allí y puse en la matriz entryComponents (como se muestra en el código a continuación) .Esto me ayudó.

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

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

— TRIPATÍA DIBYA RANJAN
fuente

2

Quizás podrías usar el

aplazar

Etiqueta en tus encabezados archivos js.

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

— Mad Max
fuente

Esta respuesta funciona para la mayoría de los casos de este error. Esta realmente debería ser la respuesta.

— Chinmay

2

Esto me sucedió cuando cambié el componente de arranque por AppComponentuno nuevo. Cuando lo cambie, también debe cambiarlo en el principal index.html. index.htmldebe contener el componente bootstrap.

Por ejemplo, si cambia el app-componenta app-loginen app.module.tsen la sección de arranque, entonces debería actualizar su index.htmlasí

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

— Krishnadas PC
fuente

1

Cuando creo un nuevo componente, debo seguir los pasos a continuación para resolver los problemas a continuación.

Paso 1- Cree un nuevo componente con ng g c lakshya. Paso 2- Bajo la aplicación lakshya folfer creada con 4 archivos. Paso-3- Index.HTML necesidad <app-root></app-root>a <app-lakshya></app-lakshya> Paso 4- app.Module.ts cambio archivo de arranque: [AppComponent] para bootstrap: [LakshyaComponent]

así que el error anterior se resuelve.

— Krishna
fuente

0

Django + Angular

Tenía un index.html personalizado, no el generado por CLI angular.

Tuve este error porque coloqué los archivos de script generados en la <head>sección en lugar de al final de la </body>etiqueta de cierre (después de las <app-root></app-root>etiquetas)

— Luca Filip
fuente

0

En su app.module.ts, si tiene my-app en el bootstrap, coméntelo o elimínelo.

bootstrap: [AppComponent, // my-app]

— Lloyd
fuente