What is the proper syntax for projecting content into a custom schematic?

When building my components I always copy and paste a comment at the top of my files to itemize all the specs and user stories as I think and build them out, something like as follows

/*


Some Component Name

PURPOSE :

VIEWS :

ELEMENTS :

INTERACTIVITY :

GETS DATA FROM :

SENDS DATA TO :

USER STORIES :


*/


I've been wanting to dive deeper into the capabilities of NX so I figured a good introduction would be to make my own schematics for components, services, directives etc. because I have slightly different things I like to list like for example, why would I want to itemize views and elements in a service file or list interactions with a back end in a component file?

I successfully generated a plugin library in my libs folder by running

nx g @nx/workspacelugin libs/my-plugin
​

Then I created a new generator by running

nx g @nx/workspace:generator libs/my-plugin/src/generators/my-component-generator/my-component-generator
​

Once that completed I had to manually create a component folder and manually create the files I want to generate using some type of projection syntax. The file names are

// I'm using a code container here because the __ just makes the text bold
// in the post.


__name@dasherize__.component.ts
__name@dasherize__.component.spec.ts
__name@dasherize__.component.html
__name@dasherize__.component.css


So far I only tried defining the component.ts file which looks like this

import { Component } from '@angular/core';





@Component({
selector : 'app-__name@dasherize__',
templateUrl : './__name@dasherize__.component.html',
styleUrls : [ './__name@dasherize__.component.css' ]
})

export class <%= classify(name) %>Component {}


The <%= classify(name) %> part is causing a ts 1139 error with the <%= %> part and saying name is deprecated on the name part. I tried looking deeper into how to do this and saw another method using __name@classify__ and got an error saying declaration expected. I came across other examples where instead of using __name@dasherize__ they used <%= dasherize(name) %>

In my index.ts.template file I have this

const variable = "<%= name %>";


so I tried doing

export class <%= name =>Component {}


and I'm still getting a red squiggly line. Can someone help me figure out how to get this working?

Continue reading...