"Uygulamam" seçicisi hiçbir öğeyle eşleşmedi


86

Sorun, uygulamamı çalıştırdığımda iyi çalışıyor. Ama onu yenilediğimde çoğu zaman mesajın altına iniyorum.

"Uygulamam" seçicisi hiçbir öğeyle eşleşmedi

Ancak tuhaf olan şey, uygulamamı yenilediğimde çoğu zaman da çalışıyor.

Sonuçta uygulamamın garip bir davranışına sahip oluyorum ve bunu çözemiyorum.
Bazen işe yarıyor, bazen yaramıyor ...

Herhangi bir öneri, kod ile gelemiyor ???

Not: Henüz karmaşık bir yapıya veya bileşenlere sahip değilim, ancak basit bir uygulama.


tam hata mesajını veya kodun veya my-appbileşenin herhangi bir bölümünü gönderin .
Pardeep Jain

IE11'de - Potentially unhandled rejection [2] The selector "micropuppy-app" did not match any elementsve FF- 'EXCEPTION'da: "my-app" seçicisi BaseException @ cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/… ... .. ... ... .. ve devam et '
micronyks

Bunu birkaç kez gördüm - bu bir IE sorunu, özellikle de doğru hatırlıyorsam komut dosyalarını nasıl yüklediğini. Korkarım bunun düzeltmesini bilmiyorum, uzun zaman önceydi, ama umarım sizi doğru yöne yönlendirebilir.
Sasxa

Sasxa, FF'de de bu sorunla karşı karşıyayım. Sorunun ne olduğunu bilmiyorum. N çaresiz hissediyorum ...
micronyks

Yanıtlar:


102

Bu benim başıma geldi çünkü headetiketteki kodumu içe aktarıyordum , bu nedenle potansiyel olarak çalışıyordu ve DOM hazır olmadan önce önyükleme yapmaya çalışıyordu.

Komut dosyasını bodyetiketin altına taşıyabilir veya önyükleme kodunu bir olay dinleyicisine yerleştirebilirsiniz:

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

veya:

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

main.jsTypecript belgelerinde plunker demolarına komut dosyası eklenmesi yoktur . Yine de hata bende.
Elfayer

5
Derlenmiş daktilo dosyalarımı paketlemeye çalışana kadar bu hatayı almadım.
ps2goat

2
Modül paketlemesi için web paketini kullanırken aynı sorunla karşılaştım .... ve sonra komut dosyasını yerleştirdim .. body tag .. çalışıyor ...
refactor

2
Bunu window.onload olayına da ekleyebilirsiniz:window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }
kitimenpolku

3
OMG Uzun zamandır kafamı duvara vuruyordum bunu anlamaya çalışıyordum ve çok basitti. Teşekkür ederim!
Patrick Graham

70

Angular 4: index.html dosyasında <app-root></app-root>ile değiştirmek zorunda kaldım <my-app></my-app>


2
Dosyada angular-clibir app-rootreferans oluşturmada bir sorun var gibi index.htmlgörünürken, Tour of Heroes öğretici giriş noktası ts dosyası bunun yerine my-app. IMO, Angular ekibi angular-clibir proje oluşturmanın en iyi yolu olarak önerdiğinden, ikisi aynı adlandırma kuralını kullanmalıdır .
Peter David Carter

Biraz benzer, webpack-dev-server (WDS) ile bu sorunla karşılaşan herhangi biri durumunda - Uygulamamı seçici <app-root> iken oluşturdum ve uygulamayı WDS kullanarak başlattım. Daha sonra bileşenimde ve index.html'de seçiciyi <uygulamam> olarak değiştirdim. İşte o zaman yukarıdaki hatayı almaya başladım. Sorun, 'dist' klasörünün altındaki index.html güncellenmedi. WDS'yi durdurdum, uygulamamı tekrar oluşturdum ve ardından uygulamayı başlattım. Her şey yolunda gitmeye başladı!
ramtech

26

Yapılacak şeyler:

  1. App.module.ts adresine gidin (ana modüllere, çoğu durumda bu bir addır)
  2. Kısmen " boostrap " olup olmadığını kontrol edin :" - ekleme yoksa:

    bootstrap: [AppComponent] // AppComponent ana bileşeninizdir

  3. Şimdi çalışıp çalışmadığını kontrol edin, değilse - AppComponent'e gidin ve seçicinizi kontrol edin . İndex.html'deki gövdedeki etiketlerle aynı olmalıdır

dolayısıyla index.html şuna benzer bir şey içermelidir:

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

<app-root>senin yerine ana AppComponent'ten seçiciyi kullanmalısın

  1. Açısal uygulamanızı harici bir web sitesinde kullanıyorsanız, açısal dosyalar için başlıklarda erteleme kullanmayı düşünmelisiniz.

4
<body>etiket düzeltildi
Alex Okrushko

Teşekkür ederim! Sorunumu çözdü.
Muhammed Ayyaz

6

Angular Universal'ı kullandığımda da aynı sorunu yaşıyorum. Ama main.node.tsBrowserModule içinde kullandığım için çözüm şu:

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

Daha fazla bilgi için burayı kontrol edin: https://github.com/angular/universal/issues/542


Bu, Angular'ın son sürümleri için geçerli değildir. Bu günlerde BrowserModule, UniversalModule'un yerini alıyor ancak istemci ve sunucunun değiş tokuş yapabilmesi için parametre olarak bir appId aktarılıyor. Buraya bakın: github.com/angular/universal/blob/…
Dessus

5

Burada angular2 / asp.net çekirdek şablonunu kullanıyorsanız: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/ son birkaç satırını değiştirmeyi bulabilirsiniz. boot-client.ts ile aşağıdaki yardımcı olur (ve HMR sayfanızı yeniden yüklediğinde çok sayıda korkutucu görünen konsol hatalarını önler):

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

4

Bir Angular 5.2 uygulamasını Angular 6.1'e güncelliyordum ve benzer bir sorunla karşılaştım. Bu durumda sorun, index.html dosyasında hiç bulunmamasıydı <body>. Bunun yerine my-appbileşene dahil edildi .

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

Bu, Angular 5.2 (ve önceki sürümler de) ile çalışmaktaydı çünkü oluşturulan index.html'de betik etiketleri sona yerleştiriliyordu. 6.1'e yükselttikten sonra, betik etiketleri bunun yerine dosyanın başına yerleştirildi (ve bu nedenle,<my-app></my-app> kök öğe gerçekten mevcut .

Çözüm taşımak oldu <body>içine index.html . (Başlangıçta bileşene yerleştirildi çünkü birisi koşullu sınıfları vücut öğesine uygulamak istedi ngClass.)


4

Yukarıdaki cevaplardan hiçbiri sorunumu çözmedi. Aynı tür bir hatayı bu şekilde çözebilirsiniz. Bootstarp bileşeni olarak birden fazla bileşene sahip olmamalısınız. Öyleyse, Bootstrap dizisinin yalnızca bir bileşeni olmalıdır. aşağıdaki kod). Bu bana yardımcı oldu.

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

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


2

Bu, bootstrap bileşenini AppComponentyeni bir bileşene değiştirdiğimde başıma geldi . Değiştirdiğinizde, ana index.htmlolarak da değiştirmeniz gerekir .index.htmlbootstrap bileşenini içermelidir.

Değiştirmek Örneğin, app-componenthiç app-loginde app.module.tsönyükleme bölümünde o zaman güncellemek gerekir index.htmlböyle

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

1

Django + Açısal

Açısal CLI tarafından oluşturulan değil, özel bir index.html'im vardı.

Bu hatayı aldım çünkü oluşturulan komut dosyalarını <head>kapanış </body>etiketinin sonu yerine bölüme yerleştirdim ( <app-root></app-root>etiketlerden sonra )


1

Yeni bileşen oluşturduğumda, aşağıdaki sorunları çözmek için aşağıdaki adımları izlemem gerekiyor.

Adım-1- Yeni bileşen oluşturun ng g c lakshya. Adım-2- Uygulama lakshya folfer altında 4 dosya ile oluşturulmuştur. Adım-3- Index.html <app-root></app-root>, <app-lakshya></app-lakshya> Adım 4- app.Module.ts dosyası değiştirmeli bootstrap: [AppComponent] to bootstrap: [LakshyaComponent]

bu yüzden yukarıdaki hata çözülür.


0

App.module.ts içinde, önyüklemede uygulamam varsa, yorum yapın veya silin.

bootstrap: [AppComponent, // uygulamam]

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.