Render jupyter notebook html file in Angular project

Question

I have created a new angular(angular 8) project. Also I have one jupyter notebook file(let's say python_practice.ipynb), I have downloaded python_practice.ipynb as html file so it is not python_practice.html Inside the component.html I had pasted the content of python_practice.html to render the contents. But I am getting syntax errors in the browser console and content is not rendering.

Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("


</html>
[ERROR ->]"): ng:///AppModule/ToolsComponent.html@18132:0
Invalid ICU message. Missing '}'. ("n class="o">=</span> <span class="p">[</span><span class="s1">&#39;col1&#39;</span><span class="p">,[ERROR ->]</span> <span class="s1">&#39;col2&#39;</span><span class="p">]</span>
<span class="n">data</span> <s"): ng:///AppModule/ToolsComponent.html@12695:132
Invalid ICU message. Missing '}'. ("39;Gender&#39;</span><span class="p">:</span><span class="s1">&#39;Male&#39;</span><span class="p">,[ERROR ->]</span><span class="s1">&#39;Address&#39;</span><span class="p">:</span><span class="s1">&#39;Hyderab"): ng:///AppModule/ToolsComponent.html@12788:378
Invalid ICU message. Missing '}'. ("39;Gender&#39;</span><span class="p">:</span><span class="s1">&#39;Male&#39;</span><span class="p">,[ERROR ->]</span><span class="s1">&#39;Address&#39;</span><span class="p">:</span><span class="s1">&#39;Hyderab"): ng:///AppModule/ToolsComponent.html@12854:378
Invalid ICU message. Missing '}'. ("39;Gender&#39;```

Moreover, inside my terminal I am getting errors like this :- 

"Invalid ICU message. Missing '}'.",
"Unexpected closing tag \"h1\". 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",
```

But when I open python_practice.html file independently, it renders the page correctly. What am I missing? Can't I use html+css+javascript syntax inside angular? What are the possible solutions to deal with this? Let me know if you need further information. Thanks.

Edit :- python_practice.html file can be found here https://github.com/giteshjha/SharedFiles/blob/master/python_practice.html

Answer 1

Angular is expecting another curly brace at some lines in ur HTML, line 12789 has a single brace { , so u need to escape it to avoid this error,

try this answer : Answer