标签: angular-schematics

假设我们有一个现有的角度组件，包括menu.component.html：

<ul>
  <li><a href="/home">home</a></li>
  <li><a href="/about">about</a></li>
</ul>

目标是在“大约”之后添加带有角度示意图的新链接。

 <li><a href="/contact">contact</a></li>

有任何想法吗？

我想使用Playwright为我的 Angular 应用程序运行端到端 (e2e) 浏览器测试。然而，截至 2021 年 11 月，我尚未找到 Playwright 的 Angular 示意图。

例如， Cypress有一个官方的 Angular Schematic 。这使得可以使用以下命令运行赛普拉斯 e2e 测试：

ng e2e

有没有一种方法可以在不编写 Angular 原理图的情况下使用 Playwright 运行 Angular e2e 测试？或者我错过了 Playwright 的 Angular 示意图吗？

看起来所有教程都显示了如何以旧angular.cli.json格式进行配置。

"defaults": {
  "styleExt": "css",
  "component": {
    "inlineStyle":true,
    "inlineTemplate":true
  }
}

但angular.json格式不正确。并产生错误Workspace needs to be loaded before it is used

因此，如何更改现有项目的配置以生成带有内联模板和CSS / SCSS的组件

谢谢。

我使用角度原理图 cli 创建了一个简单的新原理图。该原理图将名称作为输入，并在树中生成一个文件。我的files/目录看起来像：

src/
  app/
    __name@dasherize__.ts

我已经构建了它，然后创建了一个新的 angular 项目：

ng new test-app --routing --style css

然后我 cd 进入 test-app 目录并链接到我的示例原理图：

npm link ../schematics/sample-schematic

然后我运行我的原理图：

ng g sample-schematic:sample

但是，当我这样做时，我收到以下错误：

Pipe "dasherize" is not defined. 

如果我将files目录中的文件名更改为test.ts它可以正常工作，并且该文件将被创建。我猜我在我的测试应用程序项目中缺少一些使用各种原理图功能的导入。我的依赖项和开发依赖项test-app如下所示：

  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    ...
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular-devkit/core": "^7.3.9",
    "@angular-devkit/schematics": "^7.3.9",
    "@angular-devkit/schematics-cli": "^0.13.9",
    "@angular/cli": "~7.3.9",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@schematics/angular": "^7.3.9",
    ...
  }

我正在开发一个生成一些文件的原理图。我想在当前目录中有新文件，即

我的项目根目录是/src/app. 当我在文件夹中/src/app/features/f1并键入

ng g my:some-schemaitc --name=name

我期待新文件

/src/app/features/f1/name.ts

相反，结果是

/src/app/name.ts

我想实现与 相同的行为ng g class --name=name。当我输入ng g class --name=class目录时/src/app/features/f1，结果将是

/src/app/features/f1/class.ts

我尝试模仿 Angularng g class行为原理图源代码，但没有令人满意的结果。我的代码几乎是一样的。

有人利用过当前路径吗？

当我使用原理图（ng new --collection=@foo/schematics myproject）构建我的站点时，一切正常，除了一件事：

生成的 angular.json 文件在样式数组中只包含一个样式文件，我需要它包含多个自定义样式文件：

ng 新原理图构建后的当前 angular.json：

"build": {
  "options": {
    "styles: [
      "src/styles.scss"
    ]
  }
}

期望：

"build": {
  "options": {
    "styles: [
      "src/styles.scss",
      "src/custom1.scss",
      "src/custom2.scss"
    ]
  }
}

我如何告诉 angular 原理图例程我想要包含这些额外的样式表？

我目前正在尝试创建自己的自定义 Angular Schematics。我有以下内容：

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


// You don't have to export the function as default. You can also have more than one rule factory
// per file.
export function pxSchematics(options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    tree.create(options.name || 'hello', 'world');
    return tree;
  };
}

它只是创建一个带有“hello world”的文件。我将如何更改树的文件路径，以便它在自定义目录中输出文件？谢谢。

我想自定义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 文档展示了如何设置，但没有展示任何代码示例，对此我们将不胜感激。

当使用 Schematics 在 Angular 中生成组件时，它会尝试将新生成的组件导入到 NgModule 中，这是为了组件正常工作并节省时间所必需的。

但是，在创建自己的原理图时，我无法找到正确的方法来执行相同的操作并将我的库导入到 app.component.ts 的 NgModule 中。使用 ng-add 原理图时，如何让原理图自动将自己的条目添加到 NgModule 中？

原理图需要做两件事：

1. 导入库
2. 将其添加到 NgModule 导入中

前：

@NgModule({
  declarations: [],
  imports: [],
  exports: []
})
export class appModule { }

后：

import {library} from 'library';

@NgModule({
  declarations: [],
  imports: [library],
  exports: []
})
export class appModule { }

我知道 Angular devkit 中存在执行此操作的函数，因为组件等的“官方”原理图使用了它。我会怎样做同样的事情？

我在一个项目中使用Angular 的原理图。

我有一个数字数组：const numbers = [1, 2, 3, 4, 5]

我想在 HTML 模板中打印它们。我通过以下方式传递数组：

export function schematics(_options: Schema): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const numbers = [1, 2, 3, 4, 5];

    const sourceTemplate = url('./files');
    const sourceParametrizedTemplate = apply(sourceTemplate, [
      template({
        ..._options,
        ...strings,
        numbers
      })
    ]);

    return mergeWith(sourceParametrizedTemplate)(tree, _context);
  };
}

我正在考虑做这样的事情：

索引.html

<h1>Numbers</h1>

  <%= for(let n in numbers) { =>

  <p><%= n %></p>

  <%= } %>

但我得到了错误SyntaxError: Unexpected token for。

有谁知道实现它的正确方法是什么？我在文档中找不到它。 …

我有一个项目 Child ，它有一个添加原理图。如果子项目成为父项目的依赖项，而父项目也有添加原理图，那么 ng-cli 将如何处理这个问题？我没有看到任何对ng add级联或调用依赖模式的引用。父级是否需要复制子级原理图，或者有没有办法在父级原理图中手动调用子级原理图？

我想使用buildDefaultPath通常可用的方法来'@schematics/angular/utility/project'编写 Angular 原理图。

我安装了该软件包并npm i @schematics/angular尝试像这样导入它：import { buildDefaultPath } from '@schematics/angular/utility/project';。

但是，我得到“找不到模块‘@schematics/angular/utility/project’的声明文件。”