Angular 原理图没有从模板创建文件

Posted 2023-03-13

【中文标题】Angular 原理图没有从模板创建文件

【英文标题】：Angular schematic is not creating files from templates

【发布时间】：2020-02-17 09:29:53

【问题描述】：

我已经创建了一个角度示意图，用于使用 ng generate 命令创建样板代码，但是尽管我已经阅读了所有文章并搞砸了，但我无法创建文件。

我的原理图工厂中有以下代码：

export function createComponent(_options: any): Rule 
    return (tree: Tree, _context: SchematicContext) => 
        setupOptions(tree, _options);

        const movePath = normalize(_options.path + '/' + strings.dasherize(_options.name));

        const templateSource = apply(url('./files'), [
            template(
                ...strings,
                ..._options,
            ),
            move(movePath)
        ]);

        return mergeWith(templateSource);
    ;

在与此相同的目录中是包含我的“__name@dasherize__.component.ts”模板的文件目录，我希望将其作为 url('./files') 函数的一部分拉入，但我'我不确定这是否正在发生。

我的模板文件如下：

import  Component  from '@angular/core';

@Component(
    selector: 'wx-<%= dasherize(componentName) %>'
)
export class <%= classify(componentName) %>Component 

我希望在运行原理图时会出现“CREATE”，但我得到的只是“无事可做”。

奇怪的是，使用 tree.create() 成功运行以创建文件，所以我想知道 url() 或 apply() 函数是否没有按预期运行。

【问题讨论】：

可以提供github repo吗？

@HsuanLee 不，我不能，你有什么特别要找的吗？我在这个库中有其他原理图，但它们不创建文件。

【参考方案1】：

确保“./files”是相对于 dist 文件夹中的原理图文件的正确路径。

也许您需要将其更改为：“../../src/my-schematic/files”。

【参考方案2】：

遇到了同样的问题，但同时查看源代码和文档 Schematics for Libraries 模板文件应该以 .ts.template 扩展名结尾。

所以在你的情况下，文件应该命名为__name@dasherize__.component.ts.template。

输出文件将不包含.template扩展名。

链接到@angular/devkit 源：applyTemplates()

【参考方案3】：

一位同事遇到了类似的问题，无论我如何更改他的代码，它似乎仍然在做同样烦人的事情。

归结为最初用于运行原理图的命令。

之前：

node_modules/.bin/schematics ./schematics:my-schematic-name --parameter

应该是什么：

ng generate schematics:my-schematic-name --parameter

您的原理图需要在 Angular CLI 的上下文中运行，只需在 Node 中执行它，它似乎不会输出任何文件，但仍然以某种方式成功执行。

【参考方案4】：

查看您的 .npmignore 和 .gitignore。 也许您忽略了所有 .ts ，这使得 /files 文件夹下所有带有 .ts 的文件都将被忽略。

您的 .npmignore 可能如下所示：

# .npmignore
# Ignores TypeScript files, but keeps definitions and .ts under /files folder.
*.ts
!*.d.ts
!/src/**/files/*.ts

记得在更新你的 npm 包之前做一个 npm run build 来构建你的 ts 定义。