Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

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

未关闭
#19,301 13 条评论 5 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
38/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
停滞
技术栈
angular, typescript
领域
cli

调研方向

从 @angular-devkit/schematics 中的 externalSchematic 函数以及 packages/angular/pwa/pwa/index.ts 中引用的调用开始。跟踪外部包在 node_modules 中不存在时如何解析,然后确定应如何将安装集成到该流程中。当不可用的外部 schematic 包被安装并且 schematic 成功执行时,即表示完成。

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

描述

area: @angular-devkit/schematics feature feature: insufficient votes

🚀 Feature request

Command (mark with an x)
  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc
  • 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:

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. 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:

export const installNpmPackage = (
  context: SchematicContext,
  packageName: string,
): Promise<void> => {
  return new Promise<void>((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
主要语言
TypeScript
星标
27k
派生
11.8k
平均合并
16 小时 35 分钟
30 天内合并 PR
176

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

angular/angular-cli 的其他 Issue

查看 angular/angular-cli 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

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