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:

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

or the following error message for ng extract-i18n:

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`Number of entries: ${entries.length}`

must be written as

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

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

\$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