Skip to content

পোস্ট

Angular-এ 'Template parse errors;' এর সমাধান

৩০ অক্টোবর, ২০১৭ • 2 মিনিট পড়া

Angular-এ 'Template parse errors;' এর সমাধান

এটি Angular 2/4/+ এর সাথে আরও হতাশাজনক সমস্যাগুলির মধ্যে একটি ছিল। এটি Angular 2/4/+ এর সাথে সরাসরি কোনো সমস্যা নয়, বরং webpack কীভাবে সহায়ক HTML ফাইলগুলি বান্ডল করে তার সাথে সমস্যা।

এই সমস্যাটি ঘটে যখন আপনি production ফ্ল্যাগ সহ webpack চালান (webpack -p)। কম্পাইলেশন সম্পূর্ণ হয়, কিন্তু সাইট চালানোর সময় একটি রানটাইম ত্রুটি তৈরি হয়: Template parse errors

Uncaught Error: Template parse errors:  
Unexpected closing tag "a". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" Home

4. [AMS\[ERROR ->\]](/ams/#/search)
5. [ Logout</a"): ng:///e/e.html@0:557 Unexpected closing tag "a". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("MS](/ams/#/logout)
6. [ Logout\[ERROR ->\]](/ams/#/logout)

সন্দেহজনক HTML:

<div class="navbar navbar-light bg-faded rounded navbar-toggleable-md"><div class="collapse navbar-collapse" id="containernavbar"> <global-search></global-search>- <a class="nav-link" routerlink="['']"> Home</a>
- [AMS](/ams/#/search)
- [ Logout](/ams/#/logout)

</div></div>

আমি এই HTML-এ কোনো ভুল খুঁজে পাইনি। আমি এটি একাধিক অনলাইন HTML ভ্যালিডেটরের মাধ্যমে চালিয়েছি, এবং HTML সবসময় বৈধ HTML হিসেবে ফিরে এসেছে। কয়েক সপ্তাহ দেয়ালে মাথা ঠুকে কোথাও না পৌঁছানোর পর, আমি ভেবেছিলাম এই সমস্যার কোনো সমাধান অবশ্যই আছে।

আমি যা আবিষ্কার করেছি, একটি GitHub থ্রেডের মাধ্যমে (দুঃখিত আমি এর লিংক হারিয়ে ফেলেছি) তা হল HTML লোডার HTML কে ছোট করার চেষ্টা করছে যা সমস্যার কারণ। যদি HTML মিনিমাইজেশন বন্ধ করা হয়, তাহলে এই সমস্যা চলে যায়। সত্যি বলতে, এই ত্রুটি সহ বেশিরভাগ লোকের অবৈধ HTML ছিল। আমি আপনাকে এই সমস্যার সমাধানের আগে আপনার HTML পরীক্ষা করতে উৎসাহিত করি, আপনি হয়তো শুধু সমস্যাটিকে এগিয়ে নিয়ে যাচ্ছেন।

HTML মিনিমাইজেশন বন্ধ করা webpack.config.js-এ আপনার HTML-loader আপডেট করার মতো সহজ।

আগে:

{
  test: /.html$/,
  loader: 'html-loader'
},

পরে:

{ test: /.html$/, use: [ { loader: ‘html-loader’, options: { minimize: false, removeComments: false, collapseWhitespace: false, removeAttributeQuotes: false } } ] },

লেখক: চাক কনওয়ে সফটওয়্যার ইঞ্জিনিয়ারিং এবং জেনারেটিভ এআই-তে বিশেষজ্ঞ। তার সাথে সোশ্যাল মিডিয়ায় যোগাযোগ করুন: X (@chuckconway) অথবা তাকে YouTube-এ দেখুন।

↑ উপরে ফিরে যান

আপনি এগুলোও পছন্দ করতে পারেন