diff --git a/src/main/webapp/app/springboot/primary/Generator.component.ts b/src/main/webapp/app/springboot/primary/Generator.component.ts
index 0c6a5efa9f6..7c7f45e31b9 100644
--- a/src/main/webapp/app/springboot/primary/Generator.component.ts
+++ b/src/main/webapp/app/springboot/primary/Generator.component.ts
@@ -1,17 +1,18 @@
 import { ProjectService } from '@/springboot/domain/ProjectService';
 import { defineComponent, inject, ref } from 'vue';
 import { ProjectToUpdate, toProject } from '@/springboot/primary/ProjectToUpdate';
-import { AngularService } from '@/springboot/domain/client/AngularService';
 import { ReactService } from '@/springboot/domain/client/ReactService';
 import { VueService } from '@/springboot/domain/client/VueService';
 import { SpringBootService } from '@/springboot/domain/SpringBootService';
 import { Logger } from '@/common/domain/Logger';
+import { AngularGeneratorVue } from '@/springboot/primary/angular-generator';
 
 export default defineComponent({
   name: 'GeneratorComponent',
-  components: {},
+  components: {
+    AngularGeneratorVue,
+  },
   setup() {
-    const angularService = inject('angularService') as AngularService;
     const logger = inject('logger') as Logger;
     const projectService = inject('projectService') as ProjectService;
     const reactService = inject('reactService') as ReactService;
@@ -23,7 +24,6 @@ export default defineComponent({
     const project = ref<ProjectToUpdate>({
       folder: '',
     });
-    const isAngularWithStyle = ref<boolean>(false);
     const isReactWithStyle = ref<boolean>(false);
     const isVueWithStyle = ref<boolean>(false);
     const isSvelteWithStyle = ref<boolean>(false);
@@ -170,18 +170,6 @@ export default defineComponent({
       }
     };
 
-    const addAngular = async (): Promise<void> => {
-      if (project.value.folder !== '') {
-        if (isAngularWithStyle.value) {
-          await angularService
-            .addWithStyle(toProject(project.value))
-            .catch(error => logger.error('Adding Angular with style to project failed', error));
-        } else {
-          await angularService.add(toProject(project.value)).catch(error => logger.error('Adding Angular to project failed', error));
-        }
-      }
-    };
-
     const addReact = async (): Promise<void> => {
       if (project.value.folder !== '') {
         if (isReactWithStyle.value) {
@@ -231,7 +219,6 @@ export default defineComponent({
 
     return {
       project,
-      isAngularWithStyle,
       isReactWithStyle,
       isVueWithStyle,
       isSvelteWithStyle,
@@ -259,7 +246,6 @@ export default defineComponent({
       addMySQL,
       addMariaDB,
       addMongoDB,
-      addAngular,
       addReact,
       addVue,
       addFrontendMavenPlugin,
diff --git a/src/main/webapp/app/springboot/primary/Generator.vue b/src/main/webapp/app/springboot/primary/Generator.vue
index 9ce0801fc3a..16ca6540bd7 100644
--- a/src/main/webapp/app/springboot/primary/Generator.vue
+++ b/src/main/webapp/app/springboot/primary/Generator.vue
@@ -676,36 +676,7 @@
               MongoDB
             </button>
           </div>
-          <div
-            v-if="client === 'angular'"
-            id="v-pills-angular"
-            class="tab-pane fade"
-            role="tabpanel"
-            aria-labelledby="v-pills-settings-tab"
-          >
-            <div class="list-group--inline py-2">
-              <label for="angular-with-style" class="list-group-item gap-3">
-                <input
-                  id="angular-with-style"
-                  v-model="isAngularWithStyle"
-                  type="checkbox"
-                  name="angular-with-style"
-                  class="form-check-input flex-shrink-0"
-                />
-                <span class="form-checked-content">
-                  <strong>Add Angular style</strong>
-                </span>
-              </label>
-            </div>
-            <button
-              id="angular"
-              class="btn btn-outline-primary"
-              :data-selector="selectorPrefix + '.add-angular-button'"
-              @click.prevent="addAngular"
-            >
-              Generate Angular
-            </button>
-          </div>
+          <AngularGeneratorVue v-if="client === 'angular'" :project="project" />
           <div v-if="client === 'react'" id="v-pills-react" class="tab-pane fade" role="tabpanel" aria-labelledby="v-pills-react-tab">
             <div class="list-group--inline py-2">
               <label for="react-with-style" class="list-group-item gap-3">
diff --git a/src/main/webapp/app/springboot/primary/angular-generator/AngularGenerator.component.ts b/src/main/webapp/app/springboot/primary/angular-generator/AngularGenerator.component.ts
new file mode 100644
index 00000000000..9e63167cd69
--- /dev/null
+++ b/src/main/webapp/app/springboot/primary/angular-generator/AngularGenerator.component.ts
@@ -0,0 +1,44 @@
+import { defineComponent, inject, ref } from 'vue';
+import { AngularService } from '@/springboot/domain/client/AngularService';
+import { ProjectToUpdate, toProject } from '@/springboot/primary/ProjectToUpdate';
+import { Logger } from '@/common/domain/Logger';
+
+export default defineComponent({
+  name: 'AngularGeneratorComponent',
+
+  props: {
+    project: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const logger = inject('logger') as Logger;
+    const angularService = inject('angularService') as AngularService;
+
+    const selectorPrefix = 'angular-generator';
+    const isAngularWithStyle = ref<boolean>(false);
+
+    const addAngular = async (): Promise<void> => {
+      if (props.project.folder !== '') {
+        if (isAngularWithStyle.value) {
+          await angularService
+            .addWithStyle(toProject(props.project as ProjectToUpdate))
+            .catch(error => logger.error('Adding Angular with style to project failed', error));
+        } else {
+          await angularService
+            .add(toProject(props.project as ProjectToUpdate))
+            .catch(error => logger.error('Adding Angular to project failed', error));
+        }
+      }
+    };
+
+    return {
+      selectorPrefix,
+      isAngularWithStyle,
+      addAngular,
+      props,
+    };
+  },
+});
diff --git a/src/main/webapp/app/springboot/primary/angular-generator/AngularGenerator.vue b/src/main/webapp/app/springboot/primary/angular-generator/AngularGenerator.vue
new file mode 100644
index 00000000000..d85bd6fd652
--- /dev/null
+++ b/src/main/webapp/app/springboot/primary/angular-generator/AngularGenerator.vue
@@ -0,0 +1,28 @@
+<template>
+  <div id="v-pills-angular" class="tab-pane fade" role="tabpanel" aria-labelledby="v-pills-settings-tab">
+    <div class="list-group--inline py-2">
+      <label for="angular-with-style" class="list-group-item gap-3">
+        <input
+          id="angular-with-style"
+          v-model="isAngularWithStyle"
+          type="checkbox"
+          name="angular-with-style"
+          class="form-check-input flex-shrink-0"
+        />
+        <span class="form-checked-content">
+          <strong>Add Angular style</strong>
+        </span>
+      </label>
+    </div>
+    <button
+      id="angular"
+      class="btn btn-outline-primary"
+      :data-selector="selectorPrefix + '.add-angular-button'"
+      @click.prevent="addAngular"
+    >
+      Generate Angular
+    </button>
+  </div>
+</template>
+
+<script lang="ts" src="./AngularGenerator.component.ts"></script>
diff --git a/src/main/webapp/app/springboot/primary/angular-generator/index.ts b/src/main/webapp/app/springboot/primary/angular-generator/index.ts
new file mode 100644
index 00000000000..02b4c18ebf6
--- /dev/null
+++ b/src/main/webapp/app/springboot/primary/angular-generator/index.ts
@@ -0,0 +1,4 @@
+import AngularGeneratorComponent from './AngularGenerator.component';
+import AngularGeneratorVue from './AngularGenerator.vue';
+
+export { AngularGeneratorComponent, AngularGeneratorVue };
diff --git a/src/test/javascript/cypress/integration/Generator.spec.ts b/src/test/javascript/cypress/integration/Generator.spec.ts
index a2606ff4369..f57d49c343f 100644
--- a/src/test/javascript/cypress/integration/Generator.spec.ts
+++ b/src/test/javascript/cypress/integration/Generator.spec.ts
@@ -1,6 +1,7 @@
 import { composeSelector, dataSelector } from '../support/selector';
 
 const generatorSelector = (name: string) => dataSelector(composeSelector('generator', name));
+const angularGeneratorSelector = (name: string) => dataSelector(composeSelector('angular-generator', name));
 
 describe('Generator', () => {
   beforeEach(() => {
@@ -45,7 +46,7 @@ describe('Generator', () => {
 
   it('should display angular', () => {
     cy.get(generatorSelector('option-angular')).check();
-    cy.get(generatorSelector('add-angular-button')).contains('Angular');
+    cy.get(angularGeneratorSelector('add-angular-button')).contains('Angular');
   });
 
   it('should display react', () => {
diff --git a/src/test/javascript/spec/springboot/primary/Generator.spec.ts b/src/test/javascript/spec/springboot/primary/Generator.spec.ts
index 20963a9bca8..ffc18c9750e 100644
--- a/src/test/javascript/spec/springboot/primary/Generator.spec.ts
+++ b/src/test/javascript/spec/springboot/primary/Generator.spec.ts
@@ -1,11 +1,9 @@
 import { ProjectService } from '@/springboot/domain/ProjectService';
 import { GeneratorVue } from '@/springboot/primary';
-import { mount, VueWrapper } from '@vue/test-utils';
+import { shallowMount, VueWrapper } from '@vue/test-utils';
 import { stubProjectService } from '../domain/ProjectService.fixture';
 import { ProjectToUpdate } from '@/springboot/primary/ProjectToUpdate';
 import { createProjectToUpdate } from './ProjectToUpdate.fixture';
-import { AngularService } from '@/springboot/domain/client/AngularService';
-import { stubAngularService } from '../domain/client/AngularService.fixture';
 import { stubReactService } from '../domain/client/ReactService.fixture';
 import { ReactService } from '@/springboot/domain/client/ReactService';
 import { stubSpringBootService } from '../domain/SpringBootService.fixture';
@@ -18,7 +16,6 @@ import { Logger } from '@/common/domain/Logger';
 let wrapper: VueWrapper;
 
 interface WrapperOptions {
-  angularService: AngularService;
   logger: Logger;
   projectService: ProjectService;
   reactService: ReactService;
@@ -27,8 +24,7 @@ interface WrapperOptions {
 }
 
 const wrap = (wrapperOptions?: Partial<WrapperOptions>) => {
-  const { angularService, logger, projectService, reactService, springBootService, vueService }: WrapperOptions = {
-    angularService: stubAngularService(),
+  const { logger, projectService, reactService, springBootService, vueService }: WrapperOptions = {
     logger: stubLogger(),
     projectService: stubProjectService(),
     reactService: stubReactService(),
@@ -36,10 +32,9 @@ const wrap = (wrapperOptions?: Partial<WrapperOptions>) => {
     vueService: stubVueService(),
     ...wrapperOptions,
   };
-  wrapper = mount(GeneratorVue, {
+  wrapper = shallowMount(GeneratorVue, {
     global: {
       provide: {
-        angularService,
         logger,
         projectService,
         reactService,
@@ -1059,108 +1054,6 @@ describe('Generator', () => {
     });
   });
 
-  it('should not add Angular when project path is not filled', async () => {
-    const angularService = stubAngularService();
-    angularService.add.resolves({});
-    await wrap({ angularService });
-    await selectSection('angular');
-
-    const button = wrapper.find('#angular');
-    await button.trigger('click');
-
-    expect(angularService.add.called).toBe(false);
-  });
-
-  it('should add Angular when project path is filled', async () => {
-    const angularService = stubAngularService();
-    angularService.add.resolves({});
-    await wrap({ angularService });
-    const projectToUpdate: ProjectToUpdate = createProjectToUpdate({
-      folder: 'project/path',
-      baseName: 'beer',
-      projectName: 'Beer Project',
-      packageName: 'tech.jhipster.beer',
-      serverPort: '8080',
-    });
-    await fillFullForm(projectToUpdate);
-    await selectSection('angular');
-
-    const button = wrapper.find('#angular');
-    await button.trigger('click');
-
-    const args = angularService.add.getCall(0).args[0];
-    expect(args).toEqual({
-      baseName: 'beer',
-      folder: 'project/path',
-      projectName: 'Beer Project',
-      packageName: 'tech.jhipster.beer',
-      serverPort: 8080,
-    });
-  });
-
-  it('should add Angular with Style when checkbox is checked', async () => {
-    const angularService = stubAngularService();
-    angularService.addWithStyle.resolves({});
-    await wrap({ angularService });
-    const projectToUpdate: ProjectToUpdate = createProjectToUpdate({
-      folder: 'project/path',
-      baseName: 'beer',
-      projectName: 'Beer Project',
-      packageName: 'tech.jhipster.beer',
-      serverPort: '8080',
-    });
-    await fillFullForm(projectToUpdate);
-    await selectSection('angular');
-
-    const checkbox = wrapper.find('#angular-with-style');
-    await checkbox.setValue(true);
-    const button = wrapper.find('#angular');
-    await button.trigger('click');
-
-    const args = angularService.addWithStyle.getCall(0).args[0];
-    expect(args).toEqual({
-      baseName: 'beer',
-      folder: 'project/path',
-      projectName: 'Beer Project',
-      packageName: 'tech.jhipster.beer',
-      serverPort: 8080,
-    });
-  });
-
-  it('should handle error on adding Angular failure', async () => {
-    const logger = stubLogger();
-    const angularService = stubAngularService();
-    angularService.add.rejects({});
-    await wrap({ angularService, logger });
-    const projectToUpdate: ProjectToUpdate = createProjectToUpdate();
-    await fillFullForm(projectToUpdate);
-    await selectSection('angular');
-
-    const initButton = wrapper.find('#angular');
-    await initButton.trigger('click');
-
-    const [message] = logger.error.getCall(0).args;
-    expect(message).toBe('Adding Angular to project failed');
-  });
-
-  it('should handle error on adding Angular with style failure', async () => {
-    const logger = stubLogger();
-    const angularService = stubAngularService();
-    angularService.addWithStyle.rejects({});
-    await wrap({ angularService, logger });
-    const projectToUpdate: ProjectToUpdate = createProjectToUpdate();
-    await fillFullForm(projectToUpdate);
-    await selectSection('angular');
-
-    const checkbox = wrapper.find('#angular-with-style');
-    await checkbox.setValue(true);
-    const initButton = wrapper.find('#angular');
-    await initButton.trigger('click');
-
-    const [message] = logger.error.getCall(0).args;
-    expect(message).toBe('Adding Angular with style to project failed');
-  });
-
   it('should not add React when project path is not filled', async () => {
     const reactService = stubReactService();
     reactService.add.resolves({});
diff --git a/src/test/javascript/spec/springboot/primary/angular-generator/AngularGenerator.spec.ts b/src/test/javascript/spec/springboot/primary/angular-generator/AngularGenerator.spec.ts
new file mode 100644
index 00000000000..2e7575a2261
--- /dev/null
+++ b/src/test/javascript/spec/springboot/primary/angular-generator/AngularGenerator.spec.ts
@@ -0,0 +1,121 @@
+import { shallowMount, VueWrapper } from '@vue/test-utils';
+import { stubAngularService } from '../../domain/client/AngularService.fixture';
+import { ProjectToUpdate } from '@/springboot/primary/ProjectToUpdate';
+import { createProjectToUpdate } from '../ProjectToUpdate.fixture';
+import { stubLogger } from '../../../common/domain/Logger.fixture';
+import { AngularService } from '@/springboot/domain/client/AngularService';
+import { Logger } from '@/common/domain/Logger';
+import { AngularGeneratorVue } from '@/springboot/primary/angular-generator';
+
+let wrapper: VueWrapper;
+
+interface WrapperOptions {
+  angularService: AngularService;
+  logger: Logger;
+  project: ProjectToUpdate;
+}
+
+const wrap = (wrapperOptions?: Partial<WrapperOptions>) => {
+  const { angularService, logger, project }: WrapperOptions = {
+    angularService: stubAngularService(),
+    logger: stubLogger(),
+    project: createProjectToUpdate(),
+    ...wrapperOptions,
+  };
+  wrapper = shallowMount(AngularGeneratorVue, {
+    props: {
+      project,
+    },
+    global: {
+      provide: {
+        angularService,
+        logger,
+      },
+    },
+  });
+};
+
+describe('AngularGenerator', () => {
+  it('should exist', () => {
+    wrap();
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('should not add Angular when project path is not filled', async () => {
+    const angularService = stubAngularService();
+    angularService.add.resolves({});
+    await wrap({ angularService, project: createProjectToUpdate({ folder: '' }) });
+
+    const button = wrapper.find('#angular');
+    await button.trigger('click');
+
+    expect(angularService.add.called).toBe(false);
+  });
+
+  it('should add Angular when project path is filled', async () => {
+    const angularService = stubAngularService();
+    angularService.add.resolves({});
+    await wrap({ angularService, project: createProjectToUpdate({ folder: 'project/path' }) });
+
+    const button = wrapper.find('#angular');
+    await button.trigger('click');
+
+    const args = angularService.add.getCall(0).args[0];
+    expect(args).toEqual({
+      baseName: 'beer',
+      folder: 'project/path',
+      projectName: 'Beer Project',
+      packageName: 'tech.jhipster.beer',
+      serverPort: 8080,
+    });
+  });
+
+  it('should add Angular with Style when checkbox is checked', async () => {
+    const angularService = stubAngularService();
+    angularService.addWithStyle.resolves({});
+    await wrap({ angularService, project: createProjectToUpdate({ folder: 'project/path' }) });
+
+    const checkbox = wrapper.find('#angular-with-style');
+    await checkbox.setValue(true);
+    const button = wrapper.find('#angular');
+    await button.trigger('click');
+
+    const args = angularService.addWithStyle.getCall(0).args[0];
+    expect(args).toEqual({
+      baseName: 'beer',
+      folder: 'project/path',
+      projectName: 'Beer Project',
+      packageName: 'tech.jhipster.beer',
+      serverPort: 8080,
+    });
+  });
+
+  it('should handle error on adding Angular failure', async () => {
+    const logger = stubLogger();
+    const angularService = stubAngularService();
+    angularService.add.rejects({});
+    await wrap({ angularService, logger, project: createProjectToUpdate({ folder: 'path' }) });
+
+    const initButton = wrapper.find('#angular');
+    await initButton.trigger('click');
+
+    const [message] = logger.error.getCall(0).args;
+    expect(message).toBe('Adding Angular to project failed');
+  });
+
+  it('should handle error on adding Angular with style failure', async () => {
+    const logger = stubLogger();
+    const angularService = stubAngularService();
+    angularService.addWithStyle.rejects({});
+    await wrap({ angularService, logger, project: createProjectToUpdate({ folder: 'path' }) });
+
+    const checkbox = wrapper.find('#angular-with-style');
+    await checkbox.setValue(true);
+    const initButton = wrapper.find('#angular');
+    await initButton.trigger('click');
+
+    const [message] = logger.error.getCall(0).args;
+    expect(message).toBe('Adding Angular with style to project failed');
+  });
+});