Support executing ESM schematics
- 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