diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 76f6a9ad..eff9f5ae 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -41,6 +41,9 @@ jobs:
       - name: Add example app
         run: bit add integration/demo-app --log
 
+      - name: Use example app
+        run: bit use integration.examples/demo-app --log
+
       - name: Install dependencies
         run: bit install --log
 
diff --git a/angular/envs/base-env/angular-base-env.bit-env.ts b/angular/envs/base-env/angular-base-env.bit-env.ts
index 07b1f54d..dc582e65 100644
--- a/angular/envs/base-env/angular-base-env.bit-env.ts
+++ b/angular/envs/base-env/angular-base-env.bit-env.ts
@@ -18,7 +18,8 @@ import { NgWebpackBundler, NgWebpackDevServer } from '@bitdev/angular.dev-servic
 import {
   NgAppTemplate,
   NgEnvTemplate,
-  NgModuleTemplate
+  NgModuleTemplate,
+  NgStandaloneTemplate
 } from '@bitdev/angular.templates.generators';
 import {
   AngularStarter,
@@ -224,6 +225,7 @@ export abstract class AngularBaseEnv implements AngularEnvInterface {
     const envName = this.constructor.name;
     return TemplateList.from([
       NgModuleTemplate.from({ envName, angularVersion: this.angularVersion }),
+      NgStandaloneTemplate.from({ envName, angularVersion: this.angularVersion }),
       NgEnvTemplate.from({ envName, angularVersion: this.angularVersion }),
       NgAppTemplate.from({ envName, angularVersion: this.angularVersion })
     ]);
diff --git a/angular/examples/my-angular-env/my-angular-env.bit-env.ts b/angular/examples/my-angular-env/my-angular-env.bit-env.ts
index 1fd8ecd5..dabac234 100644
--- a/angular/examples/my-angular-env/my-angular-env.bit-env.ts
+++ b/angular/examples/my-angular-env/my-angular-env.bit-env.ts
@@ -4,12 +4,13 @@ import {
   BundlerProvider,
   DevServerProvider
 } from '@bitdev/angular.dev-services.preview.preview';
-import { AngularStarter } from '@bitdev/angular.templates.starters';
 import {
   NgAppTemplate,
   NgEnvTemplate,
-  NgModuleTemplate
+  NgModuleTemplate,
+  NgStandaloneTemplate
 } from '@bitdev/angular.templates.generators';
+import { AngularStarter } from '@bitdev/angular.templates.starters';
 import { BundlerContext, DevServerContext } from '@teambit/bundler';
 import { ESLintLinter, EslintTask } from '@teambit/defender.eslint-linter';
 import { JestTask, JestTester } from '@teambit/defender.jest-tester';
@@ -120,6 +121,7 @@ export class MyAngularEnv extends AngularEnv {
     const envName = this.constructor.name;
     return TemplateList.from([
       NgModuleTemplate.from({envName, angularVersion: this.angularVersion}),
+      NgStandaloneTemplate.from({envName, angularVersion: this.angularVersion}),
       NgEnvTemplate.from({envName, angularVersion: this.angularVersion}),
       NgAppTemplate.from({envName, angularVersion: this.angularVersion})
     ]);
diff --git a/angular/examples/my-angular-v13-env/my-angular-v13-env.bit-env.ts b/angular/examples/my-angular-v13-env/my-angular-v13-env.bit-env.ts
index 077df967..6fca9e70 100644
--- a/angular/examples/my-angular-v13-env/my-angular-v13-env.bit-env.ts
+++ b/angular/examples/my-angular-v13-env/my-angular-v13-env.bit-env.ts
@@ -4,12 +4,12 @@ import {
   DevServerProvider
 } from '@bitdev/angular.dev-services.preview.preview';
 import { AngularV13Env } from '@bitdev/angular.envs.angular-v13-env';
-import { AngularStarter } from '@bitdev/angular.templates.starters';
 import {
   NgAppTemplate,
   NgEnvTemplate,
   NgModuleTemplate
 } from '@bitdev/angular.templates.generators';
+import { AngularStarter } from '@bitdev/angular.templates.starters';
 import { BundlerContext, DevServerContext } from '@teambit/bundler';
 import { ESLintLinter, EslintTask } from '@teambit/defender.eslint-linter';
 import { JestTask, JestTester } from '@teambit/defender.jest-tester';
diff --git a/angular/examples/my-angular-v14-env/my-angular-v14-env.bit-env.ts b/angular/examples/my-angular-v14-env/my-angular-v14-env.bit-env.ts
index c1fdd699..aa923639 100644
--- a/angular/examples/my-angular-v14-env/my-angular-v14-env.bit-env.ts
+++ b/angular/examples/my-angular-v14-env/my-angular-v14-env.bit-env.ts
@@ -4,12 +4,13 @@ import {
   DevServerProvider
 } from '@bitdev/angular.dev-services.preview.preview';
 import { AngularV14Env } from '@bitdev/angular.envs.angular-v14-env';
-import { AngularStarter } from '@bitdev/angular.templates.starters';
 import {
   NgAppTemplate,
   NgEnvTemplate,
-  NgModuleTemplate
+  NgModuleTemplate,
+  NgStandaloneTemplate
 } from '@bitdev/angular.templates.generators';
+import { AngularStarter } from '@bitdev/angular.templates.starters';
 import { BundlerContext, DevServerContext } from '@teambit/bundler';
 import { ESLintLinter, EslintTask } from '@teambit/defender.eslint-linter';
 import { JestTask, JestTester } from '@teambit/defender.jest-tester';
@@ -120,6 +121,7 @@ export class MyAngularV14Env extends AngularV14Env {
     const envName = this.constructor.name;
     return TemplateList.from([
       NgModuleTemplate.from({envName, angularVersion: this.angularVersion}),
+      NgStandaloneTemplate.from({envName, angularVersion: this.angularVersion}),
       NgEnvTemplate.from({envName, angularVersion: this.angularVersion}),
       NgAppTemplate.from({envName, angularVersion: this.angularVersion})
     ]);
diff --git a/angular/examples/my-angular-v15-env/my-angular-v15-env.bit-env.ts b/angular/examples/my-angular-v15-env/my-angular-v15-env.bit-env.ts
index 2b73f8af..12986df7 100644
--- a/angular/examples/my-angular-v15-env/my-angular-v15-env.bit-env.ts
+++ b/angular/examples/my-angular-v15-env/my-angular-v15-env.bit-env.ts
@@ -4,12 +4,13 @@ import {
   DevServerProvider
 } from '@bitdev/angular.dev-services.preview.preview';
 import { AngularV15Env } from '@bitdev/angular.envs.angular-v15-env';
-import { AngularStarter } from '@bitdev/angular.templates.starters';
 import {
   NgAppTemplate,
   NgEnvTemplate,
-  NgModuleTemplate
+  NgModuleTemplate,
+  NgStandaloneTemplate
 } from '@bitdev/angular.templates.generators';
+import { AngularStarter } from '@bitdev/angular.templates.starters';
 import { BundlerContext, DevServerContext } from '@teambit/bundler';
 import { ESLintLinter, EslintTask } from '@teambit/defender.eslint-linter';
 import { JestTask, JestTester } from '@teambit/defender.jest-tester';
@@ -120,6 +121,7 @@ export class MyAngularV15Env extends AngularV15Env {
     const envName = this.constructor.name;
     return TemplateList.from([
       NgModuleTemplate.from({envName, angularVersion: this.angularVersion}),
+      NgStandaloneTemplate.from({envName, angularVersion: this.angularVersion}),
       NgEnvTemplate.from({envName, angularVersion: this.angularVersion}),
       NgAppTemplate.from({envName, angularVersion: this.angularVersion})
     ]);
diff --git a/angular/examples/my-angular-v16-env/my-angular-v16-env.bit-env.ts b/angular/examples/my-angular-v16-env/my-angular-v16-env.bit-env.ts
index 4e2602ac..4a7ce97c 100644
--- a/angular/examples/my-angular-v16-env/my-angular-v16-env.bit-env.ts
+++ b/angular/examples/my-angular-v16-env/my-angular-v16-env.bit-env.ts
@@ -1,7 +1,16 @@
-import { AngularPreview, BundlerProvider, DevServerProvider } from '@bitdev/angular.dev-services.preview.preview';
-import { AngularStarter } from '@bitdev/angular.templates.starters';
-import { NgAppTemplate, NgEnvTemplate, NgModuleTemplate } from '@bitdev/angular.templates.generators';
+import {
+  AngularPreview,
+  BundlerProvider,
+  DevServerProvider
+} from '@bitdev/angular.dev-services.preview.preview';
 import { AngularV16Env } from '@bitdev/angular.envs.angular-v16-env';
+import {
+  NgAppTemplate,
+  NgEnvTemplate,
+  NgModuleTemplate,
+  NgStandaloneTemplate
+} from '@bitdev/angular.templates.generators';
+import { AngularStarter } from '@bitdev/angular.templates.starters';
 import { BundlerContext, DevServerContext } from '@teambit/bundler';
 import { ESLintLinter, EslintTask } from '@teambit/defender.eslint-linter';
 import { JestTask, JestTester } from '@teambit/defender.jest-tester';
@@ -112,6 +121,7 @@ export class MyAngularV16Env extends AngularV16Env {
     const envName = this.constructor.name;
     return TemplateList.from([
       NgModuleTemplate.from({envName, angularVersion: this.angularVersion}),
+      NgStandaloneTemplate.from({envName, angularVersion: this.angularVersion}),
       NgEnvTemplate.from({envName, angularVersion: this.angularVersion}),
       NgAppTemplate.from({envName, angularVersion: this.angularVersion})
     ]);
diff --git a/angular/examples/my-angular-v17-env/my-angular-v17-env.bit-env.ts b/angular/examples/my-angular-v17-env/my-angular-v17-env.bit-env.ts
index 8d2a9b37..d1cadfac 100644
--- a/angular/examples/my-angular-v17-env/my-angular-v17-env.bit-env.ts
+++ b/angular/examples/my-angular-v17-env/my-angular-v17-env.bit-env.ts
@@ -1,7 +1,16 @@
-import { AngularPreview, BundlerProvider, DevServerProvider } from '@bitdev/angular.dev-services.preview.preview';
-import { AngularStarter } from '@bitdev/angular.templates.starters';
-import { NgAppTemplate, NgEnvTemplate, NgModuleTemplate } from '@bitdev/angular.templates.generators';
+import {
+  AngularPreview,
+  BundlerProvider,
+  DevServerProvider
+} from '@bitdev/angular.dev-services.preview.preview';
 import { AngularV17Env } from '@bitdev/angular.envs.angular-v17-env';
+import {
+  NgAppTemplate,
+  NgEnvTemplate,
+  NgModuleTemplate,
+  NgStandaloneTemplate
+} from '@bitdev/angular.templates.generators';
+import { AngularStarter } from '@bitdev/angular.templates.starters';
 import { BundlerContext, DevServerContext } from '@teambit/bundler';
 import { ESLintLinter, EslintTask } from '@teambit/defender.eslint-linter';
 import { JestTask, JestTester } from '@teambit/defender.jest-tester';
@@ -112,6 +121,7 @@ export class MyAngularV17Env extends AngularV17Env {
     const envName = this.constructor.name;
     return TemplateList.from([
       NgModuleTemplate.from({envName, angularVersion: this.angularVersion}),
+      NgStandaloneTemplate.from({envName, angularVersion: this.angularVersion}),
       NgEnvTemplate.from({envName, angularVersion: this.angularVersion}),
       NgAppTemplate.from({envName, angularVersion: this.angularVersion})
     ]);
diff --git a/angular/templates/generators/index.ts b/angular/templates/generators/index.ts
index 5bbbffa4..d2f2b9cc 100644
--- a/angular/templates/generators/index.ts
+++ b/angular/templates/generators/index.ts
@@ -1,3 +1,4 @@
 export { NgModuleTemplate } from './ng-module';
+export { NgStandaloneTemplate } from './ng-standalone';
 export { NgEnvTemplate } from './ng-env';
 export { NgAppTemplate } from './ng-app';
diff --git a/angular/templates/generators/ng-module/files/component-spec.ts b/angular/templates/generators/ng-module/files/component-spec.ts
index d814ba2c..76b192d6 100644
--- a/angular/templates/generators/ng-module/files/component-spec.ts
+++ b/angular/templates/generators/ng-module/files/component-spec.ts
@@ -19,9 +19,7 @@ describe('${Name}Component', () => {
       imports: [ ${Name}Module ]
     })
     .compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(${Name}Component);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/angular/templates/generators/ng-standalone/files/component-spec.ts b/angular/templates/generators/ng-standalone/files/component-spec.ts
new file mode 100644
index 00000000..27ba4eb9
--- /dev/null
+++ b/angular/templates/generators/ng-standalone/files/component-spec.ts
@@ -0,0 +1,33 @@
+import { ComponentContext, ComponentFile } from '@teambit/generator';
+
+export const componentSpecFile = (context: ComponentContext): ComponentFile => {
+  const { name, namePascalCase: Name } = context;
+
+  return {
+    relativePath: `${name}.spec.ts`,
+    content: `import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ${Name}Component } from './${name}.component';
+
+describe('${Name}Component', () => {
+  let component: ${Name}Component;
+  let fixture: ComponentFixture<${Name}Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ ${Name}Component ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(${Name}Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+`,
+  };
+};
diff --git a/angular/templates/generators/ng-standalone/files/component-styles.ts b/angular/templates/generators/ng-standalone/files/component-styles.ts
new file mode 100644
index 00000000..f5b689f3
--- /dev/null
+++ b/angular/templates/generators/ng-standalone/files/component-styles.ts
@@ -0,0 +1,11 @@
+import { ComponentContext, ComponentFile } from '@teambit/generator';
+
+export const componentStylesFile = (context: ComponentContext): ComponentFile => {
+  const { name } = context;
+  return {
+    relativePath: `${name}.component.scss`,
+    content: `:host {
+  font-size: inherit;
+}`,
+  };
+};
diff --git a/angular/templates/generators/ng-standalone/files/component.ts b/angular/templates/generators/ng-standalone/files/component.ts
new file mode 100644
index 00000000..14cdc1f6
--- /dev/null
+++ b/angular/templates/generators/ng-standalone/files/component.ts
@@ -0,0 +1,26 @@
+import { ComponentContext, ComponentFile } from '@teambit/generator';
+
+export const componentFile = (context: ComponentContext): ComponentFile => {
+  const { name, namePascalCase: Name } = context;
+  return {
+    relativePath: `${name}.component.ts`,
+    content: `import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: '${name}',
+  standalone: true,
+  imports: [CommonModule],
+  template: \`
+    <p>
+    ${name} works!
+    </p>
+\`,
+  styleUrls: ['./${name}.component.scss']
+})
+export class ${Name}Component {
+  constructor() {}
+}
+`,
+  };
+};
diff --git a/angular/templates/generators/ng-standalone/files/composition.ts b/angular/templates/generators/ng-standalone/files/composition.ts
new file mode 100644
index 00000000..5955e092
--- /dev/null
+++ b/angular/templates/generators/ng-standalone/files/composition.ts
@@ -0,0 +1,22 @@
+import { ComponentContext, ComponentFile } from '@teambit/generator';
+
+export const compositionFile = (context: ComponentContext): ComponentFile => {
+  const { name, namePascalCase: Name } = context;
+
+  const standaloneComposition = `import { Component } from '@angular/core';
+import { ${Name}Component } from './${name}.component';
+
+@Component({
+  standalone: true,
+  selector: '${name}-composition-cmp',
+  imports: [${Name}Component],
+  template: \`${Name} composition: <${name}></${name}>\`
+})
+export class ${Name}CompositionComponent {}
+`;
+
+  return {
+    relativePath: `${name}.composition.ts`,
+    content: standaloneComposition,
+  };
+};
diff --git a/angular/templates/generators/ng-standalone/files/docs.ts b/angular/templates/generators/ng-standalone/files/docs.ts
new file mode 100644
index 00000000..b40bc044
--- /dev/null
+++ b/angular/templates/generators/ng-standalone/files/docs.ts
@@ -0,0 +1,38 @@
+import { ComponentContext, ComponentFile } from '@teambit/generator';
+
+export const docsFile = (context: ComponentContext): ComponentFile => {
+  const { name, namePascalCase: Name } = context;
+
+  return {
+    relativePath: `${name}.docs.md`,
+    content: `---
+labels: ['angular', 'typescript', '${name}']
+description: 'A \`${name}\` component.'
+---
+
+# ${Name} documentation
+
+Import \`${Name}Component\` into your application:
+
+\`\`\`ts
+import { ${Name}Component } from './${name}.component';
+
+// add it to your component imports
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [
+    ${Name}Component
+  ]
+})
+export class AppComponent {}
+\`\`\`
+
+Use \`${Name}Component\` in your generators:
+
+\`\`\`html
+<${name}></${name}>
+\`\`\`
+`,
+  };
+};
diff --git a/angular/templates/generators/ng-standalone/files/public-api.ts b/angular/templates/generators/ng-standalone/files/public-api.ts
new file mode 100644
index 00000000..d9f94a0b
--- /dev/null
+++ b/angular/templates/generators/ng-standalone/files/public-api.ts
@@ -0,0 +1,14 @@
+import { ComponentContext, ComponentFile } from '@teambit/generator';
+
+export const publicApiFile = (context: ComponentContext): ComponentFile => {
+  const { name } = context;
+  return {
+    isMain: true,
+    relativePath: 'public-api.ts',
+    content: `/**
+ * Entry point for this Angular library, do not move or rename this file.
+ */
+export * from './${name}.component';
+`,
+  };
+};
diff --git a/angular/templates/generators/ng-standalone/index.ts b/angular/templates/generators/ng-standalone/index.ts
new file mode 100644
index 00000000..6fc3c499
--- /dev/null
+++ b/angular/templates/generators/ng-standalone/index.ts
@@ -0,0 +1,38 @@
+import { ComponentContext, ComponentTemplate } from '@teambit/generator';
+import { AngularComponentTemplateOptions } from '@bitdev/angular.dev-services.common';
+import { componentFile } from './files/component';
+import { componentSpecFile } from './files/component-spec';
+import { componentStylesFile } from './files/component-styles';
+import { compositionFile } from './files/composition';
+import { docsFile } from './files/docs';
+import { publicApiFile } from './files/public-api';
+
+export class NgStandaloneTemplate implements ComponentTemplate {
+  private constructor(
+    readonly angularVersion: number,
+    readonly name = 'ng-standalone',
+    readonly description = 'create a standalone Angular component',
+    readonly hidden = false
+  ) {}
+
+  generateFiles(context: ComponentContext) {
+    return [
+      publicApiFile(context),
+      componentFile(context),
+      componentStylesFile(context),
+      docsFile(context),
+      componentSpecFile(context),
+      compositionFile(context),
+    ];
+  }
+
+  static from(options: AngularComponentTemplateOptions & { angularVersion: number }) {
+    return () =>
+      new NgStandaloneTemplate(
+        options.angularVersion,
+        options.name,
+        options.description,
+        options.hidden
+      );
+  }
+}
diff --git a/scripts/keep-env.js b/scripts/keep-env.js
index b1a5cfef..5acf0694 100644
--- a/scripts/keep-env.js
+++ b/scripts/keep-env.js
@@ -28,7 +28,7 @@ regexp.push(new RegExp(`\\s\\s"bitdev\\.angular\\/envs\\/angular\\-v(?!${version
 // Remove default env & app if needed
 if (!defaultEnv) {
   regexp.push(new RegExp(`\\s\\s"bitdev\\.angular\\/angular\\-env":\\s\\{\\},\\n`, 'g'));
-  regexp.push(new RegExp(`\\s\\s"integration\\/demo-app":\\s\\{\\},\\n`, 'g'));
+  regexp.push(new RegExp(`\\s\\s"integration.examples\\/demo-app":\\s\\{\\},\\n`, 'g'));
 }
 
 try {
diff --git a/workspace.jsonc b/workspace.jsonc
index dc26dca1..8de3d6c0 100644
--- a/workspace.jsonc
+++ b/workspace.jsonc
@@ -94,7 +94,7 @@
   "bitdev.angular/envs/angular-v13-env": {},
   "bitdev.angular/envs/angular-v12-env": {},
   // Add angular apps (until this is no longer necessary)
-  "integration/demo-app": {},
+  //  "integration.examples/demo-app": {},
   /**
    * workspace variants allow you to set different subsets of configuration for components in your workspace.
    * this is extremely useful for upgrading, aligning and building components with a
@@ -103,7 +103,6 @@
   "teambit.workspace/variants": {
     // Special rules for all aspect envs
     "angular/envs, angular/examples": {
-      "teambit.harmony/aspect": "-",
       // Set the env env for all core envs
       "teambit.envs/env": {},
       "teambit.envs/envs": {
@@ -112,7 +111,6 @@
     },
     // All the other components use node env
     "angular/devkit, angular/templates, angular/envs/base-env, angular/app-types": {
-      "teambit.envs/env": "-",
       "teambit.envs/envs": {
         "env": "teambit.harmony/node"
       },