如何在项目中直接使用未发布的Angular Schematics

核心疑问解答 #

1. 不能不构建就使用Schematics
   Angular CLI仅支持执行编译后的JavaScript代码，TypeScript编写的Schematics源码无法直接被CLI解析运行，必须先完成构建。

2. 构建后通过本地关联或路径引用使用
   以下是具体实现步骤：

一、配置Schematics的基础结构 #

在projects/lib-common/schematics目录下完成基础配置：

• 初始化package.json：

  npm init -y
  

• 安装依赖（仅在schematics目录下执行）：

  npm install @angular-devkit/schematics-cli @schematics/angular typescript --save-dev
  

• 创建tsconfig.json，参考Angular Schematics模板配置，指定编译输出目录（比如../../dist/lib-common/schematics）
• 在package.json中添加构建脚本：

  "scripts": {
    "build": "tsc -p tsconfig.json"
  }
  

• 确保package.json中配置schematics字段，指向构建后的核心配置文件：

  "schematics": "./collection.json"
  

二、构建Schematics #

进入projects/lib-common/schematics目录，执行构建：

npm run build

编译后的文件会输出到你指定的dist子目录。

三、在目标库中使用Schematics #

方式1：本地npm链接（适合频繁修改调试） #

1. 进入构建后的Schematics目录（如dist/lib-common/schematics），执行：

   npm link
   

2. 进入目标库目录（如projects/lib-user），关联本地Schematics包：

   npm link [你的schematics包名]
   

   这里的包名是projects/lib-common/schematics/package.json中的name字段值。
3. 在目标库的angular.json中添加Schematics配置：
   找到projects.lib-user.architect.generate.schematics节点，添加：

   "schematics": {
     "@[你的schematics包名]:component": {
       "prefix": "lib-user"
       // 自定义组件前缀等配置
     }
   }
   

4. 执行生成命令：

   ng generate @[你的schematics包名]:component [组件名]
   

方式2：直接本地路径引用（适合稳定后的使用） #

在目标库（如projects/lib-user）的package.json中添加本地依赖：

"devDependencies": {
  "[你的schematics包名]": "file:../../dist/lib-common/schematics"
}

执行npm install后，重复方式1的步骤3和4即可使用。

注意事项 #

• 每次修改Schematics源码后，必须重新执行构建命令，确保CLI调用的是最新编译后的代码。
• 每个库的package.json和angular.json独立配置，需分别为需要使用Schematics的库完成上述关联步骤。

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