From 15b7e9f0792b4d327f6de4a79df8179ee0f78b51 Mon Sep 17 00:00:00 2001
From: Pavlo Grosse <olster94@gmail.com>
Date: Mon, 17 Jun 2024 10:51:49 +0200
Subject: [PATCH] feat(angular): add helper function to devkit to add
 viewProviders to a component (#26526)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Current Behavior

Angular Nx utils have `addProviderToComponent` function to add a
provider to an Angular component, but are missing a function to add
viewProviders.

## Expected Behavior

There should be a function like `addProviderToComponent` to add view
providers to a component.

Co-authored-by: Leosvel Pérez Espinosa <leosvel.perez.espinosa@gmail.com>
---
 packages/angular/src/utils/index.ts           |  1 +
 .../src/utils/nx-devkit/ast-utils.spec.ts     | 47 +++++++++++++++++++
 .../angular/src/utils/nx-devkit/ast-utils.ts  | 23 +++++++++
 3 files changed, 71 insertions(+)

diff --git a/packages/angular/src/utils/index.ts b/packages/angular/src/utils/index.ts
index b2d82ea1cdcb5..5899c22a0246c 100644
--- a/packages/angular/src/utils/index.ts
+++ b/packages/angular/src/utils/index.ts
@@ -14,6 +14,7 @@ export {
   addProviderToAppConfig,
   addProviderToComponent,
   addProviderToModule,
+  addViewProviderToComponent,
 } from './nx-devkit/ast-utils';
 
 export { addRoute, addProviderToRoute } from './nx-devkit/route-utils';
diff --git a/packages/angular/src/utils/nx-devkit/ast-utils.spec.ts b/packages/angular/src/utils/nx-devkit/ast-utils.spec.ts
index 022e18562a9ac..f7650c271cbb3 100644
--- a/packages/angular/src/utils/nx-devkit/ast-utils.spec.ts
+++ b/packages/angular/src/utils/nx-devkit/ast-utils.spec.ts
@@ -5,6 +5,7 @@ import {
   addImportToPipe,
   addProviderToAppConfig,
   addProviderToBootstrapApplication,
+  addViewProviderToComponent,
   isStandalone,
 } from './ast-utils';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
@@ -334,4 +335,50 @@ export const appConfig: ApplicationConfig = {
       };"
     `);
   });
+
+  it('should add view provider to a component', () => {
+    // ARRANGE
+    const pathToComponent = 'app.component.ts';
+    const componentOriginal = `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-app',
+  template: ''
+})
+export class AppComponent {}
+`;
+    const providerName = 'MyViewProvider';
+
+    const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+
+    tree.write(pathToComponent, componentOriginal);
+
+    const tsSourceFile = createSourceFile(
+      pathToComponent,
+      componentOriginal,
+      ScriptTarget.Latest,
+      true
+    );
+
+    // ACT
+    addViewProviderToComponent(
+      tree,
+      tsSourceFile,
+      pathToComponent,
+      providerName
+    );
+
+    // ASSERT
+    expect(tree.read(pathToComponent, 'utf-8')).toMatchInlineSnapshot(`
+      "import { Component } from '@angular/core';
+
+      @Component({
+        selector: 'app-app',
+        template: '',
+        viewProviders: [MyViewProvider]
+      })
+      export class AppComponent {}
+      "
+    `);
+  });
 });
diff --git a/packages/angular/src/utils/nx-devkit/ast-utils.ts b/packages/angular/src/utils/nx-devkit/ast-utils.ts
index 3d41523f4ec66..e6a694c4ae1b5 100644
--- a/packages/angular/src/utils/nx-devkit/ast-utils.ts
+++ b/packages/angular/src/utils/nx-devkit/ast-utils.ts
@@ -826,6 +826,29 @@ export function addProviderToComponent(
   );
 }
 
+/**
+ * Add a view provider to a Standalone Component
+ * @param host Virtual Tree
+ * @param source TS Source File containing the Component
+ * @param componentPath Path to the Component
+ * @param symbolName The provider to add
+ */
+export function addViewProviderToComponent(
+  host: Tree,
+  source: ts.SourceFile,
+  componentPath: string,
+  symbolName: string
+): ts.SourceFile {
+  return _addSymbolToDecoratorMetadata(
+    host,
+    source,
+    componentPath,
+    'viewProviders',
+    symbolName,
+    'Component'
+  );
+}
+
 export function addDeclarationToModule(
   host: Tree,
   source: ts.SourceFile,