问题标签 [angular-schematics]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
671 浏览

angular - 是否可以从 Angular Schematic 中执行 shell 命令?

我想到了一个自定义示意图,我将与“ng serve”配合使用,它会同时自动启动一个用 Node 编写的辅助微服务。这可以在原理图中完成,还是我需要先手动启动它,然后再为 Angular 应用程序提供服务?

就上下文而言,这将是 Angular 应用程序开发过程中使用的工具,因此 Node 微服务和 Angular 应用程序将托管在同一台服务器上,只是端口号不同。

我试过搜索 Google 和 S/O,但我读过的关于自定义原理图的所有文档似乎都集中在目录和文件写入功能上。

0 投票
1 回答
254 浏览

angular - Angular schematics Tree: how to exclude?

I've got a Tree whose root is the project root dir.

I would like to apply a rule using forEach, which iterates through all the files in the tree. This works, but it's very slow since node_modules is also part of the tree.

How could I exclude that dir?

I tried:

But this always fails:

Error: Path "/some/path/some.file" already exist.

I don't see any methods which could help me to branch off the tree or something like that. I need to apply the forEach to only part of the tree. What's the best way to achieve this?

0 投票
2 回答
382 浏览

angular - Use schematics to mutate HTML content of an angular project

I have a simple schematic running that proves how schematics work as described in https://angular.io/guide/schematics-for-libraries

My next step is to do something relevent to my project using the schematic - What I want is to add a directive to all of my HTML angular templates in my application

For example if there is a HTML file that has content like this

after running the schematic (adds the directive)

From the documentation or otherwise, I am unable to see how to loop through all the files and make this change to each file. Are there any examples/pointers for this use case?

I know ng update does it for migration from NG7 => NG8 to add this to the @ViewChild /** TO DO - static flag is mandatory */ but not able to narrow down the code for this.

Basically, what can I do here to get a handle to all the HTML files

0 投票
0 回答
116 浏览

angular - 未定义自定义组件原理图视图封装

我正在尝试将 Angular 的默认组件模板扩展为可用于我们团队的自定义模板。我已经阅读/遵循了一些教程,但似乎没有一个能做我想要完成的事情。无论如何,我认为我已经到了一个应该大部分工作的地方,但是我遇到了“viewEncapsulation 未定义”错误,这有点模糊。我已将其范围缩小到从模板中的@schemics/angular 复制的代码:

当我在 @schemics/angular 中挖掘代码时,我认为问题可能来自我的 schema.json,但更新似乎没有效果。然后我认为它可能是生成的schema.js,但运行npm run build似乎并没有生成与我正在建模的代码相匹配的代码。

如何让我的 schema.js 更新?如果这不是问题,那么如何修复 viewEncapsulation 错误?

-- 文件 --

模式.json

架构.ts

索引.ts

0 投票
2 回答
1271 浏览

angular-cli - 如何从外部原理图中调用 ng add

在为外部角度示意图调用 ng add 时,我需要帮助。(我正在尝试添加 ng-momentum:https ://github.com/BottleRocketStudios/ng-momentum )我正在尝试从自定义 CLI 调用“ng add ng-momentum”,但我遇到了问题找不到模块“ng-momentum”。

我尝试以几种不同的方式从@angular-devkit/schematics 调用 externalSchematic 方法,但缺少一些东西。

我尝试过的一些不同的实现:

但我总是遇到如下所述的错误

复制步骤
1)运行“npm i @lcu/cli -g”以安装自定义 CLI
2)创建一个新的空文件夹,导航到它
3)运行命令“lcu init”。将范围命名为“@scope”,将工作区命名为“test”
4) 在同一文件夹中,运行命令“lcu proj newProject” 选择“App”。选择“动量”

预期行为:按照 ng-momentum 的步骤,如果我创建一个新的 Angular 项目 (ng new newProject),然后在 CLI 之外运行 ng add (ng add ng-momentum),我会得到一个新的 Angular 项目和 ng-动量应用。

实际行为:我收到以下错误:“无法从“C:\wherever\your\project\is”找到模块“ng-momentum”。

好像我错过了一些东西,但不完全确定是什么。如果需要更多信息,或者有任何问题,请告诉我。

先感谢您!

0 投票
1 回答
596 浏览

angular - 扩展 Angular 原理图

扩展现有 Angular Schematic 的最佳方法是什么?我目前正在专门研究将一些默认代码添加到组件的规范文件中,但更通用的答案将不胜感激。

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

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

0 投票
2 回答
1800 浏览

angular - 如何在 Angular 原理图中使用当前路径

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

我的项目根目录是/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行为原理图源代码,但没有令人满意的结果。我的代码几乎相同。

有人利用当前路径吗?

0 投票
0 回答
35 浏览

angular - 如何创建“链式”原理图?

我不知道我需要什么的正确术语,所以我会尽量解释清楚。

在 CLI中,sequelize-cli您可以运行其中一个sequelize db:createsequelize db:drop. 我想创建两个原理图,其第一部分本身就是一个命令,但是如果添加第二部分,它将执行不同的原理图。

具体来说,我想:

  • 运行mySchematic:migration并创建大量文件。
  • 运行mySchematic:migration:express它只会为 express 创建迁移。
  • 运行mySchematic:migration:hapi它只会为 hapi 创建迁移。

我知道如何实现该功能,但我无法让它执行不同的命令。当我运行时mySchematic:migration:hapi,执行的原理图总是mySchematic:migration.

这是我的collection.json

更改原理图的顺序也不起作用。

我也试过这个,但也没有用:

0 投票
1 回答
460 浏览

angular - 如何循环遍历模板中的数组?

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

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

我想在 HTML 模板中打印出来。我通过以下方式传递数组:

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

索引.html

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

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

谢谢!

0 投票
0 回答
139 浏览

angular - 尝试安装@schemics/update@0.803.2 时出错

当我尝试时,npm i @schematics/update@0.803.2我得到了:

我尝试删除package-log.json并删除node_modules. 我需要安装这个包,因为当它调用命令时,npm install — save-dev @angular/cli@latest我会收到一条消息,指出缺少此依赖项。我的主要目标是将 Angular 5.2 更新到 Angular 8。