Angular CLI自定义Schematics：如何修改environment.ts文件？

我之前做过类似的需求，核心是利用TypeScript的AST（抽象语法树）来安全地修改环境文件，而不是简单的字符串替换——后者很容易因为注释、格式差异等问题出错。下面是具体的实现步骤和实践经验：

核心思路 #

Angular的环境文件（environment.dev.ts/environment.prod.ts）本质是导出一个对象字面量的TypeScript文件，我们可以通过以下步骤修改它：

1. 定位并读取目标环境文件
2. 解析文件内容为TypeScript AST
3. 找到environment对象的定义节点
4. 在对象中添加（或修改）目标属性
5. 将修改后的AST转换回代码并写入文件

具体实现代码 #

下面是一个完整的schematics规则示例，你可以直接集成到你的自定义schematics中：

import { Tree, SchematicsException, Rule } from '@angular-devkit/schematics';
import * as ts from 'typescript';

/**
 * 修改指定环境文件，添加/更新属性
 * @param tree Schematics的文件树对象
 * @param filePath 环境文件路径
 * @param properties 要添加的键值对
 * @param overwrite 是否覆盖已存在的属性（默认false）
 */
function updateEnvironmentFile(
  tree: Tree, 
  filePath: string, 
  properties: Record<string, any>,
  overwrite = false
): void {
  // 读取文件内容
  const fileBuffer = tree.read(filePath);
  if (!fileBuffer) {
    throw new SchematicsException(`无法找到文件：${filePath}`);
  }

  const fileContent = fileBuffer.toString();
  const sourceFile = ts.createSourceFile(
    filePath,
    fileContent,
    ts.ScriptTarget.Latest,
    true
  );

  // 定位export const environment的变量声明节点
  const environmentNode = sourceFile.statements.find(
    (stmt): stmt is ts.VariableStatement => 
      ts.isVariableStatement(stmt) &&
      stmt.declarationList.declarations.some(
        decl => ts.isIdentifier(decl.name) && decl.name.text === 'environment'
      )
  );

  if (!environmentNode) {
    throw new SchematicsException(`文件${filePath}中未找到environment导出`);
  }

  const environmentDeclaration = environmentNode.declarationList.declarations[0];
  if (!ts.isObjectLiteralExpression(environmentDeclaration.initializer)) {
    throw new SchematicsException(`文件${filePath}中的environment不是对象字面量`);
  }

  // 收集已有属性名，避免重复添加（或决定是否覆盖）
  const existingPropertyNames = environmentDeclaration.initializer.properties.map(
    prop => (prop.name as ts.Identifier).text
  );

  // 创建新的属性节点
  const newProperties = Object.entries(properties).map(([key, value]) => {
    // 根据值的类型创建对应的AST节点
    let valueNode: ts.Expression;
    if (typeof value === 'string') {
      valueNode = ts.factory.createStringLiteral(value);
    } else if (typeof value === 'number') {
      valueNode = ts.factory.createNumericLiteral(value.toString());
    } else if (typeof value === 'boolean') {
      valueNode = value ? ts.factory.createTrue() : ts.factory.createFalse();
    } else {
      // 如果是对象/数组，可以递归处理，这里简化为JSON字符串
      valueNode = ts.factory.createStringLiteral(JSON.stringify(value));
    }

    return ts.factory.createPropertyAssignment(
      ts.factory.createIdentifier(key),
      valueNode
    );
  })
  // 过滤已存在的属性（如果不覆盖的话）
  .filter((prop) => {
    const propName = (prop.name as ts.Identifier).text;
    return overwrite || !existingPropertyNames.includes(propName);
  });

  // 替换原有的对象字面量
  const updatedObjectLiteral = ts.factory.createObjectLiteralExpression(
    [...environmentDeclaration.initializer.properties, ...newProperties],
    true // 保留原有格式的换行和缩进
  );

  const updatedDeclaration = ts.factory.updateVariableDeclaration(
    environmentDeclaration,
    environmentDeclaration.name,
    environmentDeclaration.type,
    updatedObjectLiteral
  );

  const updatedDeclarationList = ts.factory.updateVariableDeclarationList(
    environmentNode.declarationList,
    [updatedDeclaration]
  );

  const updatedStatement = ts.factory.updateVariableStatement(
    environmentNode,
    environmentNode.modifiers,
    updatedDeclarationList
  );

  // 将修改后的节点转换为代码字符串
  const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
  const updatedContent = printer.printNode(
    ts.EmitHint.Unspecified,
    updatedStatement,
    sourceFile
  );

  // 替换原文件中的对应内容
  const fullUpdatedContent = fileContent.replace(
    sourceFile.text.substring(environmentNode.getStart(), environmentNode.getEnd()),
    updatedContent
  );

  // 写回文件
  tree.overwrite(filePath, fullUpdatedContent);
}

// 你的自定义schematics规则
export function addEnvironmentProperties(): Rule {
  return (tree: Tree) => {
    // 定义要添加的环境属性
    const devEnvProps = {
      apiBaseUrl: 'http://localhost:3000/api',
      enableDebugMode: true,
      featureFlags: {
        newDashboard: true,
        darkMode: false
      }
    };

    const prodEnvProps = {
      apiBaseUrl: 'https://api.yourdomain.com',
      enableDebugMode: false,
      featureFlags: {
        newDashboard: true,
        darkMode: true
      }
    };

    // 修改开发环境文件
    updateEnvironmentFile(tree, 'src/environments/environment.dev.ts', devEnvProps);
    // 修改生产环境文件，允许覆盖已存在的属性
    updateEnvironmentFile(tree, 'src/environments/environment.prod.ts', prodEnvProps, true);

    return tree;
  };
}

实践注意事项 #

• 优先使用AST操作：字符串替换虽然简单，但面对复杂的文件格式（比如带注释、多行属性）很容易出错，AST操作能保证代码结构的完整性。
• 处理不同类型的属性值：上面的代码支持字符串、数字、布尔值，以及简单的对象/数组（转为JSON字符串），如果需要更复杂的对象结构，可以递归创建AST节点。
• 可配置文件路径：如果你的项目环境文件路径不是默认的src/environments/，可以通过schematics的schema让用户自定义路径，提高通用性。
• 测试验证：使用Angular Schematics的测试工具（比如SchematicTestRunner）模拟文件树，验证修改后的文件内容是否符合预期。
• 处理重复属性：通过overwrite参数控制是否覆盖已存在的属性，避免意外修改用户已配置的内容。

内容的提问来源于stack exchange，提问作者Chitra Sharathchandra