Angular ng extract-i18n not extracting from all files

Question

I am currently building a web application and I am using Angular as a frontend framework with TS. I already built the site and am now focusing on internationalization, but everytime I run ng extract-i18n, I get a new file which contains all the components or texts tagged with i18n. But there is one file just not being considered and I do not know what I am doing wrong. I can probably guess that it is something quite easy, which I overlooked.

I tried running the ng extract-i18n command, which did extract nearly all components/files, except for one. Already tried clearing cache, re-installing node_modules, putting the component (which has the components that are not being extracted) into other components so they can be found during build, as otherwise they are only accessable through navigating to another page.

This is the file/component, which is not being considered by the command.

checkout.component.html:

<form
  [formGroup]="formGroup"
  class="bg-gray-100 flex flex-col md:flex-row md:items-start items-center justify-center gap-8 p-8"
  (submit)="submitForm($event)"
>
  <div class="flex flex-col bg-white p-6 rounded-lg shadow-lg w-full max-w-lg gap-6">
    <h2 i18n="@@selectedProduct" class="text-2xl font-semibold text-gray-800">
      Selected Product
    </h2>

    <!-- Product Card -->
    <app-product [product]="product" [checkout]="true" [alignLeft]="true"></app-product>

    <!-- Account Credentials -->
    <div class="flex flex-col bg-lightblue p-4 rounded-lg gap-4">
      <h3 i18n="@@accountCredentials" class="text-lg font-medium text-primaryblue">Your Account Credentials</h3>
      <input
        i18n-placeholder="@@emailPlaceholder"
        type="email"
        formControlName="email"
        placeholder="Email Address"
        class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
      <input
        i18n-placeholder="@@passwordPlaceholder"
        type="password"
        formControlName="password"
        placeholder="Password"
        class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
      <p i18n="@@accountCreationInfo" class="text-gray-700 text-sm">
        After completing the order, your account will be automatically created, which you can access using the email address and password provided.
      </p>
    </div>
  </div>
  <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-lg">
    <h2 i18n="@@checkout" class="text-2xl font-semibold text-gray-800 mb-4">Checkout</h2>

    <!-- Billing Information -->
    <div class="mb-6">
      <h3 i18n="@@billingInformation" class="text-lg font-medium text-gray-700 mb-2">Billing Information</h3>
      <div class="space-y-4">
        <input
          i18n-placeholder="@@companyPlaceholder"
          type="text"
          formControlName="company"
          placeholder="Company (optional)"
          class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <input
          i18n-placeholder="@@fullNamePlaceholder"
          type="text"
          formControlName="fullName"
          placeholder="Full Name"
          class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <input
          i18n-placeholder="@@emailPlaceholder"
          type="email"
          formControlName="email"
          placeholder="Email Address"
          class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <input
          i18n-placeholder="@@addressPlaceholder"
          type="text"
          formControlName="address"
          placeholder="Address"
          class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <div class="flex flex-row gap-4">
          <input
            i18n-placeholder="@@cityPlaceholder"
            type="text"
            formControlName="city"
            placeholder="City"
            class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <input
            i18n-placeholder="@@postalCodePlaceholder"
            type="text"
            formControlName="postalCode"
            placeholder="Postal Code"
            class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <input
          i18n-placeholder="@@countryPlaceholder"
          type="text"
          formControlName="country"
          placeholder="Country"
          class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>
    </div>

    <!-- Payment Method -->
    <div class="mb-6">
      <h3 i18n="@@paymentMethod" class="text-lg font-medium text-gray-700 mb-2">Payment Method</h3>
      <div class="flex items-center gap-4">
        <input
          type="radio"
          id="invoice"
          name="payment-method"
          value="invoice"
          class="focus:ring-2 focus:ring-blue-500"
          checked
        />
        <label i18n="@@invoiceOption" for="invoice" class="text-gray-600">Pay by Invoice</label>
      </div>
    </div>

    <!-- Order Summary -->
    <div class="mb-6">
      <h3 i18n="@@orderSummary" class="text-lg font-medium text-gray-700 mb-2">Order Summary</h3>
      <div class="flex justify-between">
        <span class="text-gray-600">
          {{ product.title }}
        </span>
        <span class="font-semibold text-primaryblue">
          {{ product.price / 100 }}€
        </span>
      </div>
      <div class="flex justify-between mt-2">
        <span class="text-gray-700 font-medium">VAT ({{ product.taxInPercent }}%){{product.taxInPercent === 0 ? '*' : ''}}</span>
        <span class="font-semibold text-primaryblue">
          {{ product.price * (product.taxInPercent / 100) / 100 }}€
        </span>
      </div>
      <div class="flex justify-between mt-4 border-t pt-2">
        <span class="text-gray-700 font-medium">Total</span>
        <span class="font-semibold text-primaryblue">
          {{ product.price / 100 + product.price * (product.taxInPercent / 100) / 100 }}€
        </span>
      </div>
    </div>

    <!-- Submit Button -->
    <button
      type="submit"
      style="{{
        loading
        ? 'cursor: not-allowed; pointer-events: none; background-color: #eef2ff;'
        : 'cursor: pointer;'
      }}"
      class="w-full h-12 bg-blue-600 text-lg text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
    >
      {{ !loading ? localizedSubmitString : '' }}

      <ng-lottie *ngIf="loading" [options]="options"></ng-lottie>
    </button>
    <p i18n="@@vatNotice" class="text-gray-600 text-sm mt-2">
      * According to applicable tax regulations, the invoice amount does not include VAT.
    </p>
  </div>
</form>

app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './features/home/home.component';
import { CheckoutComponent } from './features/checkout/checkout.component';
import { OrderConfirmedComponent } from './features/order-confirmed/order-confirmed.component';

export const routes: Routes = [
  { path: '', title: 'Shop - Company', component: HomeComponent },
  {
    path: 'checkout',
    title: 'Checkout - Company',
    component: CheckoutComponent,
  },
  {
    path: 'checkout/order-confirmed',
    title: 'Ihre Bestellung wurde bestätigt - Company',
    component: OrderConfirmedComponent,
  },
];

Generated messages.xlf file:

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="de" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="questions" datatype="html">
        <source>Fragen?</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/home/contact/contact.component.html</context>
          <context context-type="linenumber">4,5</context>
        </context-group>
      </trans-unit>
      <trans-unit id="contactDescription" datatype="html">
        <source>Dann nehmen Sie mit uns Kontakt auf!</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/home/contact/contact.component.html</context>
          <context context-type="linenumber">5,8</context>
        </context-group>
      </trans-unit>
      <trans-unit id="contactWithArrow" datatype="html">
        <source> Kontakt   → </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/home/contact/contact.component.html</context>
          <context context-type="linenumber">11,12</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ourPrices" datatype="html">
        <source>Unsere Preise</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/home/hero/hero.component.html</context>
          <context context-type="linenumber">4,6</context>
        </context-group>
      </trans-unit>
      <trans-unit id="productListVatInfo" datatype="html">
        <source>*Im Sinne der Kleinunternehmerregelung nach § 19 UStG enthält der ausgewiesene Betrag keine Umsatzsteuer.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/home/product-list/product-list.component.html</context>
          <context context-type="linenumber">5,7</context>
        </context-group>
      </trans-unit>
      <trans-unit id="productComponentCheckoutButton" datatype="html">
        <source> Zum Checkout </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/home/product/product.component.html</context>
          <context context-type="linenumber">16,19</context>
        </context-group>
      </trans-unit>
      <trans-unit id="orderConfirmedTitle" datatype="html">
        <source>Vielen Dank für Ihre Bestellung!</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/features/order-confirmed/order-confirmed.component.html</context>
          <context context-type="linenumber">4,5</context>
        </context-group>
      </trans-unit>
      <trans-unit id="orderConfirmedMessage" datatype="html">
        <source>Ihre Bestellung wurde erfolgreich entgegengenommen und wird in Kürze bearbeitet.<x id="LINE_BREAK" ctype="lb" equiv-text="&lt;br/&gt;"/>Sie erhalten in Kürze eine Bestätigung per E-Mail. Ihre Rechnung wird ebenfalls in Kürze per E-Mail versendet.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/features/order-confirmed/order-confirmed.component.html</context>
          <context context-type="linenumber">5,6</context>
        </context-group>
      </trans-unit>
      <trans-unit id="companyFooterDescription" datatype="html">
        <source> Company ermöglicht die tiefgehende Überprüfung von mobilen Anwendungen auf Sicherheitslücken und Datenschutzverletzungen. </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/layout/footer/footer.component.html</context>
          <context context-type="linenumber">12,15</context>
        </context-group>
      </trans-unit>
      <trans-unit id="startPage" datatype="html">
        <source> Startseite </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/layout/footer/footer.component.html</context>
          <context context-type="linenumber">19,20</context>
        </context-group>
      </trans-unit>
      <trans-unit id="aboutUs" datatype="html">
        <source> Über uns </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/layout/footer/footer.component.html</context>
          <context context-type="linenumber">22,23</context>
        </context-group>
      </trans-unit>
      <trans-unit id="contact" datatype="html">
        <source> Kontakt </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/layout/footer/footer.component.html</context>
          <context context-type="linenumber">25,26</context>
        </context-group>
      </trans-unit>
      <trans-unit id="publications" datatype="html">
        <source> Publikationen </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/layout/footer/footer.component.html</context>
          <context context-type="linenumber">28,30</context>
        </context-group>
      </trans-unit>
      <trans-unit id="imprint" datatype="html">
        <source> Impressum </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/layout/footer/footer.component.html</context>
          <context context-type="linenumber">35,36</context>
        </context-group>
      </trans-unit>
      <trans-unit id="privacyPolicy" datatype="html">
        <source> Datenschutz </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/layout/footer/footer.component.html</context>
          <context context-type="linenumber">38,40</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>