feat(sage-monorepo): nx plugin now infers projects that use the Angular framework (#2894)

Author: tschaffter

libs/sage-monorepo/nx-plugin/src/plugins/build-image-target.ts

@@ -1,17 +1,18 @@
 import { TargetConfiguration } from '@nx/devkit';
-import { Builder } from './project-metadata';
+import { Builder, Framework } from './project-metadata';
 
 export async function buildImageTarget(
   projectRoot: string,
   projectName: string,
   projectBuilder: Builder | undefined | null, // TODO: builder could be app or image, be more specific
+  projectFramework: Framework | null,
 ): Promise<TargetConfiguration> {
   const dependsOn = [];
   if (projectBuilder === 'gradle') {
     dependsOn.push({
       target: 'build-image-base',
     });
-  } else if (projectBuilder === 'webpack') {
+  } else if (projectBuilder === 'webpack' && projectFramework === 'angular') {
     dependsOn.push({
       // TODO: the task `server` is more about Angular that the build itself. To revisit. Also,
       // shall we let the user decide between CSR and SSR?
@@ -25,6 +26,7 @@ export async function buildImageTarget(
 
   let context = projectRoot;
   // TODO: The context must be set to '.' for Angular app. Be more specific.
+  // Actually, this is also valid for `agora-api` built with Webpack.
   if (projectBuilder === 'webpack') {
     context = '.';
   }

libs/sage-monorepo/nx-plugin/src/plugins/build-project-configuration.ts

@@ -10,11 +10,12 @@ export async function buildProjectConfiguration(
 
   const pluginConfig = options.pluginConfig;
 
-  if (options.projectMetadata.containerType === 'Docker') {
+  if (options.projectMetadata.containerType === 'docker') {
     targets[pluginConfig.buildImageTargetName] = await buildImageTarget(
       options.projectRoot,
       options.projectName,
       options.projectMetadata.builder,
+      options.projectMetadata.framework,
     );
   }
 

libs/sage-monorepo/nx-plugin/src/plugins/project-metadata.ts

@@ -7,9 +7,9 @@ export type Builder = 'esbuild' | 'webpack' | 'gradle' | 'maven' | 'poetry';
 // export type TypeChecker = 'mypy' | 'pyright';
 // export type TestingTool = 'pytest' | null;
 // export type Formatter = 'Black' | 'Prettier';
-export type ContainerType = 'Docker' | 'Singularity';
+export type ContainerType = 'docker' | 'singularity';
 // export type Language = 'python' | 'typescript' | 'javascript';
-// export type Framework = 'Flask' | 'React' | 'Angular' | 'Vue' | null;
+export type Framework = 'angular';
 
 export type ProjectMetadata = {
   projectType: ProjectType;
@@ -24,7 +24,7 @@ export type ProjectMetadata = {
   // formatter: Formatter;
   containerType: ContainerType | null;
   // language: Language;
-  // framework: Framework;
+  framework: Framework | null;
 };
 
 export function inferProjectMetadata(
@@ -37,6 +37,7 @@ export function inferProjectMetadata(
     projectType: inferProjectType(projectRoot),
     builder: inferBuilder(siblingFiles, localProjectConfiguration),
     containerType: inferContainerType(siblingFiles),
+    framework: inferFramework(localProjectConfiguration),
   };
 }
 
@@ -68,7 +69,18 @@ function inferBuilder(
 }
 
 function inferContainerType(siblingFiles: string[]): ContainerType | null {
-  if (siblingFiles.includes('Dockerfile')) return 'Docker';
+  if (siblingFiles.includes('Dockerfile')) return 'docker';
+
+  return null;
+}
+
+function inferFramework(localProjectConfiguration: ProjectConfiguration): Framework | null {
+  const buildExecutor = localProjectConfiguration?.targets?.['build']?.executor ?? '';
+  const angularBuildExecutors = ['@angular-devkit/build-angular:browser'];
+
+  if (angularBuildExecutors.includes(buildExecutor)) {
+    return 'angular';
+  }
 
   return null;
 }