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.
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 '
Yanıtlar:
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.
window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }
Angular 4: index.html dosyasında <app-root></app-root>ile değiştirmek zorunda kaldım <my-app></my-app>
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 .
Yapılacak şeyler:
Kısmen " boostrap " olup olmadığını kontrol edin :" - ekleme yoksa:
bootstrap: [AppComponent] // AppComponent ana bileşeninizdir
Ş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
<body>etiket düzeltildi
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
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);
}
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.)
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 { }
Belki kullanabilirsin
ertelemek
Başlıklarınızdaki js dosyalarını etiketleyin.
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>
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 )
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.
my-appbileşenin herhangi bir bölümünü gönderin .