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

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

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>

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

Rzeczy do zrobienia:

1. Idź do app.module.ts (do głównych modułów, w większości przypadków jest to nazwa)

2. Sprawdź, czy masz część „ boostrap :” - jeśli nie, dodaj:

   bootstrap: [AppComponent] // gdzie AppComponent jest głównym składnikiem

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

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

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

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

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

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

Może przydałby się plik

odraczać

Oznacz w swoich nagłówkach pliki-js.

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

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>

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.

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)

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

bootstrap: [AppComponent, // moja-aplikacja]