चयनकर्ता "माय-ऐप" किसी भी तत्व से मेल नहीं खाता

85

समस्या तब है जब मैं अपना ऐप चलाता हूं, यह ठीक काम करता है। लेकिन जब मैं इसे रिफ्रेश करता हूं, तो ज्यादातर समय मुझे msg के नीचे मिलता है।

चयनकर्ता "माय-ऐप" किसी भी तत्व से मेल नहीं खाता

लेकिन अजीब बात यह है कि कई बार जब मैं अपने ऐप को रिफ्रेश करता हूं तो यह भी काम करता है।

तो आखिरकार मेरे पास अपने ऐप का एक अजीब व्यवहार है और यह पता लगाने में असमर्थ है।
कभी कभी यह काम करता है कभी कभी नहीं ...

कोई भी सुझाव, कोड के साथ नहीं आ सकता है ???

नोट: मेरे पास अभी तक जटिल संरचना या घटक नहीं है लेकिन सरल कार्यान्वयन है।

angular 
— micronyks
स्रोत
पूर्ण त्रुटि संदेश या कोड या my-appघटक के किसी भाग को पोस्ट करें ।
— परदीप जैन
IE11 में - Potentially unhandled rejection [2] The selector "micropuppy-app" did not match any elementsऔर FF- 'अपवाद: चयनकर्ता "my-app" में किसी भी तत्व से नहीं मिला है BaseException @ cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/… ... ..… .. .. और जारी रखें
— माइक्रोनिएक्स
मैंने कई बार इस जोड़े को देखा है - यह एक IE मुद्दा है, खासकर अगर यह स्क्रिप्ट को लोड करता है अगर मुझे सही ढंग से याद है। मुझे डर है कि मैं इसके लिए फिक्स नहीं जानता, बहुत समय पहले था, लेकिन उम्मीद है कि यह आपको सही दिशा में इंगित कर सकता है।
— 19
Sasxa, मैं एफएफ में भी इस समस्या का सामना कर रहा हूं। मुझे नहीं पता कि समस्या क्या है। N असहाय महसूस करता है ...
— micronyks

जवाबों:

101

यह मेरे साथ हुआ क्योंकि मैं headटैग में अपना कोड आयात कर रहा था , इसलिए डोम के तैयार होने से पहले यह संभवतः चल रहा था और बूटस्ट्रैप करने का प्रयास कर रहा था।

आप स्क्रिप्ट को bodyटैग के निचले भाग में ले जा सकते हैं , या एक इवेंट श्रोता के अंदर बूटस्ट्रैप कोड डाल सकते हैं:

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

या:

<!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.jsटाइपस्क्रिप्ट प्रलेखन में प्लंकर डेमो में कोई स्क्रिप्ट शामिल नहीं है । हालांकि मेरे पास त्रुटि है।
— Elfayer
5
जब तक मैंने अपनी संकलित टाइपस्क्रिप्ट फ़ाइलों को बंडल करने की कोशिश नहीं की मुझे यह त्रुटि नहीं मिली।
— ps2goat
2
मॉड्यूल बंडलिंग के लिए वेबपैक का उपयोग करते समय मुझे उसी समस्या का सामना करना पड़ा .... और एक बार जब मैंने स्क्रिप्ट रखी .. उसके बाद बॉडी टैग .. यह काम कर रहा है ...
— रिफैक्टर
2
आप इसे window.onload घटना से भी जोड़ सकते हैं:window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }
— kitimenpolku
3
OMG मैं दीवार पर अपने सिर को पीट रहा था ताकि लंबे समय तक यह पता लगाने की कोशिश की जा सके और यह बहुत आसान था। धन्यवाद!
— पैट्रिक ग्राहम
69

कोणीय 4: मैं बदलना पड़ा <app-root></app-root>साथ <my-app></my-app>index.html फ़ाइल में

— म्लादेन राकोन्झिक
स्रोत
2
फ़ाइल में angular-cliएक app-rootसंदर्भ बनाने के साथ समस्या होने लगती है index.html, जबकि टूर ऑफ़ हीरोज़ ट्यूटोरियल एंट्रिप ts फ़ाइल संदर्भित करता है my-app। IMO दोनों को एक ही नामकरण सम्मेलन का उपयोग करना चाहिए क्योंकि कोणीय टीम angular-cliपरियोजना बनाने के लिए सबसे अच्छे तरीके की सिफारिश कर रही है ।
— एक Google खोज
कुछ इसी तरह, बस किसी को भी इस मुद्दे का सामना करना पड़ रहा है webpack-dev-server (WDS) के साथ - मैंने अपना ऐप तब बनाया था जब चयनकर्ता <app-root> था और WDS का उपयोग करके ऐप लॉन्च किया था। फिर मैंने चयनकर्ता को अपने घटक और index.html में <my-app> में बदल दिया। यही कारण है कि जब मुझे ऊपर त्रुटि होने लगी। समस्या थी, 'dist' फ़ोल्डर के अंतर्गत index.html अद्यतन नहीं किया गया था। मैंने WDS को रोक दिया, फिर से अपना ऐप बनाया और फिर ऐप लॉन्च किया। सब कुछ ठीक काम करना शुरू कर दिया!
— रामटेक
26

करने के लिए काम:

  1. App.module.ts पर जाएं (मुख्य मॉड्यूल के लिए, ज्यादातर मामलों में यह एक नाम है)

  2. जाँच करें कि क्या आपके पास " बूस्टैप " है :" है - यदि कोई जोड़ नहीं है:

    bootstrap: [AppComponent] // जहां AppComponent आपका मुख्य घटक है

  3. जांचें कि क्या यह अब काम करता है, यदि नहीं - AppComponent पर जाएं और अपने चयनकर्ता की जांच करें । यह index.html में शरीर के टैग के समान होना चाहिए

इसलिए index.html में कुछ इस तरह होना चाहिए:

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

जहां <app-root>आप के बजाय मुख्य AppComponent से चयनकर्ता का उपयोग करना चाहिए

  1. यदि आप बाहरी वेबसाइट में अपने कोणीय एप्लिकेशन का उपयोग कर रहे हैं, तो आपको कोणीय फ़ाइलों के लिए हेडर में defer का उपयोग करने पर विचार करना चाहिए
— प्रेज़ेमेक स्ट्रूसिस्की
स्रोत
4
<body>टैग ने इसे ठीक कर दिया
— एलेक्स ओक्रूस्को
धन्यवाद! इसने मेरी समस्या का समाधान कर दिया।
— मुहम्मद अयाज
6

मुझे वही मुद्दा मिला जब मैं कोणीय सार्वभौमिक का उपयोग करता हूं। लेकिन यह क्योंकि मैं उपयोग कर रहा हूँ है BrowserModuleमें main.node.ts , समाधान है

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

और अधिक जानकारी के लिए यहां देखें : https://github.com/angular/universal/issues/542

— होंगबो मियाओ
स्रोत
यह कोणीय के नवीनतम संस्करणों के लिए सही नहीं है। इन दिनों BrowserModule UniversalModule की जगह लेता है, लेकिन एक appId को एक पैरामीटर के रूप में पारित किया जाता है ताकि क्लाइंट और सर्वर विनिमय कर सकें। यहाँ देखें: github.com/angular/universal/blob/…
— Dessus
5

यदि आप यहाँ से कोणीय 2 / asp.net कोर टेम्प्लेट का उपयोग कर रहे हैं: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/ आपको अंतिम कुछ पंक्तियों की जगह मिल सकती है निम्नलिखित के साथ boot-client.ts मदद करता है (और जब एचएमआर आपके पृष्ठ को पुनः लोड करता है, तो बहुत डरावनी दिखने वाली कंसोल त्रुटियों से बचा जाता है):

const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
    window.onload = () => bootApplication();
    location.reload();
} else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}
— रवि देसाई
स्रोत
4

मैं एक कोणीय 5.2 को कोणीय 6.1 पर अपडेट कर रहा था और इसी तरह के मुद्दे पर चल रहा था। इस मामले में समस्या यह थी कि index.html फ़ाइल में बिल्कुल भी नहीं था <body>। इसके बजाय my-appघटक में शामिल किया गया था ।

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

यह Angular 5.2 (और पहले के संस्करण भी) के साथ काम करता था क्योंकि उत्पन्न index.html में स्क्रिप्ट टैग को अंत में रखा गया था। 6.1 में अपग्रेड करने के बाद स्क्रिप्ट टैग को फ़ाइल की शुरुआत में रखा गया था (और मुझे लगता है कि <my-app></my-app>रूट तत्व वास्तव में मौजूद होने से पहले निष्पादित किया गया है।

Solution को index.html<body> में जाना था । (यह मूल रूप से घटक के लिए रखा गया था क्योंकि कोई व्यक्ति शरीर के तत्वों के साथ सशर्त कक्षाएं लागू करना चाहता था ।)ngClass

— जोनी नौसजर्वी
स्रोत
4

उपरोक्त उत्तरों में से किसी ने भी मेरे मुद्दे को हल नहीं किया। यह उसी तरह की त्रुटि को हल करता है। आपके पास Bootstarp घटक के रूप में एक से अधिक घटक नहीं होने चाहिए। इसलिए, बूटस्ट्रैप सरणी में केवल एक घटक होना चाहिए। क्योंकि मैंने बूटस्ट्रैप सरणी में 4 घटक रखे हैं। मैंने उन 4 घटकों को वहां से हटा दिया और प्रविष्टिकंपीयर सरणी में डाल दिया (जैसा कि दिखाया गया है। नीचे कोड)। इसने मेरी मदद की।

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

imports: [
BrowserModule,
BrowserAnimationsModule
],
 providers: [],
 bootstrap: [AppComponent
]
})
export class AppModule { }
— DIBYA RANJAN TRIPATHY
स्रोत
2

शायद आप उपयोग कर सकते हैं

आस्थगित करें

अपने हेडर js-files में टैग करें।

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

— पागल मैक्स
स्रोत
यह उत्तर इस त्रुटि के अधिकांश मामलों के लिए काम करता है। यह वास्तव में उत्तर होना चाहिए।
— चिन्मय
2

यह मेरे साथ तब हुआ जब मैंने बूटस्ट्रैप घटक AppComponentको एक नए घटक से बदल दिया । जब आप इसे बदलते हैं तो आपको इसे मुख्य index.htmlरूप से भी बदलना होगा ।index.htmlबूटस्ट्रैप घटक होना चाहिए।

उदाहरण के लिए, अगर आप को बदलने app-componentके लिए app-loginमें app.module.tsबूटस्ट्रैप खंड में तो आप अपने अद्यतन करना चाहिए index.htmlइस तरह

<body>
  <app-login></app-login>
</body>
— कृष्णदास पीसी
स्रोत
1

जब मैं नया घटक बनाता हूं तो नीचे दिए गए मुद्दों को हल करने के लिए नीचे दिए गए चरणों का पालन करना होगा।

स्टेप-1- नया कॉमप्रेन्योर बनाएं ng g c lakshya। स्टेप 2- एप के तहत 4 फाइलों के साथ बनाया गया lakshya folfer। Step-3- Index.html की आवश्यकता <app-root></app-root>है<app-lakshya></app-lakshya> Index.html को 4-4 ऐप की Module.ts फ़ाइल परिवर्तन बूटस्ट्रैप: [AppComponent] से बूटस्ट्रैप: [LakshyaComponent]

इतना ऊपर त्रुटि हल।

— कृष्णा
स्रोत
0

Django + कोणीय

मेरे पास एक कस्टम इंडेक्स था। कोणीय सीएलआई द्वारा उत्पन्न नहीं।

मेरे पास यह त्रुटि थी क्योंकि मैंने <head>समापन </body>टैग के अंत में (टैग के बाद <app-root></app-root>) के बजाय अनुभाग में उत्पन्न स्क्रिप्ट फ़ाइलों को रखा था

— लुका फिलिप
स्रोत
0

अपने app.module.ts में, यदि आपके पास बूटस्ट्रैप में मेरा ऐप है, तो टिप्पणी करें या इसे हटा दें।

बूटस्ट्रैप: [AppComponent, // my-app]

— लॉयड
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.