如何扩展现有的角度示意图

Question

我想自定义ng g app 原理图，以便调用ng g app myapp 将创建myapp/src/environments/environment.ts 文件，如下所示：

import { environment as baseEnvironment } from '@myworkspace/environments/environment';

export const environment = Object.assign(
  { production: false },
  baseEnvironment
);

Nx docs 展示了如何设置，但没有展示任何代码示例，我们将不胜感激。

Answer 1

是的，有一种方法可以做到这一点，而且很容易:) 创建一个示意图，并将“extends”：[“@schematics/angular”] 添加到该示意图的 collection.json 中。 （或者@nrwl/schematics，如果你正在使用它）

将您的原理图定义为“app”（因为这是您要编辑的功能）——工厂将使用 externalSchematic 方法调用 angular's/nrwl 的创建应用程序原理图，您可以将您的环境文件添加到这个创建的树中。

完成！ （我假设知道创建原理图的知识，如果不知道，https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2 应该是一个很好的起点）

Answer 2

您可以在 Nx 工作区中创建自定义原理图来执行此操作。

ng g workspace-schematic my-new-app

这将在tools/schematics 下创建一个新原理图。您可以编辑为插入您自己的代码而创建的index.ts 文件。

    import { chain, externalSchematic, Rule } from '@angular-devkit/schematics';

export default function(schema: any): Rule {
    return chain([
        externalSchematic('@nrwl/schematics', 'app', {
          name: schema.name
        }),

        // add your custom code here
    ]);
}

然后您可以使用以下命令运行它：

 npm run workspace-schematic my-new-app -- somename