angular / angular/angular-cli

Support executing ESM schematics

Aperta
#22,786 7 commenti 61 reazioni 0 assegnatari Vedi su GitHub
area: @angular-devkit/schematics feature feature: under consideration
Lingua principale
TypeScript
Stelle
27k
Fork
11.8k
Merge medio
14h 23m
PR unite (30g)
162

Descrizione

# 🚀 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).

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia tracciando il percorso di Angular CLI che compila ed esegue gli schematics personalizzati, quindi confrontalo con il workaround di Angular referenziato `loadEsmModule()` e con gli esempi di schematics collegati. Il lavoro è completato quando gli schematics ESM possono essere eseguiti senza l’errore CommonJS `require()` segnalato, con una copertura di test per questo comportamento.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
cli
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.