标签: angular-schematics

我正在试验 Angular 原理图，并在不同的地方遇到了函数 branchAndMerge()。然而，没有人解释它的作用。

我见过的地方：

• 使用 Angular CLI 和 Schematics 生成自定义代码
• amcdnl/材料原理图
• 如何用角度原理图覆盖文件
• 角度/开发套件

澄清它与合并/合并的区别，以及如何正确使用它，将不胜感激。

PS：合并在@angular-devkit/schematics解释如下：

将输入树与其他树合并。

顺便说一句，我假设merge() 现在是mergeWith，尽管我不是100% 确定。

代码示例

const rule = 
    // Creates a new rule that is a concatenation of other rules.
    chain([
      // Everyone uses it, but no one explains what it does...
      branchAndMerge(
        chain([
        // Merges the project tree with the virtual tree
        mergeWith(virtualTree)
      ]))
    ]);

我正在创建一些自定义原理图,这将有助于我们快速启动角度库项目.鉴于此,我不希望开发人员必须拥有ng ...他们必须运行的命令清单才能启动并运行库,我想只需要一个命令来设置工作区,将库放入其中,做一些自定义(交换为业力的笑话,添加一些CI配置等).

我这样做的方法是创建一个以空树开始的ng-new原理图,然后从中调用原理图@schematics/angular,externalSchematic()然后library从同一个包中链接原理图,接着是一些我们的自定义原理图来进行自定义.

我想要使​​用externalSchematic()而不是仅将所有外部原理图代码复制到我的原理图项目中的原因是,在@schematics/angular更新时,我可以通过执行来合并这些更新,yarn upgrade-interactive并通过运行测试套件来查找和解决任何问题.最终我们可以使用CI自动完成此操作.

我在这里创建了一个小的自包含示例重现我的错误:https://github.com/matt328/ng-schematics-test

重现步骤:

git clone
npm install
npm run build
schematics ng-schematics-test:my-full-schematic --name=test-schematic

当我运行原理图时,它会报告 Invalid source: undefined.

这里

https://github.com/matt328/ng-schematics-test/blob/master/src/my-full-schematic/index.ts#L30

是我externalSchematic()打电话的地方ng-new.

我已经对源进行了一些挖掘,发现它是由一些角度原理图引起的

"$default": {
  "$source": "projectName"
}

在他们的架构中.该错误是projectName未定义的结果.

还有什么是为了能够调用做ng-new用externalSchema()？这种方法有效,还是有其他方法可以做到这一点？

我将 Angular 与 Nativescript Schematics 一起使用。我已经安装了 nativescript-ui-sidedrawer。当我跑

tns run ios --bundle

本机版本已编译并部署到设备，但是当我运行时

ng serve

网络版本失败，出现几个错误，都非常相似。第一个是

ERROR in ./node_modules/tns-core-modules/ui/builder/component-builder/component-builder.js
Module not found: Error: Can't resolve '../../../platform' in '/Users/markdev/Documents/Code/mydrawer/node_modules/tns-core-modules/ui/builder/component-builder'

所有的错误都与路径有关。

如果我浏览到上面给出的错误并编辑“component-builder.js”，并将路径更改为

~/node_modules/tns-core-modules/platform

从

../../../platform

然后在运行“ng serve”时，该特定错误不会显示在输出的错误列表中。

但是……当我跑的时候

tns run ios --bundle

我得到

ERROR in ../node_modules/tns-core-modules/ui/builder/component-builder/component-builder.js
Module not found: Error: Can't resolve '/Users/markdev/Documents/Code/mydrawer/src/node_modules/tns-core-modules/platform' in '/Users/markdev/Documents/Code/mydrawer/node_modules/tns-core-modules/ui/builder/component-builder'
 @ ../node_modules/tns-core-modules/ui/builder/component-builder/component-builder.js 7:15-66
 @ ../node_modules/tns-core-modules/ui/builder/builder.js
 @ ../node_modules/tns-core-modules/ui/repeater/repeater.js
 @ ../node_modules/tns-core-modules/bundle-entry-points.js
 @ ./main.ns.ts

如果我在设备上打开应用程序，我会得到

*** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Error: Cannot find module …

版本

node --version v8.11.3

npm --version 6.4.1

ng --version
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular …

我想将optional-chainingbabel 插件添加到我的 Angular 7 版本中，但找不到任何有关是否可以.babelrc向我当前项目添加或原理图以修改/添加自定义插件的文档。

在设置原理图时，我发现可以提示输入以下任何类型 String | 布尔 | 数组 | 数量 | 整数 | 空 | 目的。

我正在尝试设置一个示意图，提示用户从可用模块列表中选择一个模块。例如，用户会看到这样的内容：

What module are you adding this store to?
 > Foo
   Bar
   Baz

虽然有大量字符串和布尔提示的示例，但没有人提供我找到的数组提示的示例。对于我的一生，我无法弄清楚如何在数组中提供选项来提示用户进行选择，而这根本没有出现在他们的文档中。

{
  "$schema": "http://json-schema.org/schema",
  "id": "SchematicsIDXStoreGen",
  "title": "IDX Store Gen Schema",
  "type": "object",
  "properties": {
    "featureName": {
      "type": "string",
      "description": "The name of the store",
      "x-prompt": "What is the name of the store you'd like to create"
    },
    "module": {
      "type": "array",
      "description": "Select the appropriate module",
      "x-prompt": "What module are you adding …

扩展现有 Angular 原理图的最佳方法是什么？我目前正在专门考虑将一些默认代码添加到组件的规范文件中，但更通用的答案将不胜感激。

在我发现的教程中，它们显示了 externalSchematic 函数，这似乎是在正确的轨道上，但它们都没有显示如何更新/替换该原理图的模板文件。我尝试过将模板复制到原理图中并应用/合并它们，但这似乎有点矫枉过正。Angular 关于此事的文档似乎也很少。

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

我的问题是否可以扩展架构属性？

我试过的：
collection.json

{
  "$schema": "http://schema.angular.io/schematics/collection/2",
  "name": "@my/schematics",
  "description": "my default collection, containing all schematics that are used normally",
  "schematics": {
    "library": {
      "extends": "@nrwl/angular:library", <--- extends nrwl library
      "aliases": [ "lib" ],
      "factory": "./library",
      "description": "Create my library.",
      "schema": "./library/schema.json"
    }
}

图书馆/schema.json

{
  "$schema": "http://schema.angular.io/schematics/collection/2",
  "id": "SchematicsAngularLibrary",
  "title": "Create my library",
  "type": "object",
  "properties": {
    "legacy": {    <--- adds custom property
      "type": "boolean",
      "description": "Legacy mode",
      "default": false
    }
  },
  "required": []
}

和我的简化原理图库/index.ts

import { chain, externalSchematic, …

我编写了一些生成器，这些生成器在我最近进行迁移之前一直在工作。我正在使用以下导入路径导入和使用 Nrwl AST utils：

import { addImportToModule } from '@nrwl/angular/src/utils/nx-devkit/ast-utils';

当时我认为源代码注释说这些将被删除，但我还是使用了它们。现在我已经更新到 13.8.3 我的发电机坏了：

Package subpath './src/utils/nx-devkit/ast-utils' is not defined by "exports" in /node_modules/@nrwl/angular/package.json

有没有正确的方法在工作区生成器中使用这些 Angular 实用程序？

我一直在研究nrwl扩展，它们看起来很棒。但是，当我按照他们的Workspace Specific Sc​​hematics教程学习时，最后一步不会向我显示要运行的命令。您能告诉我如何运行创建的原理图吗？我敢肯定这很简单，但是我在任何地方都找不到该命令。