diff --git a/code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.test.ts b/code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.test.ts
index cac2a71d4fbe..81e3b7ad2eee 100644
--- a/code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.test.ts
+++ b/code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.test.ts
@@ -3,7 +3,8 @@
 import type { Type } from '@angular/core';
 import {
   Component,
-  ComponentFactoryResolver,
+  // Removed in Angular 22
+  // ComponentFactoryResolver,
   Directive,
   EventEmitter,
   HostBinding,
@@ -46,6 +47,9 @@ describe('getComponentInputsOutputs', () => {
     });
   });
 
+  /* Commented out until we figure out how to handle the removal of ComponentFactoryResolver in Angular 22
+  See https://github.com/angular/angular/releases/tag/v22.0.0-next.7
+  
   it('should return I/O', () => {
     @Component({
       template: '',
@@ -205,6 +209,7 @@ describe('getComponentInputsOutputs', () => {
     );
     expect(sortByPropName(outputs)).toEqual(sortByPropName(fooComponentFactory.outputs));
   });
+  */
 });
 
 describe('isDeclarable', () => {
@@ -370,7 +375,7 @@ function sortByPropName(
 ) {
   return array.sort((a, b) => a.propName.localeCompare(b.propName));
 }
-
+/*
 function resolveComponentFactory<T extends Type<any>>(component: T) {
   TestBed.configureTestingModule({
     declarations: [component],
@@ -379,3 +384,4 @@ function resolveComponentFactory<T extends Type<any>>(component: T) {
 
   return componentFactoryResolver.resolveComponentFactory(component);
 }
+*/
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
deleted file mode 100644
index 78fd72adcecb..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// ElementRef must be a regular import, not a type-only import, because it's used in dependency injection.
-// Type-only imports are stripped during compilation, causing runtime errors like "ElementRef is not defined".
-// eslint-disable-next-line @typescript-eslint/consistent-type-imports
-import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core';
-
-@Component({
-  standalone: false,
-  selector: 'storybook-attribute-selector[foo=bar]',
-  template: `<h3>Attribute selector</h3>
-Selector: {{ selectors }} <br />
-Generated template: {{ generatedTemplate }}`,
-})
-export class AttributeSelectorComponent {
-  generatedTemplate!: string;
-
-  selectors!: string;
-
-  constructor(
-    public el: ElementRef,
-    private resolver: ComponentFactoryResolver
-  ) {
-    const factory = this.resolver.resolveComponentFactory(AttributeSelectorComponent);
-    this.selectors = factory.selector;
-    this.generatedTemplate = el.nativeElement.outerHTML;
-  }
-}
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts
deleted file mode 100644
index 2d9e13dd4d78..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { AttributeSelectorComponent } from './attribute-selector.component';
-
-const meta: Meta<AttributeSelectorComponent> = {
-  // title: 'Basics / Component / With Complex Selectors',
-  component: AttributeSelectorComponent,
-};
-
-export default meta;
-
-type Story = StoryObj<AttributeSelectorComponent>;
-
-export const AttributeSelectors: Story = {};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.stories.ts
deleted file mode 100644
index c8da5e41e2c4..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.stories.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ClassSelectorComponent } from './class-selector.component';
-
-export default {
-  // title: 'Basics / Component / With Complex Selectors',
-  component: ClassSelectorComponent,
-};
-
-export const ClassSelectors = {};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts
deleted file mode 100644
index d6cbf90d2f4a..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// ElementRef must be a regular import, not a type-only import, because it's used in dependency injection.
-// Type-only imports are stripped during compilation, causing runtime errors like "ElementRef is not defined".
-// eslint-disable-next-line @typescript-eslint/consistent-type-imports
-import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core';
-
-@Component({
-  standalone: false,
-  selector: 'storybook-class-selector.foo, storybook-class-selector.bar',
-  template: `<h3>Class selector</h3>
-Selector: {{ selectors }} <br />
-Generated template: {{ generatedTemplate }}`,
-})
-export class ClassSelectorComponent {
-  generatedTemplate!: string;
-
-  selectors!: string;
-
-  constructor(
-    public el: ElementRef,
-    private resolver: ComponentFactoryResolver
-  ) {
-    const factory = this.resolver.resolveComponentFactory(ClassSelectorComponent);
-    this.selectors = factory.selector;
-    this.generatedTemplate = el.nativeElement.outerHTML;
-  }
-}
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-class-selector.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-class-selector.component.stories.ts
deleted file mode 100644
index 0ed46ecfdbcd..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-class-selector.component.stories.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { MultipleClassSelectorComponent } from './multiple-selector.component';
-
-export default {
-  // title: 'Basics / Component / With Complex Selectors',
-  component: MultipleClassSelectorComponent,
-};
-
-export const MultipleClassSelectors = {};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
deleted file mode 100644
index 3dac394c440a..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { MultipleSelectorComponent } from './multiple-selector.component';
-
-export default {
-  // title: 'Basics / Component / With Complex Selectors',
-  component: MultipleSelectorComponent,
-};
-
-export const MultipleSelectors = {};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
deleted file mode 100644
index 14a70bc230de..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// ElementRef must be a regular import, not a type-only import, because it's used in dependency injection.
-// Type-only imports are stripped during compilation, causing runtime errors like "ElementRef is not defined".
-// eslint-disable-next-line @typescript-eslint/consistent-type-imports
-import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core';
-
-@Component({
-  standalone: false,
-  selector: 'storybook-multiple-selector, storybook-multiple-selector2',
-  template: `<h3>Multiple selector</h3>
-Selector: {{ selectors }} <br />
-Generated template: {{ generatedTemplate }}`,
-})
-export class MultipleSelectorComponent {
-  generatedTemplate!: string;
-
-  selectors!: string;
-
-  constructor(
-    public el: ElementRef,
-    private resolver: ComponentFactoryResolver
-  ) {
-    const factory = this.resolver.resolveComponentFactory(MultipleClassSelectorComponent);
-    this.selectors = factory.selector;
-    this.generatedTemplate = el.nativeElement.outerHTML;
-  }
-}
-
-@Component({
-  standalone: false,
-  selector: 'storybook-button, button[foo], .button[foo], button[baz]',
-  template: `<h3>Multiple selector</h3>
-Selector: {{ selectors }} <br />
-Generated template: {{ generatedTemplate }}`,
-})
-export class MultipleClassSelectorComponent {
-  generatedTemplate!: string;
-
-  selectors!: string;
-
-  constructor(
-    public el: ElementRef,
-    private resolver: ComponentFactoryResolver
-  ) {
-    const factory = this.resolver.resolveComponentFactory(MultipleClassSelectorComponent);
-    this.selectors = factory.selector;
-    this.generatedTemplate = el.nativeElement.outerHTML;
-  }
-}