NX自定义Schematics投影内容语法及模板TS错误排查

问题根源 #

• 直接在.ts文件里用<%= classify(name) %>：TS编译器会将其视为无效语法，抛出TS1139错误。
• 用__name@classify__作为类名：TS会把这个字符串当作非法标识符，触发“declaration expected”错误——因为NX的__xxx@transform__投影语法仅适用于非语法敏感的文本位置（比如selector、文件名），不能直接用于TS的类名、变量名这类语法节点。

正确解决方案 #

1. 重命名模板文件为EJS后缀

把你的component.ts模板文件改名为component.ts.ejs，让NX用EJS模板引擎解析它，避免TS提前校验无效语法。

2. 在EJS模板中使用正确的语法

在component.ts.ejs里用EJS的<%= %>语法插入动态类名，示例代码：

import { Component } from '@angular/core';

@Component({
  selector: '__name@dasherize__',
  templateUrl: './__name@dasherize__.component.html',
  styleUrls: ['./__name@dasherize__.component.css']
})
export class <%= classify(name) %>Component {
  // 组件逻辑代码
}

3. 确保生成器配置正确

在生成器的index.ts中，确保导入必要的工具函数，并且指向.ejs模板文件：

import { Tree, classify, dasherize, generateFiles } from '@nx/devkit';
import { join } from 'path';

export default async function (tree: Tree, schema: any) {
  const templatePath = join(__dirname, './files');
  generateFiles(tree, templatePath, schema.directory, {
    ...schema,
    classify,
    dasherize
  });
}

NX会自动将解析后的.ejs文件生成不带.ejs后缀的最终.ts文件。

额外注意事项 #

• 不要在TS语法节点（类名、函数名、变量名）中使用NX的__xxx@transform__投影语法，这类位置必须用EJS模板语法处理。
• 如果你不想用EJS后缀，也可以手动读取模板文件内容，通过字符串替换生成目标文件，但这种方式在处理复杂逻辑时灵活性较差。

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