chore: 🤖 upgrade to nx17

.gitignore

@@ -41,3 +41,5 @@ Thumbs.db
 
 # Cypress
 apps/transloco-playground-e2e/cypress/screenshots/*
+
+.nx/cache

.prettierignore

@@ -3,3 +3,5 @@
 /dist
 /coverage
 /docs/docs
+
+/.nx/cache

apps/transloco-playground-e2e/project.json

@@ -19,7 +19,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "lintFilePatterns": ["apps/transloco-playground-e2e/**/*.{js,ts}"]
       },

apps/transloco-playground/project.json

@@ -61,22 +61,22 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "transloco-playground:build:production"
+          "buildTarget": "transloco-playground:build:production"
         },
         "development": {
-          "browserTarget": "transloco-playground:build:development"
+          "buildTarget": "transloco-playground:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "transloco-playground:build"
+        "buildTarget": "transloco-playground:build"
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "lintFilePatterns": [
           "apps/transloco-playground/src/**/*.ts",

apps/transloco-playground/src/app/app.component.html

@@ -4,8 +4,10 @@
       class="navbar-brand"
       target="_blank"
       href="https://github.com/ngneat/transloco"
-    >
-      <img *ngIf="!isDocs" height="50px" src="/assets/images/logo.svg" />
+      >
+      @if (!isDocs) {
+        <img height="50px" src="/assets/images/logo.svg" />
+      }
     </a>
     <button
       class="navbar-toggler"
@@ -14,7 +16,7 @@
       aria-controls="navbarSupportedContent"
       aria-expanded="false"
       aria-label="Toggle navigation"
-    >
+      >
       <span class="navbar-toggler-icon"></span>
     </button>
   </div>
@@ -23,90 +25,92 @@
     id="navbarSupportedContent"
     style="padding-right: 180px"
     class="collapse navbar-collapse"
-  >
+    >
     <ul class="navbar-nav mr-auto">
       <li class="nav-item" routerLinkActive="active">
         <a
           class="nav-link"
           routerLink="home"
           data-bs-target="#navbarSupportedContent"
           >Home</a
-        >
-      </li>
-      <li class="nav-item" routerLinkActive="active">
-        <a
-          class="nav-link"
-          routerLink="lazy"
-          data-bs-target="#navbarSupportedContent"
-          >Lazy</a
-        >
-      </li>
-      <li class="nav-item" routerLinkActive="active">
-        <a
-          class="nav-link"
-          routerLink="scope-sharing"
-          data-bs-target="#navbarSupportedContent"
-          >Scope Sharing</a
-        >
-      </li>
-      <li class="nav-item" routerLinkActive="active">
-        <a
-          class="nav-link"
-          routerLink="inline-loaders"
-          data-bs-target="#navbarSupportedContent"
-          >Inline Loaders</a
-        >
-      </li>
-      <li class="nav-item" routerLinkActive="active">
-        <a
-          class="nav-link"
-          routerLink="dynamic-translation"
-          data-bs-target="#navbarSupportedContent"
-          >Dynamic Translation</a
-        >
-      </li>
-      <li class="nav-item" routerLinkActive="active">
-        <a
-          class="nav-link"
-          routerLink="multi-langs"
-          data-bs-target="#navbarSupportedContent"
-          >Multi Langs</a
-        >
-      </li>
-      <li class="nav-item" routerLinkActive="active">
-        <a
-          class="nav-link"
-          routerLink="transpilers"
-          data-bs-target="#navbarSupportedContent"
-          >Transpilers</a
-        >
-      </li>
-      <li class="nav-item" routerLinkActive="active">
-        <a
-          class="nav-link"
-          routerLink="locale"
-          data-bs-target="#navbarSupportedContent"
-          >Locale</a
-        >
-      </li>
-    </ul>
-  </div>
-
-  <div class="lang-btns">
-    <button
-      *ngFor="let lang of availableLangs; last as last"
-      class="btn my-2 my-sm-0"
-      [attr.data-cy]="lang.id"
-      (click)="changeLang(lang.id)"
-      [class.mr-10]="!last"
-      [class.btn-primary]="activeLang === lang.id"
-      [class.btn-secondary]="activeLang !== lang.id"
-    >
-      {{ lang.label }}
-    </button>
-  </div>
-</nav>
-
-<div class="container">
-  <router-outlet />
-</div>
+          >
+        </li>
+        <li class="nav-item" routerLinkActive="active">
+          <a
+            class="nav-link"
+            routerLink="lazy"
+            data-bs-target="#navbarSupportedContent"
+            >Lazy</a
+            >
+          </li>
+          <li class="nav-item" routerLinkActive="active">
+            <a
+              class="nav-link"
+              routerLink="scope-sharing"
+              data-bs-target="#navbarSupportedContent"
+              >Scope Sharing</a
+              >
+            </li>
+            <li class="nav-item" routerLinkActive="active">
+              <a
+                class="nav-link"
+                routerLink="inline-loaders"
+                data-bs-target="#navbarSupportedContent"
+                >Inline Loaders</a
+                >
+              </li>
+              <li class="nav-item" routerLinkActive="active">
+                <a
+                  class="nav-link"
+                  routerLink="dynamic-translation"
+                  data-bs-target="#navbarSupportedContent"
+                  >Dynamic Translation</a
+                  >
+                </li>
+                <li class="nav-item" routerLinkActive="active">
+                  <a
+                    class="nav-link"
+                    routerLink="multi-langs"
+                    data-bs-target="#navbarSupportedContent"
+                    >Multi Langs</a
+                    >
+                  </li>
+                  <li class="nav-item" routerLinkActive="active">
+                    <a
+                      class="nav-link"
+                      routerLink="transpilers"
+                      data-bs-target="#navbarSupportedContent"
+                      >Transpilers</a
+                      >
+                    </li>
+                    <li class="nav-item" routerLinkActive="active">
+                      <a
+                        class="nav-link"
+                        routerLink="locale"
+                        data-bs-target="#navbarSupportedContent"
+                        >Locale</a
+                        >
+                      </li>
+                    </ul>
+                  </div>
+
+                  <div class="lang-btns">
+                    @for (lang of availableLangs; track lang; let last = $last) {
+                      <button
+                        class="btn my-2 my-sm-0"
+                        [attr.data-cy]="lang.id"
+                        (click)="changeLang(lang.id)"
+                        [class.mr-10]="!last"
+                        [class.btn-primary]="activeLang === lang.id"
+                        [class.btn-secondary]="activeLang !== lang.id"
+                        >
+                        {{ lang.label }}
+                      </button>
+                    }
+                  </div>
+                </nav>
+
+                <div class="container">
+                  <router-outlet />
+                </div>
+

apps/transloco-playground/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import { Component, inject, OnDestroy } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { Subscription, take } from 'rxjs';
@@ -12,7 +12,7 @@ import { environment } from '../environments/environment';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   standalone: true,
-  imports: [CommonModule, RouterModule],
+  imports: [RouterModule],
 })
 export class AppComponent implements OnDestroy {
   isDocs = environment.isDocs;