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

时间:2019-05-08 13:49:21

标签: angular angular-schematics

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

src/
  app/
    __name@dasherize__.ts

我已经构建了它,然后创建了一个新的角度项目:

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",
    ...
  }

2 个答案:

答案 0 :(得分:0)

我找到了一种解决方法,但这并不令人满意。如果有人有更好的解决方案,我将不知所措。

我最终所做的事情-在设置选项/工作区等的函数中。我添加了一些代码:

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

然后,在我的模板中,我可以分别为破折号,camelCase和PascalCase访问dashNametheNameName。仍然不确定为什么管道不能在文件名(或模板本身)中工作,但这确实可以使工作正常。

答案 1 :(得分:0)

请检查此内容。它可能会帮助您。

请确保导入strings

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

然后将strings传递给模板引擎,如下所示:

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

无需将功能分配给options。 (在所有情况下,更改options变量都不是一个好习惯)。

有了这个,dasherize函数将在名称以及模板代码中可用。

希望它会对您有所帮助。