angular / angular/angular-cli

Support executing ESM schematics

Aberta
#22,786 7 comentários 61 reações 0 responsáveis Ver no GitHub
area: @angular-devkit/schematics feature feature: under consideration
Linguagem predominante
TypeScript
Estrelas
27k
Forks
11.8k
Merge médio
14h 23min
PRs com merge (30d)
162

Descrição

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

Guia de contribuição

Abrir o guia de contribuição

Direção de pesquisa

Comece rastreando o caminho do Angular CLI que compila e executa schematics personalizados e, em seguida, compare-o com o workaround referenciado do Angular `loadEsmModule()` e com os exemplos de schematics vinculados. Considera-se concluído quando os schematics ESM puderem ser executados sem o erro de CommonJS `require()` relatado, com cobertura de testes para esse comportamento.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
angular, typescript
Domínio
cli
Tipo de issue
Funcionalidade
Dificuldade
5/5
Tempo estimado
Mais de uma semana
Status de atividade
Estagnada
Clareza
Razoavelmente clara
Facilidade para iniciantes
35/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.