refactor(@schematics/angular): remove tags usage from @angular-devkit/core

Usages of the `tags` template literal utility have been removed.

The logic has been refactored to use standard JavaScript template literals and string manipulation methods to achieve the same formatting results. This change affects multiple schematics and their tests.

Author: clydin

packages/schematics/angular/app-shell/index_spec.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { tags } from '@angular-devkit/core';
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
 import { Schema as ApplicationOptions } from '../application/schema';
 import { Schema as WorkspaceOptions } from '../workspace/schema';
@@ -126,8 +125,8 @@ describe('App Shell Schematic', () => {
     it(`should update the 'provideServerRendering' call to include 'withAppShell'`, async () => {
       const tree = await schematicRunner.runSchematic('app-shell', defaultOptions, appTree);
       const content = tree.readContent('/projects/bar/src/app/app.config.server.ts');
-      expect(tags.oneLine`${content}`).toContain(
-        tags.oneLine`provideServerRendering(withRoutes(serverRoutes), withAppShell(AppShell))`,
+      expect(content.replace(/\s/g, '')).toContain(
+        'provideServerRendering(withRoutes(serverRoutes),withAppShell(AppShell))',
       );
     });
 

packages/schematics/angular/service-worker/index.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { join, normalize, tags } from '@angular-devkit/core';
+import { join, normalize } from '@angular-devkit/core';
 import {
   Rule,
   SchematicContext,
@@ -55,7 +55,7 @@ function updateAppModule(mainPath: string): Rule {
     addImport(host, modulePath, 'isDevMode', '@angular/core');
 
     // register SW in application module
-    const importText = tags.stripIndent`
+    const importText = `
       ServiceWorkerModule.register('ngsw-worker.js', {
         enabled: !isDevMode(),
         // Register the ServiceWorker as soon as the application is stable

packages/schematics/angular/service-worker/index_spec.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { tags } from '@angular-devkit/core';
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
 import { Schema as ApplicationOptions } from '../application/schema';
 import { Builders } from '../utility/workspace-models';
@@ -127,12 +126,9 @@ describe('Service Worker Schematic', () => {
   it(`should add the 'provideServiceWorker' to providers`, async () => {
     const tree = await schematicRunner.runSchematic('service-worker', defaultOptions, appTree);
     const content = tree.readContent('/projects/bar/src/app/app.config.ts');
-    expect(tags.oneLine`${content}`).toContain(tags.oneLine`
-        provideServiceWorker('ngsw-worker.js', {
-          enabled: !isDevMode(),
-          registrationStrategy: 'registerWhenStable:30000'
-        })
-    `);
+    expect(content.replace(/\s/g, '')).toContain(
+      `provideServiceWorker('ngsw-worker.js',{enabled:!isDevMode(),registrationStrategy:'registerWhenStable:30000'})`,
+    );
   });
 
   it(`should import 'isDevMode' from '@angular/core'`, async () => {

packages/schematics/angular/ssr/index.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { isJsonObject, join, normalize, strings } from '@angular-devkit/core';
+import { isJsonObject, join, normalize } from '@angular-devkit/core';
 import {
   Rule,
   SchematicContext,
@@ -18,6 +18,7 @@ import {
   mergeWith,
   move,
   schematic,
+  strings,
   url,
 } from '@angular-devkit/schematics';
 import { posix } from 'node:path';

packages/schematics/angular/utility/ast-utils.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { tags } from '@angular-devkit/core';
 import * as ts from '../third_party/github.com/Microsoft/TypeScript/lib/typescript';
 import { Change, InsertChange, NoopChange } from './change';
 import { getEOL } from './eol';
@@ -379,7 +378,11 @@ export function addSymbolToNgModuleMetadata(
     let toInsert: string;
     if (node.properties.length == 0) {
       position = node.getEnd() - 1;
-      toInsert = `\n  ${metadataField}: [\n${tags.indentBy(4)`${symbolName}`}\n  ]\n`;
+      toInsert = `
+  ${metadataField}: [
+${' '.repeat(4)}${symbolName}
+  ]
+`;
     } else {
       const childNode = node.properties[node.properties.length - 1];
       position = childNode.getEnd();
@@ -389,7 +392,7 @@ export function addSymbolToNgModuleMetadata(
       if (matches) {
         toInsert =
           `,${matches[0]}${metadataField}: [${matches[1]}` +
-          `${tags.indentBy(matches[2].length + 2)`${symbolName}`}${matches[0]}]`;
+          `${' '.repeat(matches[2].length + 2)}${symbolName}${matches[0]}]`;
       } else {
         toInsert = `, ${metadataField}: [${symbolName}]`;
       }
@@ -418,8 +421,8 @@ export function addSymbolToNgModuleMetadata(
   const elements = assignmentInit.elements;
 
   if (elements.length) {
-    const symbolsArray = elements.map((node) => tags.oneLine`${node.getText()}`);
-    if (symbolsArray.includes(tags.oneLine`${symbolName}`)) {
+    const symbolsArray = elements.map((node) => node.getText());
+    if (symbolsArray.includes(symbolName)) {
       return [];
     }
 
@@ -433,13 +436,13 @@ export function addSymbolToNgModuleMetadata(
   if (ts.isArrayLiteralExpression(expression)) {
     // We found the field but it's empty. Insert it just before the `]`.
     position--;
-    toInsert = `\n${tags.indentBy(4)`${symbolName}`}\n  `;
+    toInsert = `\n${' '.repeat(4)}${symbolName}\n  `;
   } else {
     // Get the indentation of the last element, if any.
     const text = expression.getFullText(source);
     const matches = text.match(/^(\r?\n)(\s*)/);
     if (matches) {
-      toInsert = `,${matches[1]}${tags.indentBy(matches[2].length)`${symbolName}`}`;
+      toInsert = `,${matches[1]}${' '.repeat(matches[2].length)}${symbolName}`;
     } else {
       toInsert = `, ${symbolName}`;
     }

packages/schematics/angular/utility/ast-utils_spec.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { tags } from '@angular-devkit/core';
 import { HostTree } from '@angular-devkit/schematics';
 import * as ts from '../third_party/github.com/Microsoft/TypeScript/lib/typescript';
 import { Change, InsertChange } from '../utility/change';
@@ -73,7 +72,7 @@ describe('ast utils', () => {
   });
 
   it('should add export to module if not indented', () => {
-    moduleContent = tags.stripIndents`${moduleContent}`;
+    moduleContent = moduleContent.replace(/^(\s+)/gm, '');
     const source = getTsSource(modulePath, moduleContent);
     const changes = addExportToModule(source, modulePath, 'FooComponent', './foo.component');
     const output = applyChanges(modulePath, moduleContent, changes);
@@ -82,7 +81,7 @@ describe('ast utils', () => {
   });
 
   it('should add declarations to module if not indented', () => {
-    moduleContent = tags.stripIndents`${moduleContent}`;
+    moduleContent = moduleContent.replace(/^(\s+)/gm, '');
     const source = getTsSource(modulePath, moduleContent);
     const changes = addDeclarationToModule(source, modulePath, 'FooComponent', './foo.component');
     const output = applyChanges(modulePath, moduleContent, changes);
@@ -91,7 +90,7 @@ describe('ast utils', () => {
   });
 
   it('should add declarations to module when PropertyAssignment is StringLiteral', () => {
-    moduleContent = tags.stripIndents`
+    moduleContent = `
     import { BrowserModule } from '@angular/platform-browser';
     import { NgModule } from '@angular/core';
     import { AppComponent } from './app.component';
@@ -110,7 +109,7 @@ describe('ast utils', () => {
     const changes = addDeclarationToModule(source, modulePath, 'FooComponent', './foo.component');
     const output = applyChanges(modulePath, moduleContent, changes);
     expect(output).toMatch(/import { FooComponent } from '.\/foo.component';/);
-    expect(output).toMatch(/"declarations": \[\nAppComponent,\nFooComponent\n\]/);
+    expect(output).toMatch(/"declarations": \[\s*AppComponent,\s*FooComponent\s*\]/);
   });
 
   it('should add metadata', () => {

packages/schematics/angular/utility/standalone/rules.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { tags } from '@angular-devkit/core';
 import { Rule, SchematicsException, Tree, chain } from '@angular-devkit/schematics';
 import ts from '../../third_party/github.com/Microsoft/TypeScript/lib/typescript';
 import { addSymbolToNgModuleMetadata, insertAfterLastOccurrence } from '../ast-utils';
@@ -188,7 +187,7 @@ function insertStandaloneRootProvider(tree: Tree, mainFilePath: string, expressi
     return;
   }
 
-  const newAppConfig = `, {\n${tags.indentBy(2)`providers: [${expression}]`}\n}`;
+  const newAppConfig = `, {\n${' '.repeat(2)}providers: [${expression}]\n}`;
   let targetCall: ts.CallExpression;
 
   if (bootstrapCall.arguments.length === 1) {
@@ -240,7 +239,7 @@ function addProvidersExpressionToAppConfig(
       ),
     ]);
   } else {
-    const prop = tags.indentBy(2)`providers: [${expression}]`;
+    const prop = `${' '.repeat(2)}providers: [${expression}]`;
     let toInsert: string;
     let insertPosition: number;
 

packages/schematics/angular/web-worker/index.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { join, normalize, tags } from '@angular-devkit/core';
+import { join, normalize } from '@angular-devkit/core';
 import {
   Rule,
   SchematicContext,
@@ -51,18 +51,18 @@ function addSnippet(options: WebWorkerOptions): Rule {
 
     const siblingModulePath = `${options.path}/${siblingModules[0]}`;
     const logMessage = 'console.log(`page got message: ${data}`);';
-    const workerCreationSnippet = tags.stripIndent`
-      if (typeof Worker !== 'undefined') {
-        // Create a new
-        const worker = new Worker(new URL('./${options.name}.worker', import.meta.url));
-        worker.onmessage = ({ data }) => {
-          ${logMessage}
-        };
-        worker.postMessage('hello');
-      } else {
-        // Web Workers are not supported in this environment.
-        // You should add a fallback so that your program still executes correctly.
-      }
+    const workerCreationSnippet = `
+if (typeof Worker !== 'undefined') {
+  // Create a new
+  const worker = new Worker(new URL('./${options.name}.worker', import.meta.url));
+  worker.onmessage = ({ data }) => {
+    ${logMessage}
+  };
+  worker.postMessage('hello');
+} else {
+  // Web Workers are not supported in this environment.
+  // You should add a fallback so that your program still executes correctly.
+}
     `;
 
     // Append the worker creation snippet.