diff --git a/packages/igx-templates/igx-ts-legacy/accordion/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts-legacy/accordion/default/files/src/app/__path__/__filePrefix__.spec.ts
index 5322bc3a6..75be24e21 100644
--- a/packages/igx-templates/igx-ts-legacy/accordion/default/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts-legacy/accordion/default/files/src/app/__path__/__filePrefix__.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 import { IgxAccordionModule, IgxSwitchModule } from '<%=igxPackage%>';
@@ -10,7 +11,7 @@ describe('<%=ClassName%>', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],
-      imports: [ NoopAnimationsModule, IgxAccordionModule, IgxSwitchModule ]
+      imports: [ NoopAnimationsModule, IgxAccordionModule, IgxSwitchModule, FormsModule ]
     })
       .compileComponents();
   });
diff --git a/packages/igx-templates/igx-ts-legacy/bullet-graph/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts-legacy/bullet-graph/default/files/src/app/__path__/__filePrefix__.spec.ts
index 90003e96c..a37800f08 100644
--- a/packages/igx-templates/igx-ts-legacy/bullet-graph/default/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts-legacy/bullet-graph/default/files/src/app/__path__/__filePrefix__.spec.ts
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxBulletGraphModule } from 'igniteui-angular-gauges';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
@@ -10,7 +9,7 @@ describe('<%=ClassName%>', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],
-      imports: [IgxBulletGraphModule, NoopAnimationsModule]
+      imports: [IgxBulletGraphModule]
     })
       .compileComponents();
   });
diff --git a/packages/igx-templates/igx-ts-legacy/chip/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts-legacy/chip/default/files/src/app/__path__/__filePrefix__.spec.ts
index 3bd099007..53c23c13a 100644
--- a/packages/igx-templates/igx-ts-legacy/chip/default/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts-legacy/chip/default/files/src/app/__path__/__filePrefix__.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxChipsModule } from '<%=igxPackage%>';
+import { IgxChipsModule, IgxDropDownModule } from '<%=igxPackage%>';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
 describe('<%=ClassName%>', () => {
@@ -10,7 +10,7 @@ describe('<%=ClassName%>', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],
-      imports: [NoopAnimationsModule, IgxChipsModule]
+      imports: [NoopAnimationsModule, IgxChipsModule, IgxDropDownModule]
     })
       .compileComponents();
   });
diff --git a/packages/igx-templates/igx-ts-legacy/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts-legacy/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.spec.ts
index 67a09ce21..5af608d11 100644
--- a/packages/igx-templates/igx-ts-legacy/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts-legacy/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { <%=ClassName%> } from './<%=filePrefix%>';
-import { IgxGridModule, IgxButtonModule, IgxSwitchModule, IgxSliderModule, IgxCheckboxModule, IgxDialogModule } from '<%=igxPackage%>';
+import { IgxGridModule, IgxButtonModule, IgxSwitchModule, IgxSliderModule, IgxCheckboxModule, IgxDialogModule, IgxIconComponent, IgxButtonGroupComponent, IgxFocusModule } from '<%=igxPackage%>';
 import { IgxCategoryChartModule } from 'igniteui-angular-charts';
 
 describe('<%=ClassName%>', () => {
@@ -14,7 +14,9 @@ describe('<%=ClassName%>', () => {
       declarations: [ <%=ClassName%> ],
       imports: [ FormsModule, BrowserAnimationsModule,
         IgxGridModule, IgxDialogModule, IgxCategoryChartModule,
-        IgxButtonModule, IgxSwitchModule, IgxSliderModule, IgxCheckboxModule ]
+        IgxButtonModule, IgxSwitchModule, IgxSliderModule, IgxCheckboxModule,
+        IgxButtonGroupComponent, IgxIconComponent, IgxFocusModule ],
+      teardown: { destroyAfterEach: false }
     })
     .compileComponents();
   });
diff --git a/packages/igx-templates/igx-ts-legacy/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts-legacy/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.spec.ts
index 316d67e6d..b80a2d5b8 100644
--- a/packages/igx-templates/igx-ts-legacy/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts-legacy/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.spec.ts
@@ -3,7 +3,7 @@ import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 import { <%=ClassName%>TreeGridGroupingPipe } from './tree-grid-grouping.pipe';
-import { IgxTreeGridModule, IgxCheckboxModule, IgxButtonModule, IgxSliderModule, IgxSwitchModule } from '<%=igxPackage%>';
+import { IgxTreeGridModule, IgxCheckboxModule, IgxButtonModule, IgxSliderModule, IgxSwitchModule, IgxButtonGroupComponent, IgxIconComponent } from '<%=igxPackage%>';
 
 describe('<%=ClassName%>', () => {
   let component: <%=ClassName%>;
@@ -19,7 +19,9 @@ describe('<%=ClassName%>', () => {
         IgxCheckboxModule,
         IgxButtonModule,
         IgxSliderModule,
-        IgxSwitchModule]
+        IgxSwitchModule,
+        IgxButtonGroupComponent,
+        IgxIconComponent]
     })
       .compileComponents();
   });
diff --git a/packages/igx-templates/igx-ts-legacy/grid/grid-summaries/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts-legacy/grid/grid-summaries/files/src/app/__path__/__filePrefix__.spec.ts
index 16b8fb7f6..971b14e85 100644
--- a/packages/igx-templates/igx-ts-legacy/grid/grid-summaries/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts-legacy/grid/grid-summaries/files/src/app/__path__/__filePrefix__.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxGridModule } from '<%=igxPackage%>';
+import { IgxGridModule, IgxIconModule } from '<%=igxPackage%>';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
 describe('<%=ClassName%>', () => {
@@ -10,7 +11,7 @@ describe('<%=ClassName%>', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],
-      imports: [NoopAnimationsModule, IgxGridModule]
+      imports: [NoopAnimationsModule, IgxGridModule, FormsModule, IgxIconModule]
     }).compileComponents();
   });
 
diff --git a/packages/igx-templates/igx-ts-legacy/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts-legacy/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.spec.ts
index b0e3694f1..041785b49 100644
--- a/packages/igx-templates/igx-ts-legacy/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts-legacy/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
-  IgxGridModule, IgxDatePickerModule, IgxCheckboxModule, IgxDialogModule, IgxHierarchicalGridModule
+  IgxGridModule, IgxDatePickerModule, IgxCheckboxModule, IgxDialogModule, IgxHierarchicalGridModule, IgxInputGroupModule
 } from '<%=igxPackage%>';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
@@ -20,7 +20,8 @@ describe('<%=ClassName%>', () => {
         IgxHierarchicalGridModule,
         IgxDatePickerModule,
         IgxCheckboxModule,
-        IgxDialogModule
+        IgxDialogModule,
+        IgxInputGroupModule
       ]
     })
     .compileComponents();
diff --git a/packages/igx-templates/igx-ts-legacy/linear-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts-legacy/linear-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts
index 020b7194c..6a50207d4 100644
--- a/packages/igx-templates/igx-ts-legacy/linear-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts-legacy/linear-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
@@ -10,7 +9,7 @@ describe('<%=ClassName%>', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],
-      imports: [IgxLinearGaugeModule, NoopAnimationsModule]
+      imports: [IgxLinearGaugeModule]
     })
       .compileComponents();
   });
diff --git a/packages/igx-templates/igx-ts-legacy/projects/_base/files/__dot__azure/azure-pipelines.yml b/packages/igx-templates/igx-ts-legacy/projects/_base/files/__dot__azure/azure-pipelines.yml
index cbe9f7b51..85b8b3492 100644
--- a/packages/igx-templates/igx-ts-legacy/projects/_base/files/__dot__azure/azure-pipelines.yml
+++ b/packages/igx-templates/igx-ts-legacy/projects/_base/files/__dot__azure/azure-pipelines.yml
@@ -19,5 +19,9 @@ steps:
     continueOnError: true
   - script: npm run build
     displayName: 'Build the project'
-  - script: npm run test -- --watch=false --browsers ChromeHeadless
+  - script: npx playwright install chromium-headless-shell
+    displayName: 'Install Playwright browsers'
+  - script: npm run test -- --watch=false
     displayName: 'Run tests'
+    env:
+      CI: 'true'
diff --git a/packages/igx-templates/igx-ts-legacy/projects/_base/files/__dot__github/workflows/node.js.yml b/packages/igx-templates/igx-ts-legacy/projects/_base/files/__dot__github/workflows/node.js.yml
index 5da123b0a..c302af5bc 100644
--- a/packages/igx-templates/igx-ts-legacy/projects/_base/files/__dot__github/workflows/node.js.yml
+++ b/packages/igx-templates/igx-ts-legacy/projects/_base/files/__dot__github/workflows/node.js.yml
@@ -32,4 +32,8 @@ jobs:
     - run: npm i # replace with 'npm ci' after committing lock file from first install
     - run: npm run lint
     - run: npm run build
-    - run: npm run test -- --watch=false --browsers ChromeHeadless
+    - name: Install Playwright browsers
+      run: npx playwright install chromium-headless-shell
+    - run: npm run test -- --watch=false
+      env:
+        CI: 'true'
diff --git a/packages/igx-templates/igx-ts-legacy/projects/_base/files/angular.json b/packages/igx-templates/igx-ts-legacy/projects/_base/files/angular.json
index 8e96f22e6..467da513c 100644
--- a/packages/igx-templates/igx-ts-legacy/projects/_base/files/angular.json
+++ b/packages/igx-templates/igx-ts-legacy/projects/_base/files/angular.json
@@ -38,10 +38,7 @@
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "src/styles.scss"<%=DefaultTheme%>
             ],
@@ -100,22 +97,9 @@
           }
         },
         "test": {
-          "builder": "@angular/build:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": ["src/styles.scss"],
-            "stylePreprocessorOptions": {
-              "includePaths": ["node_modules"]
-            }
+            "runnerConfig": true
           }
         },
         "lint": {
diff --git a/packages/igx-templates/igx-ts-legacy/projects/_base/files/package.json b/packages/igx-templates/igx-ts-legacy/projects/_base/files/package.json
index 6f5291e00..212da2066 100644
--- a/packages/igx-templates/igx-ts-legacy/projects/_base/files/package.json
+++ b/packages/igx-templates/igx-ts-legacy/projects/_base/files/package.json
@@ -6,7 +6,7 @@
     "start": "ng serve -o",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng test",
+    "test": "ng test --browsers=chromium",
     "lint": "ng lint"
   },
   "private": true,
@@ -31,18 +31,14 @@
     "@angular/cli": "~21.2.1",
     "@angular/compiler-cli": "~21.2.0",
     "@eslint/js": "^10.0.1",
-    "@types/jasmine": "~5.1.4",
+    "@vitest/browser-playwright": "^4.1.0",
     "angular-eslint": "~21.3.0",
     "eslint": "^10.0.2",
     "igniteui-cli": "~<%=cliVersion%>",
-    "jasmine-core": "~5.12.1",
-    "karma": "~6.4.4",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.1",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
+    "playwright": "^1.58.2",
     "prettier": "^3.8.1",
     "typescript": "~5.9.3",
-    "typescript-eslint": "8.56.1"
+    "typescript-eslint": "8.56.1",
+    "vitest": "^4.1.0"
   }
 }
diff --git a/packages/igx-templates/igx-ts-legacy/projects/_base/files/src/environments/environment.development.ts b/packages/igx-templates/igx-ts-legacy/projects/_base/files/src/environments/environment.development.ts
index f274e5edf..ffe8aed76 100644
--- a/packages/igx-templates/igx-ts-legacy/projects/_base/files/src/environments/environment.development.ts
+++ b/packages/igx-templates/igx-ts-legacy/projects/_base/files/src/environments/environment.development.ts
@@ -1 +1,3 @@
-export const environment = {};
+export const environment = {
+  production: false
+};
diff --git a/packages/igx-templates/igx-ts-legacy/projects/_base/files/src/environments/environment.ts b/packages/igx-templates/igx-ts-legacy/projects/_base/files/src/environments/environment.ts
index f274e5edf..3612073bc 100644
--- a/packages/igx-templates/igx-ts-legacy/projects/_base/files/src/environments/environment.ts
+++ b/packages/igx-templates/igx-ts-legacy/projects/_base/files/src/environments/environment.ts
@@ -1 +1,3 @@
-export const environment = {};
+export const environment = {
+  production: true
+};
diff --git a/packages/igx-templates/igx-ts-legacy/projects/_base/files/tsconfig.app.json b/packages/igx-templates/igx-ts-legacy/projects/_base/files/tsconfig.app.json
index 9d6d6c35a..264f459bf 100644
--- a/packages/igx-templates/igx-ts-legacy/projects/_base/files/tsconfig.app.json
+++ b/packages/igx-templates/igx-ts-legacy/projects/_base/files/tsconfig.app.json
@@ -6,11 +6,8 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
-    "src/main.ts"
-  ],
   "include": [
-    "src/**/*.d.ts"
+    "src/**/*.ts"
   ],
   "exclude": [
     "src/**/*.spec.ts"
diff --git a/packages/igx-templates/igx-ts-legacy/projects/_base/files/tsconfig.spec.json b/packages/igx-templates/igx-ts-legacy/projects/_base/files/tsconfig.spec.json
index 5fb748d92..46287758e 100644
--- a/packages/igx-templates/igx-ts-legacy/projects/_base/files/tsconfig.spec.json
+++ b/packages/igx-templates/igx-ts-legacy/projects/_base/files/tsconfig.spec.json
@@ -5,11 +5,11 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "vitest/globals"
     ]
   },
   "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
+    "src/**/*.d.ts",
+    "src/**/*.ts"
   ]
 }
diff --git a/packages/igx-templates/igx-ts-legacy/projects/_base/files/vitest-base.config.ts b/packages/igx-templates/igx-ts-legacy/projects/_base/files/vitest-base.config.ts
new file mode 100644
index 000000000..5cd5972d1
--- /dev/null
+++ b/packages/igx-templates/igx-ts-legacy/projects/_base/files/vitest-base.config.ts
@@ -0,0 +1,11 @@
+// Learn more about Vitest configuration options at https://vitest.dev/config/
+
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  resolve: {
+    alias: [
+      { find: /^fflate$/, replacement: 'fflate/browser' }
+    ]
+  }
+});
diff --git a/packages/igx-templates/igx-ts-legacy/projects/side-nav-auth/files/package.json b/packages/igx-templates/igx-ts-legacy/projects/side-nav-auth/files/package.json
index c7dc60980..bbef3f6e6 100644
--- a/packages/igx-templates/igx-ts-legacy/projects/side-nav-auth/files/package.json
+++ b/packages/igx-templates/igx-ts-legacy/projects/side-nav-auth/files/package.json
@@ -6,7 +6,7 @@
     "start": "ng serve -o",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng test",
+    "test": "ng test --browsers=chromium",
     "lint": "ng lint"
   },
   "private": true,
@@ -35,18 +35,14 @@
     "@eslint/js": "^10.0.1",
     "@types/facebook-js-sdk": "~3.3.6",
     "@types/hammerjs": "~2.0.46",
-    "@types/jasmine": "~5.1.4",
+    "@vitest/browser-playwright": "^4.1.0",
     "angular-eslint": "~21.3.0",
     "eslint": "^10.0.2",
     "igniteui-cli": "~<%=cliVersion%>",
-    "jasmine-core": "~5.12.1",
-    "karma": "~6.4.4",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.1",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
+    "playwright": "^1.58.2",
     "prettier": "^3.8.1",
     "typescript": "~5.9.3",
-    "typescript-eslint": "8.56.1"
+    "typescript-eslint": "8.56.1",
+    "vitest": "^4.1.0"
   }
 }
diff --git a/packages/igx-templates/igx-ts-legacy/projects/side-nav-auth/files/tsconfig.app.json b/packages/igx-templates/igx-ts-legacy/projects/side-nav-auth/files/tsconfig.app.json
index 8fea7d1ab..ad37925ce 100644
--- a/packages/igx-templates/igx-ts-legacy/projects/side-nav-auth/files/tsconfig.app.json
+++ b/packages/igx-templates/igx-ts-legacy/projects/side-nav-auth/files/tsconfig.app.json
@@ -12,11 +12,8 @@
       "facebook-js-sdk"
     ]
   },
-  "files": [
-    "src/main.ts"
-  ],
   "include": [
-    "src/**/*.d.ts"
+    "src/**/*.ts"
   ],
   "exclude": [
     "src/**/*.spec.ts"
diff --git a/packages/igx-templates/igx-ts-legacy/projects/side-nav-auth/files/tsconfig.spec.json b/packages/igx-templates/igx-ts-legacy/projects/side-nav-auth/files/tsconfig.spec.json
index 5404eb933..aa670385d 100644
--- a/packages/igx-templates/igx-ts-legacy/projects/side-nav-auth/files/tsconfig.spec.json
+++ b/packages/igx-templates/igx-ts-legacy/projects/side-nav-auth/files/tsconfig.spec.json
@@ -5,14 +5,14 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine",
+      "vitest/globals",
       "node",
       "facebook-js-sdk"
     ],
-    "module": "commonjs"
+    "module": "esnext"
   },
   "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
+    "src/**/*.d.ts",
+    "src/**/*.ts"
   ]
 }
diff --git a/packages/igx-templates/igx-ts-legacy/radial-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts-legacy/radial-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts
index 1110e196a..1fa1c034c 100644
--- a/packages/igx-templates/igx-ts-legacy/radial-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts-legacy/radial-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxRadialGaugeModule } from 'igniteui-angular-gauges';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
@@ -10,7 +9,7 @@ describe('<%=ClassName%>', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],
-      imports: [IgxRadialGaugeModule, NoopAnimationsModule]
+      imports: [IgxRadialGaugeModule]
     })
       .compileComponents();
   });
diff --git a/packages/igx-templates/igx-ts-legacy/tree/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts-legacy/tree/default/files/src/app/__path__/__filePrefix__.spec.ts
index cb8e4b63d..8f49223cf 100644
--- a/packages/igx-templates/igx-ts-legacy/tree/default/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts-legacy/tree/default/files/src/app/__path__/__filePrefix__.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxComboModule, IgxTooltipModule } from '<%=igxPackage%>';
+import { IgxComboModule, IgxIconComponent, IgxTooltipModule, IgxTreeComponent, IgxTreeNodeComponent } from '<%=igxPackage%>';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
 describe('<%=ClassName%>', () => {
@@ -10,7 +10,7 @@ describe('<%=ClassName%>', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],
-      imports: [IgxComboModule, NoopAnimationsModule, IgxTooltipModule]
+      imports: [IgxComboModule, NoopAnimationsModule, IgxTooltipModule, IgxIconComponent, IgxTreeComponent, IgxTreeNodeComponent]
     })
       .compileComponents();
   });
diff --git a/packages/igx-templates/igx-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.spec.ts
index 8e2decb6d..dc4e5e04f 100644
--- a/packages/igx-templates/igx-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.spec.ts
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxBulletGraphModule } from 'igniteui-angular-gauges';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
@@ -9,7 +8,7 @@ describe('<%=ClassName%>', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [IgxBulletGraphModule, NoopAnimationsModule, <%=ClassName%>]
+      imports: [IgxBulletGraphModule, <%=ClassName%>]
     })
       .compileComponents();
   });
diff --git a/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.spec.ts
index 891d14355..0abee5fa1 100644
--- a/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.spec.ts
@@ -22,7 +22,8 @@ describe('<%=ClassName%>', () => {
 		  IgxSliderModule,
 		  IgxCheckboxModule,
 		  <%=ClassName%>,
-		]
+		],
+    teardown: { destroyAfterEach: false }
     })
     .compileComponents();
   });
diff --git a/packages/igx-templates/igx-ts/custom-templates/login/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/custom-templates/login/files/src/app/__path__/__filePrefix__.spec.ts
index 7d33c6eab..26140fdc9 100644
--- a/packages/igx-templates/igx-ts/custom-templates/login/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts/custom-templates/login/files/src/app/__path__/__filePrefix__.spec.ts
@@ -27,12 +27,7 @@ describe('<%=ClassName%>', () => {
         IgxIconModule,
         IgxRippleModule,
         <%=ClassName%>,
-      ],
-      providers: [
-        { provide: ExternalAuthService, useValue: extAuthSpy },
-        { provide: AuthenticationService, useValue: authSpy },
-        { provide: UserService, useValue: userServSpy },
-      ],
+      ]
     })
       .compileComponents();
   });
diff --git a/packages/igx-templates/igx-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts
index b7e8031af..d2ff03098 100644
--- a/packages/igx-templates/igx-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
@@ -9,7 +8,7 @@ describe('<%=ClassName%>', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [IgxLinearGaugeModule, NoopAnimationsModule, <%=ClassName%>]
+      imports: [IgxLinearGaugeModule, <%=ClassName%>]
     })
       .compileComponents();
   });
diff --git a/packages/igx-templates/igx-ts/projects/_base/files/__dot__azure/azure-pipelines.yml b/packages/igx-templates/igx-ts/projects/_base/files/__dot__azure/azure-pipelines.yml
index cbe9f7b51..85b8b3492 100644
--- a/packages/igx-templates/igx-ts/projects/_base/files/__dot__azure/azure-pipelines.yml
+++ b/packages/igx-templates/igx-ts/projects/_base/files/__dot__azure/azure-pipelines.yml
@@ -19,5 +19,9 @@ steps:
     continueOnError: true
   - script: npm run build
     displayName: 'Build the project'
-  - script: npm run test -- --watch=false --browsers ChromeHeadless
+  - script: npx playwright install chromium-headless-shell
+    displayName: 'Install Playwright browsers'
+  - script: npm run test -- --watch=false
     displayName: 'Run tests'
+    env:
+      CI: 'true'
diff --git a/packages/igx-templates/igx-ts/projects/_base/files/__dot__github/workflows/node.js.yml b/packages/igx-templates/igx-ts/projects/_base/files/__dot__github/workflows/node.js.yml
index 5da123b0a..c302af5bc 100644
--- a/packages/igx-templates/igx-ts/projects/_base/files/__dot__github/workflows/node.js.yml
+++ b/packages/igx-templates/igx-ts/projects/_base/files/__dot__github/workflows/node.js.yml
@@ -32,4 +32,8 @@ jobs:
     - run: npm i # replace with 'npm ci' after committing lock file from first install
     - run: npm run lint
     - run: npm run build
-    - run: npm run test -- --watch=false --browsers ChromeHeadless
+    - name: Install Playwright browsers
+      run: npx playwright install chromium-headless-shell
+    - run: npm run test -- --watch=false
+      env:
+        CI: 'true'
diff --git a/packages/igx-templates/igx-ts/projects/_base/files/angular.json b/packages/igx-templates/igx-ts/projects/_base/files/angular.json
index b1f5d6cec..a986e232e 100644
--- a/packages/igx-templates/igx-ts/projects/_base/files/angular.json
+++ b/packages/igx-templates/igx-ts/projects/_base/files/angular.json
@@ -27,10 +27,7 @@
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "src/styles.scss"<%=DefaultTheme%>
             ],
@@ -88,22 +85,9 @@
           }
         },
         "test": {
-          "builder": "@angular/build:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": ["src/styles.scss"],
-            "stylePreprocessorOptions": {
-              "includePaths": ["node_modules"]
-            }
+            "runnerConfig": true
           }
         },
         "lint": {
diff --git a/packages/igx-templates/igx-ts/projects/_base/files/package.json b/packages/igx-templates/igx-ts/projects/_base/files/package.json
index 6f1181253..60c0f207b 100644
--- a/packages/igx-templates/igx-ts/projects/_base/files/package.json
+++ b/packages/igx-templates/igx-ts/projects/_base/files/package.json
@@ -6,7 +6,7 @@
     "start": "ng serve -o",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng test",
+    "test": "ng test --browsers=chromium",
     "lint": "ng lint"
   },
   "private": true,
@@ -31,18 +31,14 @@
     "@angular/cli": "~21.2.1",
     "@angular/compiler-cli": "~21.2.0",
     "@eslint/js": "^10.0.1",
-    "@types/jasmine": "~5.1.4",
+    "@vitest/browser-playwright": "^4.1.0",
     "angular-eslint": "~21.3.0",
     "eslint": "^10.0.2",
     "igniteui-cli": "~<%=cliVersion%>",
-    "jasmine-core": "~5.12.1",
-    "karma": "~6.4.4",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.1",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
+    "playwright": "^1.58.2",
     "prettier": "^3.8.1",
     "typescript": "~5.9.2",
-    "typescript-eslint": "8.56.1"
+    "typescript-eslint": "8.56.1",
+    "vitest": "^4.1.0"
   }
 }
diff --git a/packages/igx-templates/igx-ts/projects/_base/files/src/environments/environment.development.ts b/packages/igx-templates/igx-ts/projects/_base/files/src/environments/environment.development.ts
index f274e5edf..ffe8aed76 100644
--- a/packages/igx-templates/igx-ts/projects/_base/files/src/environments/environment.development.ts
+++ b/packages/igx-templates/igx-ts/projects/_base/files/src/environments/environment.development.ts
@@ -1 +1,3 @@
-export const environment = {};
+export const environment = {
+  production: false
+};
diff --git a/packages/igx-templates/igx-ts/projects/_base/files/src/environments/environment.ts b/packages/igx-templates/igx-ts/projects/_base/files/src/environments/environment.ts
index f274e5edf..3612073bc 100644
--- a/packages/igx-templates/igx-ts/projects/_base/files/src/environments/environment.ts
+++ b/packages/igx-templates/igx-ts/projects/_base/files/src/environments/environment.ts
@@ -1 +1,3 @@
-export const environment = {};
+export const environment = {
+  production: true
+};
diff --git a/packages/igx-templates/igx-ts/projects/_base/files/tsconfig.app.json b/packages/igx-templates/igx-ts/projects/_base/files/tsconfig.app.json
index 9d6d6c35a..264f459bf 100644
--- a/packages/igx-templates/igx-ts/projects/_base/files/tsconfig.app.json
+++ b/packages/igx-templates/igx-ts/projects/_base/files/tsconfig.app.json
@@ -6,11 +6,8 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
-    "src/main.ts"
-  ],
   "include": [
-    "src/**/*.d.ts"
+    "src/**/*.ts"
   ],
   "exclude": [
     "src/**/*.spec.ts"
diff --git a/packages/igx-templates/igx-ts/projects/_base/files/tsconfig.spec.json b/packages/igx-templates/igx-ts/projects/_base/files/tsconfig.spec.json
index 940b30a5f..d38370633 100644
--- a/packages/igx-templates/igx-ts/projects/_base/files/tsconfig.spec.json
+++ b/packages/igx-templates/igx-ts/projects/_base/files/tsconfig.spec.json
@@ -5,7 +5,7 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "vitest/globals"
     ]
   },
   "include": [
diff --git a/packages/igx-templates/igx-ts/projects/_base/files/vitest-base.config.ts b/packages/igx-templates/igx-ts/projects/_base/files/vitest-base.config.ts
new file mode 100644
index 000000000..5cd5972d1
--- /dev/null
+++ b/packages/igx-templates/igx-ts/projects/_base/files/vitest-base.config.ts
@@ -0,0 +1,11 @@
+// Learn more about Vitest configuration options at https://vitest.dev/config/
+
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  resolve: {
+    alias: [
+      { find: /^fflate$/, replacement: 'fflate/browser' }
+    ]
+  }
+});
diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/package.json b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/package.json
index a88df3a3f..5f8108893 100644
--- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/package.json
+++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/package.json
@@ -6,7 +6,7 @@
     "start": "ng serve -o",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng test",
+    "test": "ng test --browsers=chromium",
     "lint": "ng lint"
   },
   "private": true,
@@ -35,18 +35,14 @@
     "@eslint/js": "^10.0.1",
     "@types/facebook-js-sdk": "~3.3.6",
     "@types/hammerjs": "~2.0.46",
-    "@types/jasmine": "~5.1.4",
+    "@vitest/browser-playwright": "^4.1.0",
     "angular-eslint": "~21.3.0",
     "eslint": "^10.0.2",
     "igniteui-cli": "~<%=cliVersion%>",
-    "jasmine-core": "~5.12.1",
-    "karma": "~6.4.4",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.1",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
+    "playwright": "^1.58.2",
     "prettier": "^3.8.1",
     "typescript": "~5.9.2",
-    "typescript-eslint": "8.56.1"
+    "typescript-eslint": "8.56.1",
+    "vitest": "^4.1.0"
   }
 }
diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/tsconfig.app.json b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/tsconfig.app.json
index 8fea7d1ab..ad37925ce 100644
--- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/tsconfig.app.json
+++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/tsconfig.app.json
@@ -12,11 +12,8 @@
       "facebook-js-sdk"
     ]
   },
-  "files": [
-    "src/main.ts"
-  ],
   "include": [
-    "src/**/*.d.ts"
+    "src/**/*.ts"
   ],
   "exclude": [
     "src/**/*.spec.ts"
diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/tsconfig.spec.json b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/tsconfig.spec.json
index 761dd995b..f35045b96 100644
--- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/tsconfig.spec.json
+++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/tsconfig.spec.json
@@ -5,11 +5,11 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine",
+      "vitest/globals",
       "node",
       "facebook-js-sdk"
     ],
-    "module": "commonjs"
+    "module": "esnext"
   },
   "include": [
     "src/**/*.d.ts",
diff --git a/packages/igx-templates/igx-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts
index aba789d62..faf35ba45 100644
--- a/packages/igx-templates/igx-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts
+++ b/packages/igx-templates/igx-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxRadialGaugeModule } from 'igniteui-angular-gauges';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
@@ -9,7 +8,7 @@ describe('<%=ClassName%>', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-	  imports: [IgxRadialGaugeModule, NoopAnimationsModule, <%=ClassName%>]
+	  imports: [IgxRadialGaugeModule, <%=ClassName%>]
     })
       .compileComponents();
   });