Angular localize: is source message text required?

I have in my .html file something like

    <mat-form-field>
        <mat-label i18n="@@title">Title</mat-label>
        <input matInput formControlName="title" required />
    </mat-form-field>

At some other place in the code I need to localize e.g. title. According to the Angular documentation I could do something like

const translated=$localize`:@@title:Title`;

My question: Is

const translated=$localize`:@@title:`;

as well valid to use the same string? And if so where is it documented? Or should I specify the source message text anyway? But if I specify it anyway - which one is taken? The one from the .html file or from the *.ts?

Since the text works without specification I want to be on the safe side - just in case I missed some small prints. I didn't find any documents.

Solution 1:

Here is the documentation of what happens. Though not tested I'm pretty sure that it doesn't matter whether the string comes from an HTML file or ts file. It says that the first string is taken, so whichever file is processed first would be my guess. Therefore I would suggest not doing this unless you can guarantee that the first file is always processed first. In general, I don't like this approach since Angular will automatically merge two equal strings into one translation unit.