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

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/component/index.ts

@@ -9,8 +9,6 @@
 import {
   FileOperator,
   Rule,
-  SchematicsException,
-  Tree,
   apply,
   applyTemplates,
   chain,

packages/schematics/angular/pipe/index.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { Rule, Tree, chain, strings } from '@angular-devkit/schematics';
+import { chain, strings } from '@angular-devkit/schematics';
 import { addDeclarationToNgModule } from '../utility/add-declaration-to-ng-module';
 import { findModuleFromOptions } from '../utility/find-module';
 import { generateFromFiles } from '../utility/generate-from-files';

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

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { join, normalize, tags } from '@angular-devkit/core';
 import {
   Rule,
   SchematicContext,
@@ -19,7 +18,8 @@ import {
   move,
   url,
 } from '@angular-devkit/schematics';
-import * as ts from '../third_party/github.com/Microsoft/TypeScript/lib/typescript';
+import { join } from 'node:path/posix';
+import ts from '../third_party/github.com/Microsoft/TypeScript/lib/typescript';
 import { addDependency, addRootProvider, writeWorkspace } from '../utility';
 import { addSymbolToNgModuleMetadata, insertImport } from '../utility/ast-utils';
 import { applyToUpdateRecorder } from '../utility/change';
@@ -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
@@ -116,7 +116,7 @@ export default createProjectSchematic<ServiceWorkerOptions>(
 
     const buildOptions = buildTarget.options as Record<string, string | boolean>;
     const browserEntryPoint = await getMainFilePath(tree, options.project);
-    const ngswConfigPath = join(normalize(project.root), 'ngsw-config.json');
+    const ngswConfigPath = join(project.root, 'ngsw-config.json');
 
     if (
       buildTarget.builder === Builders.Application ||

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 } from '@angular-devkit/core';
 import {
   Rule,
   SchematicContext,
@@ -18,9 +18,10 @@ import {
   mergeWith,
   move,
   schematic,
+  strings,
   url,
 } from '@angular-devkit/schematics';
-import { posix } from 'node:path';
+import { join } from 'node:path/posix';
 import { Schema as ServerOptions } from '../server/schema';
 import {
   DependencyType,
@@ -84,7 +85,7 @@ async function getApplicationBuilderOutputPaths(
 
   let { outputPath } = architectTarget.options;
   // Use default if not explicitly specified
-  outputPath ??= posix.join('dist', projectName);
+  outputPath ??= join('dist', projectName);
 
   const defaultDirs = {
     server: DEFAULT_SERVER_DIR,
@@ -122,7 +123,7 @@ function addScriptsRule({ project }: SSROptions, isUsingApplicationBuilder: bool
     if (isUsingApplicationBuilder) {
       const { base, server } = await getApplicationBuilderOutputPaths(host, project);
       pkg.scripts ??= {};
-      pkg.scripts[`serve:ssr:${project}`] = `node ${posix.join(base, server)}/server.mjs`;
+      pkg.scripts[`serve:ssr:${project}`] = `node ${join(base, server)}/server.mjs`;
     } else {
       const serverDist = await getLegacyOutputPaths(host, project, 'server');
       pkg.scripts = {
@@ -184,7 +185,7 @@ function updateApplicationBuilderWorkspaceConfigRule(
       if (outputPath.browser === '') {
         const base = outputPath.base as string;
         logger.warn(
-          `The output location of the browser build has been updated from "${base}" to "${posix.join(
+          `The output location of the browser build has been updated from "${base}" to "${join(
             base,
             DEFAULT_BROWSER_DIR,
           )}".
@@ -207,7 +208,7 @@ function updateApplicationBuilderWorkspaceConfigRule(
       outputPath,
       outputMode: 'server',
       ssr: {
-        entry: join(normalize(projectSourceRoot), 'server.ts'),
+        entry: join(projectSourceRoot, 'server.ts'),
       },
     };
   });
@@ -226,7 +227,7 @@ function updateWebpackBuilderWorkspaceConfigRule(
 
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const serverTarget = project.targets.get('server')!;
-    (serverTarget.options ??= {}).main = posix.join(projectSourceRoot, 'server.ts');
+    (serverTarget.options ??= {}).main = join(projectSourceRoot, 'server.ts');
 
     const serveSSRTarget = project.targets.get(SERVE_SSR_TARGET_NAME);
     if (serveSSRTarget) {
@@ -364,7 +365,7 @@ export default createProjectSchematic<SSROptions>(async (options, { project, tre
   const isStandalone = isStandaloneApp(tree, browserEntryPoint);
 
   const usingApplicationBuilder = isUsingApplicationBuilder(project);
-  const sourceRoot = project.sourceRoot ?? posix.join(project.root, 'src');
+  const sourceRoot = project.sourceRoot ?? join(project.root, 'src');
 
   return chain([
     schematic('server', {

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,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { join, normalize, tags } from '@angular-devkit/core';
 import {
   Rule,
   SchematicContext,
@@ -21,6 +20,7 @@ import {
   strings,
   url,
 } from '@angular-devkit/schematics';
+import { join } from 'node:path/posix';
 import { parseName } from '../utility/parse-name';
 import { relativePathToWorkspaceRoot } from '../utility/paths';
 import { createProjectSchematic } from '../utility/project';
@@ -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.
@@ -111,7 +111,7 @@ export default createProjectSchematic<WebWorkerOptions>((options, { project }) =
         throw new Error(`Build target is not defined for this project.`);
       }
 
-      const workerConfigPath = join(normalize(root), 'tsconfig.worker.json');
+      const workerConfigPath = join(root, 'tsconfig.worker.json');
       (buildTarget.options ??= {}).webWorkerTsConfig ??= workerConfigPath;
       if (testTarget) {
         (testTarget.options ??= {}).webWorkerTsConfig ??= workerConfigPath;