feat(angular): support angular 14 with application (#13575)

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

@@ -0,0 +1,146 @@
+import {
+  formatFiles,
+  installPackagesTask,
+  moveFilesToNewDirectory,
+  Tree,
+} from '@nrwl/devkit';
+import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter';
+import { convertToNxProjectGenerator } from '@nrwl/workspace/generators';
+import { UnitTestRunner } from '../../../utils/test-runners';
+import { angularInitGenerator } from '../../init/init';
+import { setupTailwindGenerator } from '../../setup-tailwind/setup-tailwind';
+import {
+  addE2e,
+  addLinting,
+  addProxyConfig,
+  addRouterRootConfiguration,
+  addUnitTestRunner,
+  convertToStandaloneApp,
+  createFiles,
+  enableStrictTypeChecking,
+  normalizeOptions,
+  setApplicationStrictDefault,
+  setDefaultProject,
+  updateAppComponentTemplate,
+  updateComponentSpec,
+  updateConfigFiles,
+  updateEditorTsConfig,
+  updateNxComponentTemplate,
+} from './lib';
+import type { Schema } from './schema';
+
+export async function applicationGenerator(
+  host: Tree,
+  schema: Partial<Schema>
+) {
+  const options = normalizeOptions(host, schema);
+
+  await angularInitGenerator(host, {
+    ...options,
+    skipFormat: true,
+  });
+
+  const angularAppSchematic = wrapAngularDevkitSchematic(
+    '@schematics/angular',
+    'application'
+  );
+  await angularAppSchematic(host, {
+    name: options.name,
+    inlineStyle: options.inlineStyle,
+    inlineTemplate: options.inlineTemplate,
+    prefix: options.prefix,
+    skipTests: options.skipTests,
+    style: options.style,
+    viewEncapsulation: options.viewEncapsulation,
+    routing: false,
+    skipInstall: true,
+    skipPackageJson: options.skipPackageJson,
+  });
+
+  if (options.ngCliSchematicAppRoot !== options.appProjectRoot) {
+    moveFilesToNewDirectory(
+      host,
+      options.ngCliSchematicAppRoot,
+      options.appProjectRoot
+    );
+  }
+
+  createFiles(host, options);
+  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.addTailwind) {
+    await setupTailwindGenerator(host, {
+      project: options.name,
+      skipFormat: true,
+      skipPackageJson: options.skipPackageJson,
+    });
+  }
+
+  if (options.unitTestRunner !== UnitTestRunner.None) {
+    updateComponentSpec(host, options);
+  }
+
+  if (options.routing) {
+    addRouterRootConfiguration(host, options);
+  }
+
+  await addLinting(host, options);
+  await addUnitTestRunner(host, options);
+  await addE2e(host, options);
+  updateEditorTsConfig(host, options);
+
+  if (!options.skipDefaultProject) {
+    setDefaultProject(host, options);
+  }
+
+  if (options.backendProject) {
+    addProxyConfig(host, options);
+  }
+
+  if (options.strict) {
+    enableStrictTypeChecking(host, options);
+  } else {
+    setApplicationStrictDefault(host, false);
+  }
+
+  if (options.standaloneConfig) {
+    await convertToNxProjectGenerator(host, {
+      project: options.name,
+      all: false,
+    });
+  }
+
+  if (options.standalone) {
+    convertToStandaloneApp(host, options);
+  }
+
+  if (!options.skipFormat) {
+    await formatFiles(host);
+  }
+
+  return () => {
+    installPackagesTask(host);
+  };
+}
+
+export default applicationGenerator;

packages/angular/src/generators/application/angular-v14/files/src/app/app.routes.ts__tpl__

@@ -0,0 +1,3 @@
+import { Route } from '@angular/router';
+
+export const appRoutes: Route[] = [];

packages/angular/src/generators/application/angular-v14/files/tsconfig.editor.json__tpl__

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/*.ts"],
+  "compilerOptions": {}
+}

packages/angular/src/generators/application/angular-v14/files/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "<%= rootTsConfigPath %>",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

packages/angular/src/generators/application/angular-v14/lib/add-e2e.ts

@@ -0,0 +1,59 @@
+import type { Tree } from '@nrwl/devkit';
+import { getWorkspaceLayout, joinPathFragments } from '@nrwl/devkit';
+import type { NormalizedSchema } from './normalized-schema';
+
+import { cypressProjectGenerator } from '@nrwl/cypress';
+
+import { E2eTestRunner } from '../../../../utils/test-runners';
+
+import { addProtractor } from './add-protractor';
+import { removeScaffoldedE2e } from './remove-scaffolded-e2e';
+import { updateE2eProject } from './update-e2e-project';
+import { convertToNxProjectGenerator } from '@nrwl/workspace/generators';
+import { Linter, lintProjectGenerator } from '@nrwl/linter';
+
+export async function addE2e(tree: Tree, options: NormalizedSchema) {
+  if (options.e2eTestRunner === E2eTestRunner.Protractor) {
+    await addProtractor(tree, options);
+  } else {
+    removeScaffoldedE2e(tree, options, options.ngCliSchematicE2ERoot);
+  }
+
+  if (options.e2eTestRunner === 'cypress') {
+    await cypressProjectGenerator(tree, {
+      name: options.e2eProjectName,
+      directory: options.directory,
+      project: options.name,
+      linter: options.linter,
+      skipFormat: options.skipFormat,
+      standaloneConfig: options.standaloneConfig,
+      skipPackageJson: options.skipPackageJson,
+      rootProject: options.rootProject,
+    });
+  }
+
+  if (options.e2eTestRunner === E2eTestRunner.Protractor) {
+    updateE2eProject(tree, options);
+    if (
+      options.standaloneConfig ??
+      getWorkspaceLayout(tree).standaloneAsDefault
+    ) {
+      await convertToNxProjectGenerator(tree, {
+        project: `${options.e2eProjectName}`,
+      });
+    }
+    if (options.linter === Linter.EsLint) {
+      await lintProjectGenerator(tree, {
+        project: options.e2eProjectName,
+        linter: options.linter,
+        eslintFilePatterns: [
+          joinPathFragments(options.e2eProjectRoot, '**/*.ts'),
+        ],
+        unitTestRunner: options.unitTestRunner,
+        skipFormat: true,
+        setParserOptionsProject: options.setParserOptionsProject,
+        skipPackageJson: options.skipPackageJson,
+      });
+    }
+  }
+}

packages/angular/src/generators/application/angular-v14/lib/add-linting.ts

@@ -0,0 +1,19 @@
+import type { Tree } from '@nrwl/devkit';
+import type { NormalizedSchema } from './normalized-schema';
+
+import { Linter } from '@nrwl/linter';
+import addLintingGenerator from '../../../add-linting/add-linting';
+
+export async function addLinting(host: Tree, options: NormalizedSchema) {
+  if (options.linter === Linter.None) {
+    return;
+  }
+  await addLintingGenerator(host, {
+    projectName: options.name,
+    projectRoot: options.appProjectRoot,
+    prefix: options.prefix,
+    setParserOptionsProject: options.setParserOptionsProject,
+    skipPackageJson: options.skipPackageJson,
+    unitTestRunner: options.unitTestRunner,
+  });
+}

packages/angular/src/generators/application/angular-v14/lib/add-protractor.ts

@@ -0,0 +1,22 @@
+import type { Tree } from '@nrwl/devkit';
+import { joinPathFragments, moveFilesToNewDirectory } from '@nrwl/devkit';
+import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter';
+import type { NormalizedSchema } from './normalized-schema';
+
+export async function addProtractor(host: Tree, options: NormalizedSchema) {
+  const protractorSchematic = wrapAngularDevkitSchematic(
+    '@schematics/angular',
+    'e2e'
+  );
+
+  await protractorSchematic(host, {
+    relatedAppName: options.name,
+    rootSelector: `${options.prefix}-root`,
+  });
+
+  moveFilesToNewDirectory(
+    host,
+    joinPathFragments(options.appProjectRoot, 'e2e'),
+    options.e2eProjectRoot
+  );
+}

packages/angular/src/generators/application/angular-v14/lib/add-proxy-config.ts

@@ -0,0 +1,33 @@
+import type { Tree } from '@nrwl/devkit';
+import type { NormalizedSchema } from './normalized-schema';
+
+import {
+  readProjectConfiguration,
+  updateProjectConfiguration,
+  updateJson,
+} from '@nrwl/devkit';
+
+export function addProxyConfig(host: Tree, options: NormalizedSchema) {
+  const projectConfig = readProjectConfiguration(host, options.name);
+
+  if (projectConfig.targets && projectConfig.targets.serve) {
+    const pathToProxyFile = `${projectConfig.root}/proxy.conf.json`;
+
+    if (!host.exists(pathToProxyFile)) {
+      host.write(pathToProxyFile, '{}');
+    }
+
+    updateJson(host, pathToProxyFile, (json) => ({
+      [`/${options.backendProject}`]: {
+        target: 'http://localhost:3333',
+        secure: false,
+      },
+    }));
+
+    projectConfig.targets.serve.options = {
+      ...projectConfig.targets.serve.options,
+      proxyConfig: pathToProxyFile,
+    };
+    updateProjectConfiguration(host, options.name, projectConfig);
+  }
+}

packages/angular/src/generators/application/angular-v14/lib/add-unit-test-runner.ts

@@ -0,0 +1,25 @@
+import type { Tree } from '@nrwl/devkit';
+import type { NormalizedSchema } from './normalized-schema';
+
+import { jestProjectGenerator } from '@nrwl/jest';
+
+import { UnitTestRunner } from '../../../../utils/test-runners';
+import karmaProjectGenerator from '../../../karma-project/karma-project';
+
+export async function addUnitTestRunner(host: Tree, options: NormalizedSchema) {
+  if (options.unitTestRunner === UnitTestRunner.Jest) {
+    await jestProjectGenerator(host, {
+      project: options.name,
+      setupFile: 'angular',
+      supportTsx: false,
+      skipSerializers: false,
+      skipPackageJson: options.skipPackageJson,
+      rootProject: options.rootProject,
+    });
+  } else if (options.unitTestRunner === UnitTestRunner.Karma) {
+    await karmaProjectGenerator(host, {
+      project: options.name,
+      skipFormat: true,
+    });
+  }
+}