पोस्ट
Angular में 'Template parse errors;' के लिए समाधान
30 अक्टूबर 2017 • 2 मिनट पढ़ना

यह Angular 2/4/+ के साथ सबसे निराशाजनक मुद्दों में से एक था। यह Angular 2/4/+ के साथ कोई समस्या नहीं है, बल्कि webpack के द्वारा सहायक HTML फाइलों को bundle करने के तरीके की समस्या है।
यह समस्या तब होती है जब आप webpack को production flag (webpack -p)
के साथ चलाते हैं। compilation पूरी हो जाती है, लेकिन साइट चलाने पर runtime error आती है: 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 validators से चेक किया, और HTML हमेशा valid HTML के रूप में आया। कुछ हफ्तों तक अपना सिर पीटने और कहीं नहीं पहुंचने के बाद, मुझे लगा कि इस समस्या का कोई समाधान होना चाहिए।
जो मैंने खोजा, एक GitHub thread के माध्यम से (खुशी है कि मैंने इसका link खो दिया) यह था कि HTML loader का HTML को minimize करने की कोशिश ही समस्या का कारण है। यदि HTML minimization को बंद कर दिया जाए, तो यह समस्या दूर हो जाती है। निष्पक्ष रूप से कहें तो, इस error वाले अधिकांश लोगों के पास invalid HTML था। मैं आपको प्रोत्साहित करता हूं कि इस समस्या का समाधान करने से पहले अपने HTML को check करें, हो सकता है आप केवल समस्या को आगे बढ़ा रहे हों।
HTML minimization को बंद करना webpack.config.js में अपने HTML-loader को update करने जितना आसान है।
पहले:
{
test: /.html$/,
loader: 'html-loader'
},
बाद में:
{ test: /.html$/, use: [ { loader: ‘html-loader’, options: { minimize: false, removeComments: false, collapseWhitespace: false, removeAttributeQuotes: false } } ] },
लेखक: चक कॉनवे सॉफ्टवेयर इंजीनियरिंग और जेनेरेटिव AI में विशेषज्ञता रखते हैं। उनसे सोशल मीडिया पर जुड़ें: X (@chuckconway) या उन्हें YouTube पर देखें।