3

I created a simple new schematic using the angular schematics cli. This schematic takes as input a name, and generates a file in the tree. My files/ directory looks like:

src/
  app/
    __name@dasherize__.ts

I've built it, and then created a new angular project:

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

I then cd into the test-app directory and link to my sample schematic:

npm link ../schematics/sample-schematic

I then run my schematic:

ng g sample-schematic:sample

however I get the following error when I do so:

Pipe "dasherize" is not defined.

If I change the file name in my files directory to test.ts it works fine, and the file is created. I am guessing i am missing some import to use the various schematic functions in my test-app project. My dependancies and dev-dependancies for test-app looks like:

  "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",
    ...
  }
MarkD
  • 4,864
  • 5
  • 36
  • 67

2 Answers2

8

Please check this. It might probably help you.

Be sure to import strings

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

and then, pass strings to template engine, as below :

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

No need to assign functions to options. (and it all the case, it won't be good practice to change options variable).

With this, dasherize function will be available inside name and also template code.

Hope it will help you.

Thierry Falvo
  • 5,892
  • 2
  • 21
  • 39
1

I found a workaround, but it isn't really satisfying. If anyone has a better solution, I am all ears.

What I ended up doing- in the function where I set up my options/workspace, etc.. I added some code:

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

Then in my templates I can access dashName, theName, and Name for dashed, camelCase, and PascalCase respectively. Still not sure why the pipes aren't working in file names (or in the templates themselves), but this does get things working for now.

MarkD
  • 4,864
  • 5
  • 36
  • 67
  • Happen to me, my issue was a typo in files/ hello-__name@dashirize__.ts instead of hello-__name@dasherize__.ts. Now it works. – Damjan Dimitrioski Oct 21 '19 at 09:56
  • 1
    You should look at Thierry Falvo's answer, I believe the problem is that you weren't passing the strings class from @angular-devkit/core (which includes the dasherize function and others) to the template, so it had no idea what to do with the function call "dasherize" in the template name/file. – RocketMan May 06 '20 at 12:47