angular / angular/angular-cli

Support executing ESM schematics

Offen
#22,786 7 Kommentare 61 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: @angular-devkit/schematics feature feature: under consideration
Vorherrschende Sprache
TypeScript
Sterne
27k
Forks
11.8k
Ø Merge
14 Std. 23 Min.
Gemergte PRs (30 T.)
162

Beschreibung

# 🚀 Feature request
Support schematics written in ES Modules. Currently only CommonJS schematics are supported.

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

- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] extract-i18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc
- [x] other: compiling custom schematics

### Description

Currently custom (and official) schematics can execute only CommonJS code, but not ES Modules. This is problematic when you want to import an ES Module in your custom schematics, [for example `HtmlParser` from `@angular/compiler`](https://github.com/SAP/spartacus/blob/7a1672a83224a5a2f3e6b3d08de3e461514120ea/projects/schematics/src/shared/utils/file-utils.ts#L253) (which since ng13 is shipped only as ESM).

#### Problems with not supporting ESM:

The following error started to occur for our custom schematics in runtime, since we upgraded from ng12 to 13:
`require() of ES Module /node_modules/@angular/compiler/fesm2015/compiler.mjs not supported. Instead change the require of /node_modules/@angular/compiler/fesm2015/compiler.mjs to a dynamic import() which is available in all CommonJS modules.`

But the advised change of the static `@angular/compiler` to a dynamic import is cumbersome due to various reasons:
- it unnecessarily changes the our synchronous code to asynchronous code
- it induces passing down the `compilerModule` (result of `await import(@angular/compiler)`) as an argument down to all helper functions ([example in angular repo](https://github.com/angular/angular/blob/a432ad65c77d5888da49b630d5055da2b8f7513c/packages/core/schematics/migrations/router-link-empty-expression/index.ts#L61))
- it requires a hacky workaround ticking the Typescript compiler so to avoid compiling the dynamic `import()` into the `require()` call - for more see [the workaround function `loadEsmModule()` in angular repo ](https://github.com/angular/angular/blob/e0015d3c456d584242269b0765878d598a550888/packages/core/schematics/utils/load_esm.ts#L11-L35). Btw. this function is not exported in public API, so we need to copy-paste it to our repo.

### Describe the solution you'd like
Support executing ESM schematics .

### Describe alternatives you've considered
Change the import of ESM to dynamic imports in our schematics code and deal with all its cumbersome consequences (described above).

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, den Angular CLI-Pfad nachzuverfolgen, der benutzerdefinierte Schematics kompiliert und ausführt, und vergleiche ihn anschließend mit dem referenzierten Angular-Workaround `loadEsmModule()` und den verlinkten Schematics-Beispielen. Als erledigt gilt, dass ESM-Schematics ohne den gemeldeten CommonJS-Fehler `require()` ausgeführt werden können und dieses Verhalten durch Tests abgedeckt ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
cli
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.