angular / angular/angular-cli

Support executing ESM schematics

未关闭
#22,786 7 条评论 61 个 reaction 已指派 0 人 在 GitHub 查看
area: @angular-devkit/schematics feature feature: under consideration
主要语言
TypeScript
星标
27k
派生
11.8k
平均合并
14 小时 23 分钟
30 天内合并 PR
162

描述

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

贡献指南

打开贡献指南

调研方向

首先跟踪编译和执行自定义 schematics 的 Angular CLI 路径,然后将其与所引用的 Angular `loadEsmModule()` workaround 以及链接的 schematics 示例进行比较。完成标准是 ESM schematics 可以在不出现报告中的 CommonJS `require()` 错误的情况下执行,并且有针对该行为的测试覆盖。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
cli
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。