angular / angular/angular-cli

Add support for "<%_", "_%>" and "-%>" delimiters in templating in @angular-devkit/core

Open
#23,169 2 comments 5 reactions 0 assignees View on GitHub
area: @angular-devkit/core feature feature: in backlog
Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
14h 23m
Merged PRs (30d)
162

Description

# 🚀 Feature request

### Command (mark with an `x`)

- [x] generate

### Description

The templating for the @angular/devkit library uses EJS, sort of but doesn't support whitespace slurping the way that the documentation of EJS has declared it. Having this would enable schematic templates to be much more flexible with their whitespace and therefor easier to read while still creating nicely formatted files.

### Describe the solution you'd like

The three delimiters: `"<%_"`, `"_%>"` and `"-%>"` should just be added and work the same way that they do in EJS.

I already have an idea of the code that I'd like to add, and a pull request almost ready. It's very simple and only affects one file.

### Examples

Within [@schematics/angular](https://npmjs.com/package/@schematics/angular) this would allow an example like the following
```
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
<%_ if (routing) { %>
import { AppRoutingModule } from './app-routing.module';
<%_ } -%>
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
<%_ if (routing) { -%>
AppRoutingModule,
<%_ } -%>
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```

Which would generate with the correct whitespace.

Contributor guide

Open the contributing guide

Research direction

The issue identifies the @angular-devkit/core templating implementation but names no file or test. Start by locating that implementation and compare its delimiter handling with EJS; done means <%, _%> and -%> whitespace-slurping delimiters work for the shown schematic template.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
tooling
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.