在 Angular 中开发，经常会遇到一些错误提示，其中之一就是 PARSE ERROR，提示 Inline template，Component template 必须在 Angular 中解决。这个错误表示 Angular 解析模板时遇到了问题，可能是因为模板中包含了无法识别的语法。本文将详细介绍解决这个错误的方法。
错误示例
在下面的组件中，有一个内联模板（inline template）：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ------------
--------- -
-------- -------------
-
--
------ ----- -------------- -
---- - --------
-运行这个组件时会出现一个 PARSE ERROR，提示 Inline template，Component template 必须在 Angular 中解决。这时候可以将内联模板转换为组件模板（component template）。
解决方法
要解决这个问题，需要将内联模板转换为组件模板。组件模板是一个单独的 HTML 文件，可以在其中使用 Angular 的模板语法。
首先，创建一个新的组件模板文件：
<!-- app-hello.component.html -->
<p>Hello {{name}}!</p>然后将组件中的模板代码替换为组件模板文件中的代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ------------ ------------ ---------------------------- -- ------ ----- -------------- - ---- - -------- -
这里使用了 templateUrl 属性来指定组件模板文件的路径。这个属性可以是任何有效的 URL。通常情况下，组件模板文件被保存在与组件文件相同的目录中，命名为 <component-name>.component.html。
现在，运行这个组件时就不会再出现 PARSE ERROR 的提示了。
总结
当 Angular 解析模板时遇到 PARSE ERROR，提示 Inline template，Component template 必须在 Angular 中解决，说明模板中包含无法识别的语法。要解决这个问题，需要将内联模板转换为组件模板。
首先，创建一个单独的组件模板文件，其中包含 Angular 模板语法。然后，在组件中使用 templateUrl 属性来指定组件模板文件的路径。
实际开发中，尽可能避免使用内联模板，以便更好地利用 Angular 的优势。使用组件模板可以使代码更易于维护和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd24db95b1f8cacdcbf5a9