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

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

এই সমস্যা ঘটে যখন আপনি webpack কে production flag (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 কে minimize করার চেষ্টা করছে যা সমস্যা সৃষ্টি করছে। যদি HTML minimization বন্ধ করা হয়, এই সমস্যা চলে যায়। ন্যায্যতার সাথে বলতে গেলে, এই ত্রুটি সহ বেশিরভাগ লোকের কাছে অবৈধ HTML ছিল। আমি আপনাকে এই সমস্যার চারপাশে কাজ করার আগে আপনার HTML পরীক্ষা করতে উৎসাহিত করি, আপনি সমস্যাটি শুধুমাত্র নিচে ঠেলে দিতে পারেন।

HTML minimization বন্ধ করা 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 } } ] },