angular / angular/angular-cli

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

Đang mở
#19,301 13 bình luận 5 reaction 0 người được giao Xem trên GitHub
area: @angular-devkit/schematics feature feature: insufficient votes
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với hàm externalSchematic trong @angular-devkit/schematics và lệnh gọi được tham chiếu trong packages/angular/pwa/pwa/index.ts. Theo dõi cách một package bên ngoài được phân giải khi không có trong node_modules, sau đó xác định cách việc cài đặt nên được tích hợp vào luồng đó. Hoàn thành khi một package schematic bên ngoài không khả dụng được cài đặt và schematic thực thi thành công.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
cli
Loại issue
Tính năng
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
38/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.