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

Question 1

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.

Question 2

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>

Question 3

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

Question 4

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

Question 5

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

Question 6

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

Question 7

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).

Question 8

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 { }

Question 9

Quizás podrías usar el

aplazar

Etiqueta en tus encabezados archivos js.

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

Question 10

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>

Question 11

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.

Question 12

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)

Question 13

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

bootstrap: [AppComponent, // my-app]

Answer 1

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

Answer 2

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

Pardeep Jain

Answer 3

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

Answer 4

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

Answer 5

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

micronyks

Answer 6

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

Answer 7

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

Elfayer

Answer 8

5

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

ps2goat

Answer 9

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

Answer 10

2

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

kitimenpolku

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

4

<body>la etiqueta lo arregló

Alex Okrushko

Answer 17

¡Gracias! Resolvió mi problema.

Muhammad Ayyaz

Answer 18

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

Answer 19

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

Answer 20

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

Answer 21

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).

Answer 22

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 { }

Answer 23

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

Answer 24

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

Chinmay

Answer 25

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>

Answer 26

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.

Answer 27

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)

Answer 28

0

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

bootstrap: [AppComponent, // my-app]

Lloyd
fuente

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

Respuestas: