bug with adding <div>{</div> to component html

[foxjazz]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

component page displays blank when a div tag has { in the text.

Expected behavior

component should display the html.

Minimal reproduction of the problem with instructions

github-repo

is a sample project. use ng serve to build project and run. change first.component.html to add

{

and notice that the page turns blank.

What is the motivation / use case for changing the behavior?

Being able to display { on the component page.

Environment

"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"

Angular version: X.Y.Z


Browser:
- [ x] Chrome (desktop) version XX
 
For Tooling issues:
- Node version: 8.9.4
- Platform:  windows

[trotyl]

Duplicate of #10227

[trotyl]

Also related to #11859

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}