angular / angular/angular-cli

`externalSchematics` should install packages locally when they are no present in the `node_modules`

未關閉
#19,301 13 則留言 5 個 reaction 已指派 0 人 在 GitHub 檢視
area: @angular-devkit/schematics feature feature: insufficient votes
主要語言
TypeScript
星號
27k
分支
11.8k
平均合併
14 小時 23 分鐘
30 天內合併 PR
162

描述

# 🚀 Feature request

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

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

### Description

when creating own schematics, they can make use of other schematics by calling the `externalSchematic` function provided by the `@angular-devkit/schematics` collection.

To call an external schematic, the function can be used like this:

```ts
options = {};
externalSchematic('my-schematic-package', 'my-schematic-name', options);
```

But to execute an external schematic package it has to be part of the `node_modules`. Internally the CLI uses the function for example [for calling the PWA schematic](https://github.com/angular/angular-cli/blob/b2174947924a781f7db41377be989750e042a968/packages/angular/pwa/pwa/index.ts#L159). This won't be problematic as is already installed as part of the `@angular/schematics` package and in fact it's part of the `node_modules`.

Once you'll try to install an external schematic which isn't already available in the `node_modules` the schematic fails.

A workaround is to manually integrate an installation procedure first and then call the function like this:

```ts
export const installNpmPackage = (
context: SchematicContext,
packageName: string,
): Promise => {
return new Promise((resolve) => {
context.logger.info(
`📦 Installing package '${packageName}' for external schematic setup...`,
);
const spawnOptions: SpawnOptions = { stdio: 'inherit' };
spawn('npm', ['install', packageName], spawnOptions).on(
'close',
(code: number) => {
if (code === 0) {
context.logger.info(
`✅ '${packageName}' package installed successfully`,
);
resolve();
} else {
const errorMessage = `❌ installation of '${packageName}' package failed`;
context.logger.error(errorMessage);
throw new Error();
}
},
);
});
};

const packageName = '@briebug/cypress-schematic';
await installNpmPackage(context, packageName);
return externalSchematic(packageName, 'ng-add', {
removeProtractor: true,
addCypressTestScripts: true,
});
```

### Describe the solution you'd like

It would be great to integrate the installation process for a package that's not present in the `node_modules` in the `externalSchematic` function.

### Describe alternatives you've considered

貢獻指南

開啟貢獻指南

研究方向

從 @angular-devkit/schematics 中的 externalSchematic 函式以及 packages/angular/pwa/pwa/index.ts 中參照的呼叫開始。追蹤外部套件在 node_modules 中不存在時如何解析,接著判斷應如何將安裝整合到該流程中。當無法使用的外部 schematic 套件完成安裝且 schematic 成功執行時,即表示完成。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
angular, typescript
領域
cli
Issue 類型
功能
難度
4/5
預估耗時
3-5 天
活躍度
停滯
描述清晰度
基本清楚
新手友好度
38/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。