Selektor „moja-aplikacja” nie pasował do żadnych elementów

Question 1

Problem polega na tym, że kiedy uruchamiam moją aplikację, działa dobrze. Ale kiedy ją odświeżam, przez większość czasu widzę poniżej msg.

Selektor „moja-aplikacja” nie pasuje do żadnych elementów

Ale dziwne jest to, że wiele razy, gdy odświeżam moją aplikację, również działa.

Ostatecznie moja aplikacja zachowuje się dziwnie i nie mogę tego rozgryźć.
Czasami to działa, czasami nie ...

Jakaś sugestia, nie mogę wymyślić kodu ???

Uwaga: nie mam jeszcze złożonej struktury ani komponentów, ale prostą implementację.

Question 2

Zdarzyło mi się to, ponieważ importowałem swój kod w headtagu, więc potencjalnie działał i próbował załadować się, zanim DOM był gotowy.

Możesz albo przenieść skrypt na dół bodytagu, albo umieścić kod ładowania początkowego w detektorze zdarzeń:

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

lub:

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

Kątowe 4: musiałem zmienić <app-root></app-root>się <my-app></my-app>w pliku index.html

Question 4

Rzeczy do zrobienia:

Idź do app.module.ts (do głównych modułów, w większości przypadków jest to nazwa)
Sprawdź, czy masz część „ boostrap :” - jeśli nie, dodaj:

bootstrap: [AppComponent] // gdzie AppComponent jest głównym składnikiem
Sprawdź, czy teraz działa, jeśli nie - przejdź do AppComponent i sprawdź swój selektor . Powinien być taki sam, jak tagi w treści w pliku index.html

więc index.html powinien zawierać coś takiego:

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

gdzie zamiast tego <app-root>należy użyć selektora z głównego komponentu AppComponent

Jeśli używasz aplikacji kątowej w zewnętrznej witrynie internetowej, powinieneś rozważyć użycie odroczenia w nagłówkach dla plików kątowych

Question 5

Mam ten sam problem, gdy używam Angular Universal. Ale to dlatego, że używam BrowserModulew main.node.ts , rozwiązaniem jest

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

I sprawdź tutaj, aby uzyskać więcej informacji: https://github.com/angular/universal/issues/542

Question 6

Jeśli używasz podstawowego szablonu angular2 / asp.net, dostępnego tutaj: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/, możesz znaleźć kilka ostatnich wierszy boot-client.ts z następującą pomocą (i pozwala uniknąć wielu przerażająco wyglądających błędów konsoli podczas ponownego ładowania strony przez HMR):

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

Question 7

Aktualizowałem aplikację Angular 5.2 do Angular 6.1 i napotkałem podobny problem. W tym przypadku problem polegał na tym, że plik index.html w ogóle nie miał <body>. Zamiast tego został uwzględniony w my-appkomponencie.

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

Kiedyś działało to z Angularem 5.2 (i wcześniejszymi wersjami), ponieważ w wygenerowanym pliku index.html tagi skryptu zostały umieszczone na końcu. Po aktualizacji do wersji 6.1 tagi skryptu zostały zamiast tego umieszczone na początku pliku (i zakładam, że w związku z tym są wykonywane przed <my-app></my-app>obecnością elementu głównego.

Rozwiązaniem było przejście <body>do index.html . (Pierwotnie został umieszczony w komponencie, ponieważ ktoś chciał zastosować klasy warunkowe do elementu body za pomocą ngClass.)

Question 8

Żadna z powyższych odpowiedzi nie rozwiązała mojego problemu. W ten sposób można rozwiązać ten sam rodzaj błędu. Nie powinieneś mieć więcej niż jednego komponentu jako komponentu Bootstarp. Więc tablica Bootstrap powinna mieć tylko jeden komponent. Przez pomyłkę umieściłem 4 komponenty w tablicy bootstrap. Usunąłem stamtąd te 4 komponenty i umieściłem w tablicy entryComponents (jak pokazano w kod poniżej) .To mi pomogło.

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

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

Question 9

Może przydałby się plik

odraczać

Oznacz w swoich nagłówkach pliki-js.

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

Question 10

Zdarzyło mi się to, gdy zmieniłem komponent bootstrap z AppComponentna nowy komponent. Kiedy to zmieniasz, musisz to również zmienić w głównym index.html. index.htmlpowinien zawierać komponent bootstrap.

Na przykład, jeśli zmienisz app-componentsię app-loginw app.module.tsw sekcji bootstrap następnie należy zaktualizować index.htmltakiego

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

Question 11

Kiedy tworzę nowy komponent, wykonaj poniższe czynności, aby rozwiązać poniższe problemy.

Step-1 - Utwórz nowy komponent z ng g c lakshya. Step-2 Pod folfer aplikacji lakshya utworzony z 4 plików. Step-3 Index.html należy <app-root></app-root>wykonać <app-lakshya></app-lakshya> krok 4: bootstrap zmiany pliku app.Module.ts: [AppComponent] na bootstrap: [LakshyaComponent]

więc powyżej rozwiązanie błędu.

Question 12

Django + Angular

Miałem niestandardowy plik index.html, a nie ten wygenerowany przez kątowy CLI.

Miałem ten błąd, ponieważ umieściłem wygenerowane pliki skryptów w <head>sekcji zamiast na końcu </body>tagu zamykającego (po <app-root></app-root>tagach)

Question 13

W pliku app.module.ts, jeśli masz my-app w bootstrapie, skomentuj ją lub usuń.

bootstrap: [AppComponent, // moja-aplikacja]

Answer 1

85

Problem polega na tym, że kiedy uruchamiam moją aplikację, działa dobrze. Ale kiedy ją odświeżam, przez większość czasu widzę poniżej msg.

Selektor „moja-aplikacja” nie pasuje do żadnych elementów

Ale dziwne jest to, że wiele razy, gdy odświeżam moją aplikację, również działa.

Ostatecznie moja aplikacja zachowuje się dziwnie i nie mogę tego rozgryźć.
Czasami to działa, czasami nie ...

Jakaś sugestia, nie mogę wymyślić kodu ???

Uwaga: nie mam jeszcze złożonej struktury ani komponentów, ale prostą implementację.

angular micronyks
źródło

opublikuj pełny komunikat o błędzie lub dowolną część kodu lub my-appkomponentu.

Pardeep Jain

W IE11 - Potentially unhandled rejection [2] The selector "micropuppy-app" did not match any elementsiw FF- 'WYJĄTEK: selektor „moja-aplikacja” nie pasował do żadnych elementów BaseException @ cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/ ... .. ... ... .. i kontynuuj ”

micronyks

Widziałem to kilka razy - jest to problem z IE, a konkretnie w jaki sposób ładuje skrypty, jeśli dobrze pamiętam. Obawiam się, że nie wiem, jak to naprawić, było to dawno temu, ale mam nadzieję, że może wskazać ci właściwy kierunek.

Sasxa

Sasxa, mam ten problem również w FF. Nie wiem, w czym problem. N czuję się bezradny ...

micronyks

Answer 2

opublikuj pełny komunikat o błędzie lub dowolną część kodu lub my-appkomponentu.

Pardeep Jain

Answer 3

W IE11 - Potentially unhandled rejection [2] The selector "micropuppy-app" did not match any elementsiw FF- 'WYJĄTEK: selektor „moja-aplikacja” nie pasował do żadnych elementów BaseException @ cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/ ... .. ... ... .. i kontynuuj ”

micronyks

Answer 4

Widziałem to kilka razy - jest to problem z IE, a konkretnie w jaki sposób ładuje skrypty, jeśli dobrze pamiętam. Obawiam się, że nie wiem, jak to naprawić, było to dawno temu, ale mam nadzieję, że może wskazać ci właściwy kierunek.

Sasxa

Answer 5

Sasxa, mam ten problem również w FF. Nie wiem, w czym problem. N czuję się bezradny ...

micronyks

Answer 6

101

Zdarzyło mi się to, ponieważ importowałem swój kod w headtagu, więc potencjalnie działał i próbował załadować się, zanim DOM był gotowy.

Możesz albo przenieść skrypt na dół bodytagu, albo umieścić kod ładowania początkowego w detektorze zdarzeń:

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

lub:

<!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
źródło

W main.jsdokumentacji maszynopisu nie ma uwzględnienia skryptu w demonstracjach plunkera. Chociaż mam błąd.

Elfayer

5

Nie otrzymałem tego błędu, dopóki nie spróbowałem spakować skompilowanych plików maszynopisu.

ps2goat

2

Napotkałem ten sam problem podczas używania webpacka do łączenia modułów ... i kiedy umieściłem skrypt po ... tagu body ... działa ...

refaktoryzacja

2

Możesz również dołączyć go do zdarzenia window.onload:window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }

kitimenpolku

3

OMG, tak długo waliłem głową w ścianę, próbując to rozgryźć i to było takie proste. Dziękuję Ci!

Patrick Graham,

Answer 7

W main.jsdokumentacji maszynopisu nie ma uwzględnienia skryptu w demonstracjach plunkera. Chociaż mam błąd.

Elfayer

Answer 8

5

Nie otrzymałem tego błędu, dopóki nie spróbowałem spakować skompilowanych plików maszynopisu.

ps2goat

Answer 9

2

Napotkałem ten sam problem podczas używania webpacka do łączenia modułów ... i kiedy umieściłem skrypt po ... tagu body ... działa ...

refaktoryzacja

Answer 10

2

Możesz również dołączyć go do zdarzenia window.onload:window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }

kitimenpolku

Answer 11

3

OMG, tak długo waliłem głową w ścianę, próbując to rozgryźć i to było takie proste. Dziękuję Ci!

Patrick Graham,

Answer 12

69

Kątowe 4: musiałem zmienić <app-root></app-root>się <my-app></my-app>w pliku index.html

Mladen Rakonjac
źródło

2

Wygląda na to, że wystąpił problem z angular-clitworzeniem app-rootodniesienia w index.htmlpliku, podczas gdy plik ts dotyczący punktu wejścia samouczka Tour of Heroes odwołuje się do niego my-app. IMO powinni używać tej samej konwencji nazewnictwa, ponieważ zespół Angular zalecał angular-clijako najlepszy sposób tworzenia projektu.

Co jest w wyszukiwarce

Nieco podobnie, na wypadek, gdyby ktoś miał problem z serwerem webpack-dev-server (WDS) - zbudowałem swoją aplikację, gdy selector był <app-root> i uruchomiłem aplikację za pomocą WDS. Następnie zmieniłem selektor na <my-app> w moim komponencie i index.html. To wtedy zacząłem otrzymywać powyższy błąd. Problem polegał na tym, że plik index.html w folderze „dist” nie został zaktualizowany. Zatrzymałem WDS, ponownie zbudowałem aplikację i uruchomiłem ją. Wszystko zaczęło działać dobrze!

ramtech

Answer 13

2

Wygląda na to, że wystąpił problem z angular-clitworzeniem app-rootodniesienia w index.htmlpliku, podczas gdy plik ts dotyczący punktu wejścia samouczka Tour of Heroes odwołuje się do niego my-app. IMO powinni używać tej samej konwencji nazewnictwa, ponieważ zespół Angular zalecał angular-clijako najlepszy sposób tworzenia projektu.

Co jest w wyszukiwarce

Answer 14

Nieco podobnie, na wypadek, gdyby ktoś miał problem z serwerem webpack-dev-server (WDS) - zbudowałem swoją aplikację, gdy selector był <app-root> i uruchomiłem aplikację za pomocą WDS. Następnie zmieniłem selektor na <my-app> w moim komponencie i index.html. To wtedy zacząłem otrzymywać powyższy błąd. Problem polegał na tym, że plik index.html w folderze „dist” nie został zaktualizowany. Zatrzymałem WDS, ponownie zbudowałem aplikację i uruchomiłem ją. Wszystko zaczęło działać dobrze!

ramtech

Answer 15

Rzeczy do zrobienia:

Idź do app.module.ts (do głównych modułów, w większości przypadków jest to nazwa)
Sprawdź, czy masz część „ boostrap :” - jeśli nie, dodaj:

bootstrap: [AppComponent] // gdzie AppComponent jest głównym składnikiem
Sprawdź, czy teraz działa, jeśli nie - przejdź do AppComponent i sprawdź swój selektor . Powinien być taki sam, jak tagi w treści w pliku index.html

więc index.html powinien zawierać coś takiego:

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

gdzie zamiast tego <app-root>należy użyć selektora z głównego komponentu AppComponent

Jeśli używasz aplikacji kątowej w zewnętrznej witrynie internetowej, powinieneś rozważyć użycie odroczenia w nagłówkach dla plików kątowych

Answer 16

4

<body>tag naprawił to

Alex Okrushko

Answer 17

Dziękuję Ci! To rozwiązało mój problem.

Muhammad Ayyaz

Answer 18

6

Mam ten sam problem, gdy używam Angular Universal. Ale to dlatego, że używam BrowserModulew main.node.ts , rozwiązaniem jest

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

I sprawdź tutaj, aby uzyskać więcej informacji: https://github.com/angular/universal/issues/542

Hongbo Miao
źródło

Nie dotyczy to najnowszych wersji Angular. Obecnie BrowserModule zastępuje UniversalModule, ale jako parametr przekazywany jest identyfikator aplikacji, dzięki czemu klient i serwer mogą się wymieniać. Zobacz tutaj: github.com/angular/universal/blob/…

Dessus

Answer 19

Nie dotyczy to najnowszych wersji Angular. Obecnie BrowserModule zastępuje UniversalModule, ale jako parametr przekazywany jest identyfikator aplikacji, dzięki czemu klient i serwer mogą się wymieniać. Zobacz tutaj: github.com/angular/universal/blob/…

Dessus

Answer 20

Jeśli używasz podstawowego szablonu angular2 / asp.net, dostępnego tutaj: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/, możesz znaleźć kilka ostatnich wierszy boot-client.ts z następującą pomocą (i pozwala uniknąć wielu przerażająco wyglądających błędów konsoli podczas ponownego ładowania strony przez HMR):

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

Answer 21

Aktualizowałem aplikację Angular 5.2 do Angular 6.1 i napotkałem podobny problem. W tym przypadku problem polegał na tym, że plik index.html w ogóle nie miał <body>. Zamiast tego został uwzględniony w my-appkomponencie.

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

Kiedyś działało to z Angularem 5.2 (i wcześniejszymi wersjami), ponieważ w wygenerowanym pliku index.html tagi skryptu zostały umieszczone na końcu. Po aktualizacji do wersji 6.1 tagi skryptu zostały zamiast tego umieszczone na początku pliku (i zakładam, że w związku z tym są wykonywane przed <my-app></my-app>obecnością elementu głównego.

Rozwiązaniem było przejście <body>do index.html . (Pierwotnie został umieszczony w komponencie, ponieważ ktoś chciał zastosować klasy warunkowe do elementu body za pomocą ngClass.)

Answer 22

Żadna z powyższych odpowiedzi nie rozwiązała mojego problemu. W ten sposób można rozwiązać ten sam rodzaj błędu. Nie powinieneś mieć więcej niż jednego komponentu jako komponentu Bootstarp. Więc tablica Bootstrap powinna mieć tylko jeden komponent. Przez pomyłkę umieściłem 4 komponenty w tablicy bootstrap. Usunąłem stamtąd te 4 komponenty i umieściłem w tablicy entryComponents (jak pokazano w kod poniżej) .To mi pomogło.

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

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

Answer 23

2

Może przydałby się plik

odraczać

Oznacz w swoich nagłówkach pliki-js.

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

Mad Max
źródło

Ta odpowiedź działa w większości przypadków dla tego błędu. To naprawdę powinna być odpowiedź.

Chinmay

Answer 24

Ta odpowiedź działa w większości przypadków dla tego błędu. To naprawdę powinna być odpowiedź.

Chinmay

Answer 25

Zdarzyło mi się to, gdy zmieniłem komponent bootstrap z AppComponentna nowy komponent. Kiedy to zmieniasz, musisz to również zmienić w głównym index.html. index.htmlpowinien zawierać komponent bootstrap.

Na przykład, jeśli zmienisz app-componentsię app-loginw app.module.tsw sekcji bootstrap następnie należy zaktualizować index.htmltakiego

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

Answer 26

Kiedy tworzę nowy komponent, wykonaj poniższe czynności, aby rozwiązać poniższe problemy.

Step-1 - Utwórz nowy komponent z ng g c lakshya. Step-2 Pod folfer aplikacji lakshya utworzony z 4 plików. Step-3 Index.html należy <app-root></app-root>wykonać <app-lakshya></app-lakshya> krok 4: bootstrap zmiany pliku app.Module.ts: [AppComponent] na bootstrap: [LakshyaComponent]

więc powyżej rozwiązanie błędu.

Answer 27

Django + Angular

Miałem niestandardowy plik index.html, a nie ten wygenerowany przez kątowy CLI.

Miałem ten błąd, ponieważ umieściłem wygenerowane pliki skryptów w <head>sekcji zamiast na końcu </body>tagu zamykającego (po <app-root></app-root>tagach)

Answer 28

0

W pliku app.module.ts, jeśli masz my-app w bootstrapie, skomentuj ją lub usuń.

bootstrap: [AppComponent, // moja-aplikacja]

Lloyd
źródło

Selektor „moja-aplikacja” nie pasował do żadnych elementów

Odpowiedzi: