自定义角度示意图：管道“dasherize”未定义。在角度项目上运行时

Posted 2023-03-13

【中文标题】自定义角度示意图：管道“dasherize”未定义。在角度项目上运行时

【英文标题】：Custom Angular Schematic: Pipe "dasherize" is not defined. when run on angular project

【发布时间】：2019-09-26 06:46:28

【问题描述】：

我使用角度原理图 cli 创建了一个简单的新原理图。该示意图将名称作为输入，并在树中生成一个文件。我的files/ 目录如下所示：

src/
  app/
    __name@dasherize__.ts

我已经构建了它，然后创建了一个新的 Angular 项目：

ng new test-app --routing --style css

然后我 cd 进入 test-app 目录并链接到我的示例示意图：

npm link ../schematics/sample-schematic

然后我运行我的原理图：

ng g sample-schematic:sample

但是，当我这样做时，我得到了以下错误：

Pipe "dasherize" is not defined. 

如果我将files 目录中的文件名更改为test.ts，它可以正常工作，并创建文件。我猜我缺少一些导入来使用我的测试应用项目中的各种原理图功能。我对test-app 的依赖和开发依赖看起来像：

  "dependencies": 
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    ...
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular-devkit/core": "^7.3.9",
    "@angular-devkit/schematics": "^7.3.9",
    "@angular-devkit/schematics-cli": "^0.13.9",
    "@angular/cli": "~7.3.9",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@schematics/angular": "^7.3.9",
    ...
  

【参考方案1】：

我找到了一种解决方法，但它并不令人满意。如果有人有更好的解决方案，我会全力以赴。

我最终做了什么——在我设置选项/工作区等的函数中。我添加了一些代码：

options.dashName = dasherize(options.name);
options.theName = camelize(options.name);
options.Name = classify(options.name);

然后在我的模板中，我可以分别访问dashName、theName 和Name 的虚线、驼峰式和PascalCase。仍然不确定为什么管道不能在文件名（或模板本身）中工作，但这确实让事情现在正常工作。

【讨论】：

发生在我身上，我的问题是文件/[e-mail] 中的拼写错误，而不是 [e-mail] .现在可以了。

您应该看看 Thierry Falvo 的回答，我相信问题在于您没有将字符串类从 @angular-devkit/core（包括 dasherize 函数和其他函数）传递给模板，所以它不知道如何处理模板名称/文件中的函数调用“dasherize”。

【参考方案2】：

请检查这个。也许对你有帮助。

一定要导入strings

import  strings  from '@angular-devkit/core';

然后，将strings 传递给模板引擎，如下：

const sourceParametrizedTemplates = apply(sourceTemplates, [
  template(
    ...options,
    ...strings,
  )
]);

无需将功能分配给options。 （无论如何，更改 options 变量不是一个好习惯。

这样，dasherize 函数将在名称和模板代码中可用。

希望对你有所帮助。