How to Enable the New Control Flow or Defer Block in the Angular v17.0.0-next.6?

Angular By Madhu

Even though the new Angular control flows or the defer block changes are available on the release v17.0.0-next.6, you cannot directly use them now in your project and will end up with the below error.

error NG5002: Invalid ICU message. Missing ‘}’ 
or 
error NG5002: Unexpected character “EOF”
(Do you have an unescaped “{“ in your template?
Use “{{ ‘{‘ }}”) to escape it.)

To try a new control flow or the defer block now you have to add the below config in the angularCompileroptions.

{
  "angularCompilerOptions": {
    ....
    "_enabledBlockTypes": [
      "if", "switch", "for", "defer"
    ]
  }
}

_enabledBlockTypes is an internal one that will be changed eventually. But for now, it will allow you to play around with the control flows.

You can find the full working sample here.

Feel free to let me know if you have any comments.

Stackademic

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us on Twitter(X), LinkedIn, and YouTube.
• Visit Stackademic.com to find out more about how we are democratizing free programming education around the world.