Custom Schematics fail when using schematic functions inside templates

fen89 commented 5 years ago

Expected Behavior

Please describe the behavior you are expecting

Custom Schematics should be able to generate template files.

Current Behavior

What is the current behavior?

While using template files with schematic functions like classify, dasherize, etc. in custom schematics I am getting typescript errors, e.g:

TS1128: Declaration or statement expected.
TS1109: Expression expected.

If I am just using static files the custom schematics do work.

Steps to Reproduce

I am having the same problem like #728 generating a custom schematic. I tested it with a clean nx project, getting the same error.

Steps to reproduce:

Generate new nx workspace
ng generate @nrwl/schematics:workspace-schematic akita-store

Context

package.json

{
  "name": "schematics-testing",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "./node_modules/.bin/nx lint && ng lint",
    "e2e": "ng e2e",
    "affected:apps": "./node_modules/.bin/nx affected:apps",
    "affected:libs": "./node_modules/.bin/nx affected:libs",
    "affected:build": "./node_modules/.bin/nx affected:build",
    "affected:e2e": "./node_modules/.bin/nx affected:e2e",
    "affected:test": "./node_modules/.bin/nx affected:test",
    "affected:lint": "./node_modules/.bin/nx affected:lint",
    "affected:dep-graph": "./node_modules/.bin/nx affected:dep-graph",
    "format": "./node_modules/.bin/nx format:write",
    "format:write": "./node_modules/.bin/nx format:write",
    "format:check": "./node_modules/.bin/nx format:check",
    "update": "ng update @nrwl/schematics",
    "update:check": "ng update",
    "workspace-schematic": "./node_modules/.bin/nx workspace-schematic",
    "dep-graph": "./node_modules/.bin/nx dep-graph",
    "help": "./node_modules/.bin/nx help"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.0.0",
    "@angular/common": "^7.0.0",
    "@angular/compiler": "^7.0.0",
    "@angular/core": "^7.0.0",
    "@angular/forms": "^7.0.0",
    "@angular/platform-browser": "^7.0.0",
    "@angular/platform-browser-dynamic": "^7.0.0",
    "@angular/router": "^7.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "^0.8.26",
    "@nrwl/nx": "7.0.2",
    "@ngrx/effects": "6.1.0",
    "@ngrx/router-store": "6.1.0",
    "@ngrx/store": "6.1.0"
  },
  "devDependencies": {
    "@angular/cli": "7.0.1",
    "@angular/compiler-cli": "^7.0.0",
    "@angular/language-service": "^7.0.0",
    "@angular-devkit/build-angular": "~0.10.0",
    "@ngrx/store-devtools": "6.1.0",
    "ngrx-store-freeze": "0.2.4",
    "@nrwl/schematics": "7.0.2",
    "jasmine-marbles": "0.4.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.3",
    "prettier": "1.13.7"
  }
}

Added a new schematic via ng generate @nrwl/schematics:workspace-schematic akita-store

Updated the index.ts file:

import { chain, externalSchematic, Rule, SchematicContext, Tree, url, apply, template, mergeWith } from '@angular-devkit/schematics';
import { strings } from "@angular-devkit/core";

function generateFilesFromTemplates(options: any) : Rule {
  return (tree: Tree, context: SchematicContext) => {
    const sourceTemplates = url('./files');
    const sourceParametrizedTemplates = apply(sourceTemplates, [
      template({
        ...options,
        ...strings
      })
    ]);

    const rule = mergeWith(sourceParametrizedTemplates);
    return rule;
  }
}

export default function(options: any): Rule {
  return chain([
    generateFilesFromTemplates(options),
     externalSchematic('@nrwl/schematics', 'lib', {
       name: options.name
     })
  ]);
}

My folder structure:

tools -- schematics --- akita-store ---- files ----- +state ------ name@dasherize.model.ts ----- index.ts ----- schema.json

With the following context inside __name@dasherize__.model.ts:

export interface <%= classify(name) %> {

}

Using the following command to generate that workspace: npm run workspace-schematic -- akita-store store-test resulting in the following error:

> nx workspace-schematic "akita-store" "store-test" "--dry-run"

tools/schematics/akita-store/files/+state/__name@dasherize__.model.ts:1:1 - error TS1128: Declaration or statement expected.

1 export interface <%= classify(name) %> {
  ~~~~~~

tools/schematics/akita-store/files/+state/__name@dasherize__.model.ts:1:19 - error TS1109: Expression expected.

1 export interface <%= classify(name) %> {
                    ~~

tools/schematics/akita-store/files/+state/__name@dasherize__.model.ts:1:38 - error TS1109: Expression expected.

1 export interface <%= classify(name) %> {
                                       ~

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-schematics workspace-schematic: `nx workspace-schematic "akita-store" "store-test" "--dry-run"`
npm ERR! Exit status 1

If I change the content of the __name@dasherize__.model.ts to be static, e.g:

export interface TestModel {

}

I am getting the following error:

error TS2688: Cannot find type definition file for 'jasmine'.

After installing @types/jasmine the command npm run workspace-schematic -- akita-store store-test runs through:

> nx workspace-schematic "akita-store" "store-test" "--dry-run"

? In which directory should the library be generated?
? What framework should this library use? Typescript [ https://www.typescriptlang.org/ ]
? Which stylesheet format would you like to use? CSS
? Which tags would you like to add to the library? (used for linting)
? Which Unit Test Runner would you like to use for the library? Jest [https://jestjs.io/]
create +state/store-test.model.js (133 bytes)
create +state/store-test.model.js.map (196 bytes)
create +state/store-test.model.ts (31 bytes)
create libs/store-test/README.md (1018 bytes)
create libs/store-test/tsconfig.lib.json (460 bytes)
create libs/store-test/tslint.json (52 bytes)
create libs/store-test/src/index.ts (0 bytes)
create libs/store-test/src/lib/.gitkeep (0 bytes)
create libs/store-test/tsconfig.json (123 bytes)
create libs/store-test/tsconfig.spec.json (215 bytes)
create libs/store-test/jest.config.js (132 bytes)
update angular.json (15795 bytes)
update nx.json (1070 bytes)
update tsconfig.json (1593 bytes)
update package.json (3448 bytes)

Please let me know if you need any additional information!

fen89 commented 5 years ago

It was a mistake by myself: I already thought that this has something to do with the typescript compiler itself, but I didn't check completely.

Solution was just to exclude the files- directory inside the root tsconfig.json:

...
  "exclude": [
    "node_modules",
    "tmp",
    "**/files/**"
  ]
...

Then everything is working as expected.

joelkesler commented 3 years ago

Thanks! This was helpful

github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx