TechOverflow Logo
TechOverflow

How to fix Angular ERROR Unterminated $localize metadata block in ": "

Problem

When building your Angular application using ng build, ng serve , you see one or more instances of the following error message:

metadata.txt
 [ERROR] Unterminated $localize metadata block in ": ".

or the following error message for ng extract-i18n:

angular_stacktrace.txt
An unhandled exception occurred: /home/user/MyProject/chunk-ZPIUSWGS.js: Unterminated $localize metadata block in ": ".
See "/tmp/ng-Ek7tS1/angular-errors.log" for further details.
/home/user/MyProject/node_modules/rxjs/dist/cjs/internal/util/reportUnhandledError.js:13
      throw err;
      ^

Error: /home/user/MyProject/chunk-ZPIUSWGS.js: Unterminated $localize metadata block in ": ".
  at findEndOfBlock (file:///home/user/MyProject/node_modules/@angular/localize/fesm2022/localize.mjs:547:11)
  at splitBlock (file:///home/user/MyProject/node_modules/@angular/localize/fesm2022/localize.mjs:519:28)
  at parsePlaceholder (file:///home/user/MyProject/node_modules/@angular/localize/fesm2022/localize.mjs:485:42)
  at parseMessage (file:///home/user/MyProject/node_modules/@angular/localize/fesm2022/localize.mjs:389:100)
  at PluginPass.TaggedTemplateExpression (file:///home/user/MyProject/node_modules/@angular/localize/tools/bundles/chunk-URWRI34O.js:69:27)
  at newFn (/home/user/MyProject/node_modules/@babel/traverse/lib/visitors.js:172:14)
  at NodePath._call (/home/user/MyProject/node_modules/@babel/traverse/lib/path/context.js:49:20)
  at NodePath.call (/home/user/MyProject/node_modules/@babel/traverse/lib/path/context.js:39:18)
  at NodePath.visit (/home/user/MyProject/node_modules/@babel/traverse/lib/path/context.js:85:31)
  at TraversalContext.visitQueue (/home/user/MyProject/node_modules/@babel/traverse/lib/context.js:89:16)
  at TraversalContext.visitSingle (/home/user/MyProject/node_modules/@babel/traverse/lib/context.js:65:19)
  at TraversalContext.visit (/home/user/MyProject/node_modules/@babel/traverse/lib/context.js:112:19)
  at traverseNode (/home/user/MyProject/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
  [...]

Solution

This error occurs because you have a colon : in a $localize block that is not escaped. The colon : is a special character in $localize blocks and must be escaped with a backslash \.

For example.

localize_example.ts
$localize`Number of entries: ${entries.length}`

must be written as

localize_fixed.ts
$localize`Number of entries\: ${entries.length}`

In order to find such instances in your IDE, you can search for the following regex pattern:

find_localize_colon.regex
\$localize`[^`]*:

This will find all instances of $localize blocks that contain a colon :. You might need to skip a few false positives but this will often find the issue rather quickly.

See the $localize documentation for details on when you need to escale

Check out similar posts by category: Angular