Angular 扩展角度示意图

Angular 扩展角度示意图,angular,angular-schematics,Angular,Angular Schematics,扩展现有角度示意图的最佳方法是什么?目前,我特别考虑将一些默认代码添加到组件的规范文件中,但如果能给出更一般化的答案,我将不胜感激 在我找到的教程中,它们显示了externalSchematic函数,这似乎是正确的,但没有一个显示如何更新/替换该原理图的模板文件。我试着将模板复制到我的原理图中并应用/合并它们,但这似乎有点过头了。安格尔公司关于这一问题的文件似乎也很少 有没有办法扩展默认的原理图,或者我需要从头开始做所有事情?我完全同意文档很少。我发现扩展现有示意图最有用的资源是本文: 在标题“

扩展现有角度示意图的最佳方法是什么?目前,我特别考虑将一些默认代码添加到组件的规范文件中,但如果能给出更一般化的答案,我将不胜感激

在我找到的教程中,它们显示了externalSchematic函数,这似乎是正确的,但没有一个显示如何更新/替换该原理图的模板文件。我试着将模板复制到我的原理图中并应用/合并它们,但这似乎有点过头了。安格尔公司关于这一问题的文件似乎也很少


有没有办法扩展默认的原理图,或者我需要从头开始做所有事情?

我完全同意文档很少。我发现扩展现有示意图最有用的资源是本文:

在标题“调用另一个原理图”下,有一些关于如何修改新创建的组件的示例代码,这似乎是您正在寻找的。一天结束时,您应该调用现有的角度元件原理图,然后找到要修改的文件(在您的情况下是.spec.ts文件),最后插入所需的新代码:

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

const sText = "test to insert";

return chain([
    // Here you can modify options or do any preprocessing before calling the schematic (optional)
    (cTree: Tree, _context: SchematicContext) => {     
        return cTree;
    },

    // Call the external schematic
    externalSchematic('@schematics/angular', 'component', _options),

    // Do whatever downstream processing you need to 
    (cTree: Tree, _context: SchematicContext) => {

        // Find new component, which depends on where you put it in the tree
        // Some approaches prefer to scan the entire tree looking for the new file,
        // I prefer to narrow my search down a bit.
        cTree.getDir('.')
            .visit((sTempFilePath) => {

                if (!sTempFilePath.endsWith(dasherize(_options['name']) + '.component.spec.ts')) {
                    // Skip anything but the newly added typescript spec file
                    return;
                }

                // Now that we've found our new component file, read in the content
                const cContentBuffer = cTree.read(sTempFilePath);
                if (!cContentBuffer) {
                    return;
                }

                // Add text at beginning of file (can customize to add anywhere)
                cTree.overwrite(
                    sTempFilePath,
                    sText + cContentBuffer);

            });

        return cTree;       
    }

]);
最后一个注意事项——有时我发现我需要在自己的示意图中包含schema.json,以便利用角度示意图


希望有帮助

我想支持你的问题,因为我也遇到过同样的问题。现在,对我来说,黑客的解决方案是从@schematics/angular复制源代码,并根据我的需要修改它们。这是一个相当令人沮丧的解决方案,也没有比scratch更好的解决方案,但是如果你真的需要,我可以在回答中发布它;我确实订阅了api文档,想知道下次api文档什么时候会出现,但我不知道什么时候会出现。