如何在自定义Nx生成器中生成Angular应用？

我来帮你搞定这个问题！你说得对，@nrwl/workspace里确实没有专门的Angular应用生成器——因为Angular相关的生成逻辑都封装在@nrwl/angular包中。下面是具体的实现步骤，帮你在现有自定义生成器中添加应用生成功能：

1. 确保依赖已安装 #

如果你的仓库还没安装@nrwl/angular，先执行以下命令安装（如果已经装过可以跳过）：

npm install @nrwl/angular --save-dev
# 或者用yarn
yarn add @nrwl/angular --dev

2. 修改自定义生成器代码 #

你只需要导入@nrwl/angular中的applicationGenerator，然后添加一个生成应用的辅助函数，最后在主生成器中调用它即可。以下是完整的修改后代码：

import { Tree, formatFiles } from '@nrwl/devkit';
import { libraryGenerator } from '@nrwl/workspace';
// 导入Angular应用生成器
import { applicationGenerator } from '@nrwl/angular';

// 假设你的App schema接口是这样的（如果已有可以保留）
interface App {
  system: string;
  name: string;
  scope: string;
  // 可以根据需要添加应用相关的可选参数，比如style、routing等
  style?: string;
  routing?: boolean;
}

export default async function (host: Tree, schema: App) {
  // 先生成应用，再生成配套库，保持结构一致性
  await generateApplication(host, schema);
  await generateLibrary(host, schema, 'models', 'domain');
  await generateLibrary(host, schema, 'data-access', 'data');
  await formatFiles(host);
}

async function generateApplication(host: Tree, schema: App) {
  const directory = `${schema.system.toLowerCase()}/${schema.name}`;
  await applicationGenerator(host, {
    // 应用名称
    name: schema.name,
    // 存放目录，和你的库保持一致的层级结构
    directory,
    // 开启严格模式，和库的配置统一
    strict: true,
    // 代码检查器，和库保持一致用eslint
    linter: 'eslint',
    // 路由配置，默认开启，可通过schema参数自定义
    routing: schema.routing ?? true,
    // 样式格式，默认用scss，可按需修改为css/less等
    style: schema.style ?? 'scss',
    // 标签规则，和库的标签逻辑统一，方便后续筛选
    tags: `type:app, scope:${schema.scope}`,
    // 可选：如果使用Angular 14+，可以开启独立组件模式
    standalone: false,
  });
}

async function generateLibrary(
  host: Tree,
  schema: App,
  libraryName: string,
  type: string
) {
  const directory = `${schema.system.toLowerCase()}/${schema.name}`;
  const importPath = `@org/${schema.system.toUpperCase()}/${ schema.name }/${libraryName}`;
  await libraryGenerator(host, {
    name: libraryName,
    directory,
    importPath,
    linter: 'eslint',
    simpleModuleName: true,
    strict: true,
    tags: `type:${type}, scope:${schema.scope}`,
  });
}

3. 关键配置说明 #

• 目录结构一致性：应用的directory参数和库保持相同的${system}/${name}结构，让整个仓库的代码组织更规整。
• 标签（Tags）：为应用设置type:app标签，和库的type:domain、type:data区分开，方便后续用Nx的标签筛选功能快速定位代码。
• 参数可扩展性：你可以根据团队需求，在App接口中添加更多可选参数（比如unitTestRunner、e2eTestRunner等），让生成器更贴合实际开发流程。
• 执行顺序：先生成应用再生成库，Nx会自动处理应用与库之间的依赖关系，后续开发中可以直接在应用里引用同目录下的库代码。

这样修改后，你的自定义生成器就能一键生成Angular应用+配套的domain/data库了，完全符合你的需求！

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