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

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

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,

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

26

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

— Przemek Struciński
źródło

4

<body>tag naprawił to

— Alex Okrushko

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

— Muhammad Ayyaz

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

5

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

— Ravi Desai
źródło

4

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

— Joni Nousjärvi
źródło

4

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

— DIBYA RANJAN TRIPATHY
źródło

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

2

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>

— Krishnadas PC
źródło

1

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.

— Kryszna
źródło

0

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)

— Luca Filip
źródło

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