如何在Angular 14原理图中修改bootstrapApplication配置

当然可以实现，你可以通过自定义Angular原理图来完成这个需求，核心是操作AST（抽象语法树）修改main.ts中的bootstrapApplication配置，具体步骤如下：

1. 创建自定义原理图项目 #

用Angular CLI生成一个基础的原理图项目：

ng generate schematic add-module-config

2. 定位并修改bootstrapApplication调用 #

在原理图的index.ts中，通过AST解析找到目标代码节点，然后添加新模块（包括带forRoot配置的模块）：

import { Rule, SchematicContext, Tree, SchematicsException } from '@angular-devkit/schematics';
import * as ts from 'typescript';
import { getSourceFile, insertImport } from '@schematics/angular/utility/ast-utils';

export function addModuleConfig(): Rule {
  return (tree: Tree, context: SchematicContext) => {
    const mainPath = '/src/main.ts';
    const content = tree.read(mainPath);
    if (!content) throw new SchematicsException('未找到main.ts文件');

    const sourceFile = getSourceFile(tree, mainPath);
    // 定位bootstrapApplication函数调用
    const bootstrapCall = sourceFile.statements
      .filter(s => ts.isExpressionStatement(s))
      .map(s => (s as ts.ExpressionStatement).expression)
      .find(e => 
        ts.isCallExpression(e) && 
        e.expression.getText() === 'bootstrapApplication'
      ) as ts.CallExpression;

    if (!bootstrapCall) throw new SchematicsException('未找到bootstrapApplication调用');

    // 获取bootstrapApplication的配置参数对象
    const configArg = bootstrapCall.arguments[1];
    if (!configArg || !ts.isObjectLiteralExpression(configArg)) {
      throw new SchematicsException('bootstrapApplication配置参数格式不符合预期');
    }

    // 找到providers数组中的importProvidersFrom调用
    const providersProp = configArg.properties.find(p => 
      ts.isPropertyAssignment(p) && p.name.getText() === 'providers'
    ) as ts.PropertyAssignment;
    const providersArray = providersProp.initializer as ts.ArrayLiteralExpression;
    const importProvidersCall = providersArray.elements.find(e => 
      ts.isCallExpression(e) && e.expression.getText() === 'importProvidersFrom'
    ) as ts.CallExpression;

    // 构造BrowserAnimationsModule节点
    const browserAnimationsNode = ts.createIdentifier('BrowserAnimationsModule');
    // 构造带forRoot配置的EmployeeLookupModule节点
    const employeeConfig = ts.createObjectLiteral([
      ts.createPropertyAssignment('url', ts.createStringLiteral('https://www.example.com/employee'))
    ]);
    const employeeModuleNode = ts.createCall(
      ts.createPropertyAccess(ts.createIdentifier('EmployeeLookupModule'), 'forRoot'),
      undefined,
      [employeeConfig]
    );

    // 将新模块添加到importProvidersFrom的参数列表
    importProvidersCall.arguments.push(browserAnimationsNode, employeeModuleNode);

    // 添加模块的导入语句
    let updatedSource = insertImport(
      sourceFile,
      mainPath,
      'BrowserAnimationsModule',
      '@angular/platform-browser/animations'
    );
    updatedSource = insertImport(
      updatedSource,
      mainPath,
      'EmployeeLookupModule',
      './path/to/employee-lookup.module' // 替换为实际模块路径
    );

    // 写入修改后的内容
    tree.overwrite(mainPath, updatedSource.getFullText());
    return tree;
  };
}

3. 测试并使用原理图 #

完成原理图编写后，打包并通过CLI命令执行：

ng run your-project-name:add-module-config

执行后，main.ts中的bootstrapApplication配置会自动更新为你需要的格式。

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