feat(misc): conditionally allow starter template inclusion (#14268)

Co-authored-by: Colum Ferry <cferry09@gmail.com>

docs/generated/packages/angular/generators/application.json

@@ -156,6 +156,11 @@
         "default": false,
         "hidden": true,
         "x-priority": "internal"
+      },
+      "minimal": {
+        "description": "Generate a Angular app with a minimal setup.",
+        "type": "boolean",
+        "default": false
       }
     },
     "additionalProperties": false,

docs/generated/packages/react/generators/host.json

@@ -156,6 +156,11 @@
         "description": "Whether to configure SSR for the host application",
         "type": "boolean",
         "default": false
+      },
+      "minimal": {
+        "description": "Generate a React app with a minimal setup. No nx starter template.",
+        "type": "boolean",
+        "default": false
       }
     },
     "required": ["name"],

packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap

@@ -1,5 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`app --minimal should skip Nx specific \`nx-welcome.component.ts\` file creation 1`] = `
+"import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+"
+`;
+
 exports[`app --standalone should generate a standalone app correctly with routing 1`] = `
 "import { bootstrapApplication } from '@angular/platform-browser';
 import { provideRouter, withEnabledBlockingInitialNavigation } from '@angular/router';

packages/angular/src/generators/application/angular-v14/application.ts

@@ -67,24 +67,26 @@ export async function applicationGenerator(
   updateConfigFiles(host, options);
   updateAppComponentTemplate(host, options);
 
-  // Create the NxWelcomeComponent
-  const angularComponentSchematic = wrapAngularDevkitSchematic(
-    '@schematics/angular',
-    'component'
-  );
-  await angularComponentSchematic(host, {
-    name: 'NxWelcome',
-    inlineTemplate: true,
-    inlineStyle: true,
-    prefix: options.prefix,
-    skipTests: true,
-    style: options.style,
-    flat: true,
-    viewEncapsulation: 'None',
-    project: options.name,
-    standalone: options.standalone,
-  });
-  updateNxComponentTemplate(host, options);
+  if (!options.minimal) {
+    // Create the NxWelcomeComponent
+    const angularComponentSchematic = wrapAngularDevkitSchematic(
+      '@schematics/angular',
+      'component'
+    );
+    await angularComponentSchematic(host, {
+      name: 'NxWelcome',
+      inlineTemplate: true,
+      inlineStyle: true,
+      prefix: options.prefix,
+      skipTests: true,
+      style: options.style,
+      flat: true,
+      viewEncapsulation: 'None',
+      project: options.name,
+      standalone: options.standalone,
+    });
+    updateNxComponentTemplate(host, options);
+  }
 
   if (options.addTailwind) {
     await setupTailwindGenerator(host, {

packages/angular/src/generators/application/angular-v14/schema.d.ts

@@ -26,4 +26,5 @@ export interface Schema {
   skipPackageJson?: boolean;
   standalone?: boolean;
   rootProject?: boolean;
+  minimal?: boolean;
 }

packages/angular/src/generators/application/application.spec.ts

@@ -862,6 +862,19 @@ describe('app', () => {
       .toThrow(stripIndents`The "standalone" option is only supported in Angular >= 14.1.0. You are currently using 14.0.0.
     You can resolve this error by removing the "standalone" option or by migrating to Angular 14.1.0.`);
   });
+
+  describe('--minimal', () => {
+    it('should skip Nx specific `nx-welcome.component.ts` file creation', async () => {
+      await generateApp(appTree, 'plain', { minimal: true });
+
+      expect(
+        appTree.read('apps/plain/src/app/app.module.ts', 'utf-8')
+      ).toMatchSnapshot();
+      expect(
+        appTree.exists('apps/plain/src/app/nx-welcome.component.ts')
+      ).toBeFalsy();
+    });
+  });
 });
 
 async function generateApp(

packages/angular/src/generators/application/application.ts

@@ -92,24 +92,26 @@ export async function applicationGenerator(
   updateConfigFiles(tree, options);
   updateAppComponentTemplate(tree, options);
 
-  // Create the NxWelcomeComponent
-  const angularComponentSchematic = wrapAngularDevkitSchematic(
-    '@schematics/angular',
-    'component'
-  );
-  await angularComponentSchematic(tree, {
-    name: 'NxWelcome',
-    inlineTemplate: true,
-    inlineStyle: true,
-    prefix: options.prefix,
-    skipTests: true,
-    style: options.style,
-    flat: true,
-    viewEncapsulation: 'None',
-    project: options.name,
-    standalone: options.standalone,
-  });
-  updateNxComponentTemplate(tree, options);
+  if (!options.minimal) {
+    // Create the NxWelcomeComponent
+    const angularComponentSchematic = wrapAngularDevkitSchematic(
+      '@schematics/angular',
+      'component'
+    );
+    await angularComponentSchematic(tree, {
+      name: 'NxWelcome',
+      inlineTemplate: true,
+      inlineStyle: true,
+      prefix: options.prefix,
+      skipTests: true,
+      style: options.style,
+      flat: true,
+      viewEncapsulation: 'None',
+      project: options.name,
+      standalone: options.standalone,
+    });
+    updateNxComponentTemplate(tree, options);
+  }
 
   if (options.addTailwind) {
     await setupTailwindGenerator(tree, {

packages/angular/src/generators/application/schema.d.ts

@@ -26,4 +26,5 @@ export interface Schema {
   skipPackageJson?: boolean;
   standalone?: boolean;
   rootProject?: boolean;
+  minimal?: boolean;
 }

packages/angular/src/generators/application/schema.json

@@ -159,6 +159,11 @@
       "default": false,
       "hidden": true,
       "x-priority": "internal"
+    },
+    "minimal": {
+      "description": "Generate a Angular app with a minimal setup.",
+      "type": "boolean",
+      "default": false
     }
   },
   "additionalProperties": false,

packages/react/src/generators/application/__snapshots__/application.spec.ts.snap

@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app --minimal should create default application without Nx welcome component 1`] = `
+"
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import styles from './app.module.css';
+
+
+
+export function App() {
+
+  return (
+    <>
+      
+      <h1>
+        <span> Hello there, </span>
+        Welcome plain 👋
+      </h1>
+     
+      <div />
+    </>);
+
+}
+
+
+export default App;
+
+ 
+if (import.meta.vitest) {
+  // add tests related to your file here
+  // For more information please visit the Vitest docs site here: https://vitest.dev/guide/in-source.html
+  
+  const { it, expect, beforeEach } = import.meta.vitest;
+  let render: any;
+
+  beforeEach(async () => {
+    render = (await import('@testing-library/react')).render;
+  });
+
+  
+it('should render successfully', () => {
+  const { baseElement } = render(<App />);
+  expect(baseElement).toBeTruthy();
+});
+
+it('should have a greeting as the title', () => {
+  const { getByText } = render(<App />);
+  expect(getByText(/Welcome plain/gi)).toBeTruthy();
+});
+
+}
+ "
+`;
+
+exports[`app not nested should generate files 1`] = `
+"
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import styles from './app.module.css';
+
+import NxWelcome from \\"./nx-welcome\\";
+
+
+
+export function App() {
+
+  return (
+    <>
+      
+      <NxWelcome title=\\"my-app\\"/>
+     
+      <div />
+    </>);
+
+}
+
+
+export default App;
+
+"
+`;
+
+exports[`app should create Nx specific template 1`] = `
+"
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import styles from './app.module.css';
+
+import NxWelcome from \\"./nx-welcome\\";
+
+
+
+export function App() {
+
+  return (
+    <>
+      
+      <NxWelcome title=\\"my-dir-my-app\\"/>
+     
+      <div />
+    </>);
+
+}
+
+
+export default App;
+
+"
+`;

packages/react/src/generators/application/application.spec.ts

@@ -76,6 +76,9 @@ describe('app', () => {
       expect(appTree.exists('apps/my-app/.babelrc')).toBeTruthy();
       expect(appTree.exists('apps/my-app/src/main.tsx')).toBeTruthy();
       expect(appTree.exists('apps/my-app/src/app/app.tsx')).toBeTruthy();
+      expect(
+        appTree.read('apps/my-app/src/app/app.tsx', 'utf-8')
+      ).toMatchSnapshot();
       expect(appTree.exists('apps/my-app/src/app/app.spec.tsx')).toBeTruthy();
       expect(appTree.exists('apps/my-app/src/app/app.module.css')).toBeTruthy();
 
@@ -235,8 +238,8 @@ describe('app', () => {
     await applicationGenerator(appTree, { ...schema, directory: 'myDir' });
 
     expect(
-      appTree.read('apps/my-dir/my-app/src/app/app.tsx').toString()
-    ).toContain(`<NxWelcome title="my-dir-my-app"/>`);
+      appTree.read('apps/my-dir/my-app/src/app/app.tsx', 'utf-8')
+    ).toMatchSnapshot();
     expect(
       appTree.read('apps/my-dir/my-app/src/app/nx-welcome.tsx').toString()
     ).toContain('Hello there');
@@ -835,6 +838,20 @@ describe('app', () => {
     });
   });
 
+  describe('--minimal', () => {
+    it('should create default application without Nx welcome component', async () => {
+      await applicationGenerator(appTree, {
+        ...schema,
+        name: 'plain',
+        minimal: true,
+      });
+      expect(appTree.exists('apps/plain/src/app/nx-welcome.tsx')).toBeFalsy();
+      expect(
+        appTree.read('apps/plain/src/app/app.tsx', 'utf-8')
+      ).toMatchSnapshot();
+    });
+  });
+
   describe('--js', () => {
     it('generates JS files', async () => {
       await applicationGenerator(appTree, {