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 को कम करने की कोशिश कर रहा है जो समस्या का कारण बन रहा है। यदि 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 } } ] },