Angular(7) 扩展原理图

Posted 2023-03-13

【中文标题】Angular(7) 扩展原理图

【英文标题】：Angular(7) extending schematics

【发布时间】：2019-03-27 11:51:03

【问题描述】：

我有几个组件，我写了一些安装这些组件的示意图。为了便于维护，我的原理图放在单独的包中。

将我的原理图从 Angular6 合并到 Angular7 后，找不到我的原理图。

所以在我的组件的“package.json”中：

  "name": "@my-project/my-component",
  "version": "4.0.0",
  "dependencies": 
    "@my-project/schematics": "^2.0.0",
    "tslib": "^1.9.0"
  ,
  "peerDependencies": 
    "@angular/common": "^7.0.0",
    "@angular/core": "^7.0.0"
  ,
  "schematics": "./schematics/collection.json",

在“./schematics/collection.json”中：

  "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": 
    "ng-add": 
      "extends" : "@my-project/schematics:my-component-install"
    
  

@my-project/schematics 的“collections.json”：

  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": 
      "my-component-install": 
      "description": "Schematics for installation of @my-project/my-component",
      "schema": "./my-component/install/schema.json",
      "factory": "./my-component/install/index"
    
  

因此，当执行“ng add @my-project/my-component”时，我收到消息：“在集合“@my-project/my-comonent”中找不到示意图“my-component-install”。但是在 Angular6 中这行得通。

谁能告诉我如何解决这个问题？

【参考方案1】：

我对你的结构有点困惑，但我会尽力而为—— 因此，如果您有原理图，可以说“my-schematics”，它有“ng-add”作为原理图。 “my-schematics”扩展了角度示意图，因此它可以做任何角度示意图可以做的事情，但需要额外的逻辑。 这就是“my-schematics”的 collection.json 的样子 -

    “$schema”:.....
    “extends”: [
        “@schematics/angular”
    ],
    “schematics”: 
        “ng-add”:  
            “description”:.., “factory”:..., “schema”:...
         
     

现在在您的项目中，您可以调用 my-schematics:ng-add （还有 my-schematics:component 或任何其他角度原理图函数）

【讨论】：

我正在尝试这种方法，但我不断收到一个错误消息，指出错误：在 Object.getWorkspace (~\node_modules\@schematics\angular\utility\config.js:22 找不到 (未定义) :15) 有什么想法吗？

它成功了，感谢 Chhirag，我正在尝试调试它，但我错过了 angular.json 文件以使命令正常运行。

@Joe Walker 很高兴它对您有用，对于迟到的回复深表歉意。将此标记为正确答案会有所帮助；）