Schematics template syntax errors should point to the offending template

Open
#13,192 0 comments 14 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
angular, typescript
Domain
cli, tooling

Research direction

Reproduce the malformed template expression with schematics run in --debug, then start from the template.js locations shown in the stack trace, especially @angular-devkit/core/src/utils/template.js and @angular-devkit/schematics/src/rules/template.js. Done means syntax errors identify the offending template and, if feasible, its line rather than only reporting a generic parser location.

Written by the indexing model from the issue text.

Description

area: @angular-devkit/schematics freq1: low severity3: broken type: bug/fix
Bug Report or Feature Request (mark with an x)
- [ ] bug report -> please search issues before submitting
- [x] feature request
Repro steps
  • Have a syntax error in your template.
  • Run the schematic with --debug, and get a stack trace that points to schematics code, but that doesn't point to any of your own code.
The log given by the failure

This is easier to handle when you when the syntax error is something simple like misspelling a variable name, e.g. you pass in template variable foobar and have a template with <%= foobat %>:

An error occured:
ReferenceError: foobat is not defined
    at eval (eval at template (/usr/local/google/home/nsidhom/schematics/pantheon/node_modules/@angular-devkit/schematics/node_modules/@angular-devkit/core/src/utils/template.js:257:16), <anonymous>:22:18)
    at /usr/local/google/home/nsidhom/schematics/pantheon/node_modules/@angular-devkit/schematics/src/rules/template.js:35:79
    at tree.visit (/usr/local/google/home/nsidhom/schematics/pantheon/node_modules/@angular-devkit/schematics/src/rules/base.js:130:30)
    at files.forEach.path (/usr/local/google/home/nsidhom/.nvm/versions/node/v10.1.0/lib/node_modules/@angular-devkit/schematics-cli/node_modules/@angular-devkit/schematics/src/tree/virtual.js:131:40)
    at Array.forEach (<anonymous>)
    at FileSystemCreateTree.visit (/usr/local/google/home/nsidhom/.nvm/versions/node/v10.1.0/lib/node_modules/@angular-devkit/schematics-cli/node_modules/@angular-devkit/schematics/src/tree/virtual.js:131:24)
    at /usr/local/google/home/nsidhom/schematics/pantheon/node_modules/@angular-devkit/schematics/src/rules/base.js:126:14
    at MergeMapSubscriber.input.pipe.operators_1.mergeMap.inputTree [as project] (/usr/local/google/home/nsidhom/schematics/pantheon/node_modules/@angular-devkit/schematics/src/rules/call.js:77:24)
    at MergeMapSubscriber._tryNext (/usr/local/google/home/nsidhom/schematics/pantheon/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:65:27)
    at MergeMapSubscriber._next (/usr/local/google/home/nsidhom/schematics/pantheon/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:55:18)

But if you have a syntax error such as putting an unintended second symbol within the brackets like <%= foobar unintended %>, then you just get SyntaxError: Unexpected identifier, which could be anywhere and is hard to hunt down:

An error occured:
SyntaxError: Unexpected identifier
    at Function (<anonymous>)
    at Object.template (/usr/local/google/home/nsidhom/schematics/pantheon/node_modules/@angular-devkit/schematics/node_modules/@angular-devkit/core/src/utils/template.js:257:16)
    at /usr/local/google/home/nsidhom/schematics/pantheon/node_modules/@angular-devkit/schematics/src/rules/template.js:35:40
    at tree.visit (/usr/local/google/home/nsidhom/schematics/pantheon/node_modules/@angular-devkit/schematics/src/rules/base.js:130:30)
    at files.forEach.path (/usr/local/google/home/nsidhom/.nvm/versions/node/v10.1.0/lib/node_modules/@angular-devkit/schematics-cli/node_modules/@angular-devkit/schematics/src/tree/virtual.js:131:40)
    at Array.forEach (<anonymous>)
    at FileSystemCreateTree.visit (/usr/local/google/home/nsidhom/.nvm/versions/node/v10.1.0/lib/node_modules/@angular-devkit/schematics-cli/node_modules/@angular-devkit/schematics/src/tree/virtual.js:131:24)
    at /usr/local/google/home/nsidhom/schematics/pantheon/node_modules/@angular-devkit/schematics/src/rules/base.js:126:14
    at MergeMapSubscriber.input.pipe.operators_1.mergeMap.inputTree [as project] (/usr/local/google/home/nsidhom/schematics/pantheon/node_modules/@angular-devkit/schematics/src/rules/call.js:77:24)
    at MergeMapSubscriber._tryNext (/usr/local/google/home/nsidhom/schematics/pantheon/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:65:27)
Desired functionality

I would like for the error to point me to the offending template, and if possible, the offending line of the template. As is, these errors are incredibly hard to debug.

Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
16h 35m
Merged PRs (30d)
176

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/angular-cli

All issues in angular/angular-cli

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.