নির্বাচক "মাই-অ্যাপ" কোনও উপাদানগুলির সাথে মেলে না

Question 1

সমস্যাটি যখন আমি আমার অ্যাপ্লিকেশনটি চালিত করি তখন এটি ঠিকঠাক হয়। তবে আমি যখন তা রিফ্রেশ করি তখন বেশিরভাগ সময় আমি নীচে নামি।

নির্বাচক "মাই-অ্যাপ" কোনও উপাদানের সাথে মেলে না

তবে আশ্চর্যের বিষয় হ'ল আমি যখন আমার অ্যাপটি রিফ্রেশ করি তখন এটিও কার্যকর হয় works

সুতরাং শেষ পর্যন্ত আমার কাছে আমার অ্যাপটির একটি অদ্ভুত আচরণ রয়েছে এবং এটি বের করতে অক্ষম।
কখনও কখনও এটি কাজ করে কখনও কখনও ...

কোন পরামর্শ, কোড নিয়ে আসতে পারে না ???

দ্রষ্টব্য: আমার কাছে এখনও জটিল কাঠামো বা উপাদান নেই তবে সাধারণ বাস্তবায়ন।

Question 2

আমার সাথে এটি ঘটেছিল কারণ আমি 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>

Question 3

কৌণিক 4: আমাকে সূচক html ফাইলটিতে পরিবর্তন <app-root></app-root>করতে <my-app></my-app>হয়েছিল

Question 4

যা করতে হবে:

App.module.ts এ যান (মূল মডিউলগুলিতে, বেশিরভাগ ক্ষেত্রে এটি একটি নাম)
আপনার " বুস্ট্রেপ :" অংশ আছে কিনা তা পরীক্ষা করুন - যদি যোগ না করা হয়:

bootstrap: [AppComponent] // যেখানে অ্যাপকোম্পোনটি আপনার মূল উপাদান
এটি এখন কাজ করে কিনা তা পরীক্ষা করে দেখুন - অ্যাপকোম্পোন্টে যান এবং আপনার নির্বাচককে পরীক্ষা করুন । এটি সূচক html এ বডিতে ট্যাগগুলির মতো হওয়া উচিত

সুতরাং index.html এর মধ্যে এমন কিছু থাকা উচিত:

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

যেখানে আপনার পরিবর্তে <app-root>প্রধান অ্যাপকোম্পোনেন্ট থেকে নির্বাচক ব্যবহার করা উচিত

আপনি যদি বাহ্যিক ওয়েবসাইটে আপনার কৌণিক অ্যাপ্লিকেশন ব্যবহার করছেন তবে আপনার কৌনিক ফাইলগুলির জন্য শিরোনামে ডিফার ব্যবহার করা উচিত

Question 5

আমি কৌনিক ইউনিভার্সাল ব্যবহার করার সময় আমি একই সমস্যা পেয়েছি। কিন্তু এটা কারণ আমি ব্যবহার করছি হয় BrowserModuleমধ্যে main.node.ts , সমাধান

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

এবং আরও তথ্যের জন্য এখানে চেক করুন: https://github.com/angular/universal/issues/542

Question 6

আপনি যদি এখান থেকে কৌণিক 2 / এসপিএন কোর টেম্পলেটটি ব্যবহার করছেন: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/ আপনি শেষ কয়েকটি লাইন প্রতিস্থাপন করতে পারেন নীচের সাহায্যে বুট-ক্লায়েন্ট.টস সাহায্য করে (এবং এইচএমআর আপনার পৃষ্ঠাটি পুনরায় লোড করার সময় প্রচুর ভীতিজনক কনসোল ত্রুটিগুলি এড়িয়ে চলে):

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

Question 7

আমি একটি কৌণিক 5.2 অ্যাপ্লিকেশনটি কৌণিক 6.1 এ আপডেট করছি এবং অনুরূপ সমস্যাটিতে চলেছি run এই ক্ষেত্রে সমস্যাটি হ'ল 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>

এটি অ্যাঙ্গুলার 5.2 (এবং পূর্ববর্তী সংস্করণগুলিও) নিয়ে কাজ করত কারণ উত্পন্ন সূচি html এ স্ক্রিপ্ট ট্যাগগুলি শেষে রাখা হয়েছিল। 6.1 এ আপগ্রেড করার পরে স্ক্রিপ্ট ট্যাগগুলি পরিবর্তে ফাইলের শুরুতে স্থাপন করা হয়েছিল (এবং আমি ধরে নিই যে <my-app></my-app>মূল উপাদানটি আসলে উপস্থিত হওয়ার আগেই সম্পাদিত হয়েছিল ।

সমাধান সরাতে ছিল <body>মধ্যে index.html । (এটি মূলত উপাদানটিতে স্থাপন করা হয়েছিল কারণ কেউ শরীরের উপাদানগুলিতে শর্তযুক্ত ক্লাস প্রয়োগ করতে চেয়েছিল ngClass।)

Question 8

উপরের উত্তরগুলির মধ্যে ননই আমার সমস্যাটিকে সমাধান করেছে his বুটস্ট্র্যাপ উপাদান হিসাবে আপনার একাধিক উপাদান থাকা উচিত নয়। সুতরাং, বুটস্ট্র্যাপ অ্যারেটিতে কেবল একটি উপাদান থাকা উচিত mistake নীচে কোড) .এটি আমাকে সাহায্য করেছে।

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

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

Question 9

হতে পারে আপনি ব্যবহার করতে পারেন

স্থগিত

আপনার শিরোনাম জেএস-ফাইলগুলিতে ট্যাগ করুন।

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

Question 10

আমার সাথে এটি হয়েছিল যখন আমি বুটস্ট্র্যাপ উপাদানটি AppComponentএকটি নতুন উপাদানতে পরিবর্তন করেছি । আপনি যখন এটি পরিবর্তন করেন আপনার মূল এটিতেও পরিবর্তন index.htmlকরা উচিত। index.htmlবুটস্ট্র্যাপ উপাদান থাকা উচিত।

উদাহরণস্বরূপ, যদি আপনি পরিবর্তন app-componentকরতে app-loginমধ্যে app.module.tsবুটস্ট্র্যাপ বিভাগে তারপর আপনি আপনার আপডেট হওয়া উচিত index.htmlভালো

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

Question 11

জ্যাঙ্গো + কৌণিক

আমার একটি কাস্টম সূচক html ছিল, কৌনিক সিএলআই দ্বারা উত্পাদিত নয়।

আমার এই ত্রুটি হয়েছিল কারণ আমি জেনারেট হওয়া স্ক্রিপ্ট ফাইলগুলি <head>ক্লোজিং </body>ট্যাগের শেষে পরিবর্তে বিভাগে রেখেছি ( <app-root></app-root>ট্যাগগুলির পরে )

Question 12

আমি যখন নতুন উপাদান তৈরি করি তখন নীচের সমস্যাগুলি সমাধান করার জন্য নীচের পদক্ষেপগুলি অনুসরণ করা দরকার।

পদক্ষেপ -১- এর সাথে নতুন কমোন্ট তৈরি করুন ng g c lakshya। পদক্ষেপ -২- অ্যাপ্লিকেশনের অধীনে লক্ষ্যা ফলফার তৈরি করেছে ৪ টি ফাইল। স্টেপ-3- হল Index.html প্রয়োজন <app-root></app-root>থেকে <app-lakshya></app-lakshya> ধাপ 4- app.Module.ts ফাইল পরিবর্তন বুটস্ট্র্যাপ: [AppComponent] বুটস্ট্র্যাপ জানিয়েছে: [LakshyaComponent]

উপরের ত্রুটি সমাধান।

Question 13

আপনার app.module.ts- এ, যদি আপনার বুটস্ট্র্যাপে আমার অ্যাপ থাকে তবে মন্তব্য করুন বা মুছুন।

বুটস্ট্র্যাপ: [অ্যাপকম্পোয়েন্ট, // মাই-অ্যাপ]