Angular CLI 生成组件问题答案

【问题标题】：Angular CLI generate component issueAngular CLI 生成组件问题
【发布时间】：2018-11-26 13:14:27
【问题描述】：

使用ng g c my-component 生成新组件时出现错误：

找不到 NgModule。使用 skip-import 选项跳过在 NgModule 中导入。

如果我随后使用跳过导入选项 Angular 在我的 e2e 文件夹中生成组件。

我假设这与我的 angular.json 文件有关，该文件在我运行 ng upgrade 之前曾被称为 angular-cli.json，这无疑是导致问题的原因，因为似乎有一些结构性变化。

有没有办法在不使用 CLI 创建新项目然后手动复制文件的情况下解决此问题..？

ng g c 从根“my-app”文件夹运行。

文件夹结构：

my-app
 - dist
 - e2e
 - node_modules
 - src
   - app
   - etc

我的应用文件夹中的 angular.json

**Angular Versions:**
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              5.5.2
typescript                        2.5.3
webpack                           4.8.3

【问题讨论】：

您是否使用ng update 命令将您的应用程序升级到了Angular 6？
你项目的文件夹结构是什么？你在哪里（在哪个文件夹内）执行ng g c my-component？
是的，我不明智地运行了 ngupdate。编辑 - 添加了文件夹结构。 ng g c 从 my-app 文件夹运行
试试ng g c my-component --module app.module（或--module ../module.app，或者需要很多父级别）。

标签： angular typescript angular-cli

【解决方案1】：

在将项目从 Angular 4.3 升级到 Angular 6 后，我遇到了同样的问题。问题原来是 [project-name]-e2e 项目下 angular.json 中的 sourceRoot 值。它被设置为“e2e”。与最初使用 Angular 6（未升级）创建的其他项目进行比较时，我注意到它们在 e2e 项目中为 sourceRoot 指定了一个空字符串。将我的配置更改为该配置后，此问题已解决。

请注意，主项目的sourceRoot仍应为“src”，您只需在e2e项目上将其更改为空字符串即可。

【讨论】：

感谢您的回答。我浏览了很多关于这个错误的帖子，人们一直在告诉“删除 e2e 项目”或“移动到项目根目录”。我的意思是 WTF 这对我来说从来都不是一个可以接受的解决方案。所以你的回答帮助了我。我切换了 e2e 项目和我的主要项目的位置，它就像一个魅力。

【解决方案2】：

我在尝试生成新组件时也遇到了同样的问题，我不知道它背后的实际原因，但我猜是因为角度更新。不过我已经解决了，你可以试试：

使用：ng g c (component Name) --project=(project Name*) --module=app

项目名称=你可以在angular.json文件中找到它

这里会提到

 "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    ***"angular.io-example"***: {
      "root": "",
      "projectType": "application",

您的项目名称是angular.io-example。

【讨论】：

【解决方案3】：

如果你想在 Angular 项目中创建一个新组件

最好的方法是使用 Angular CLI 和以下命令 ng generate component sampleComponent 要么 ng g c sampleComponent

在这种情况下要考虑的两个主要方面是

您必须位于主 root (my-app) 项目文件夹或 src/app 文件夹中，然后使用生成组件命令。
无论哪种方式，新生成的组件都将在 src/app 文件夹中创建，并将这些新组件导入到 app.module.ts 文件中

但在您的情况下，我强烈感觉您可能在 e2e 文件夹中，这就是您收到此消息的原因

如果您使用ng generate component sampleComponent --skip-import 来关注它，则会在 e2e 文件夹中创建组件。（如果您在 src 文件夹内但在 app 文件夹外，类似情况 - 这会在 src 文件夹中创建一个新组件。）

按照这些步骤进行

从终端的e2e文件夹中出来（MAC OS） cd .. 注意：您也可以在此处使用 ng g c sampleComponent 本身，这会在 src/app.
将目录更改为 src cd src/
将目录更改为应用程序 cd app/

使用命令 - 这会在 src/app 中创建组件。

【讨论】：

【解决方案4】：

我在 .net core 2 配置的 Angular CLI 应用程序中解决了这个问题，只需将 angular.json 文件中的项目对象移动到项目列表的底部。

在我的例子中，主要的应用项目是第一个，然后是 e2e 项目。我切换了它们，CLI 又回到在适当的 src/app 文件夹中创建原理图。

我会推测，无论 ng-update 对配置做什么，都会导致原理图生成器查看 angular.json 中项目列表中最后的内容。

【讨论】：

【解决方案5】：

为遇到相同问题的任何人提供答案/更新。

您可以cd 到组件目录，ng g c 可以正常工作。

为了能够从根文件夹运行它，我将我的 @angular/cli 版本回滚到版本 6.0.3。我之前安装了 6.0.8。

npm i @angular/cli@6.0.3 安装旧版本

ng g c your-component 将在根文件夹中正常工作。

【讨论】：

【解决方案6】：

我在我的一个项目中遇到了同样的问题。

在这里查看：Angular CLI in ASP.NET Core 2 Angular template?@Ashkan Rahmani 的答案。

对于 Angular 6 项目，您需要转到 angular.json，在文件中找到“root”并将其设置为 src 文件夹的子文件夹的名称（在大多数情况下是 app ）。

因此需要更换

"src": ""

与

"src": "app"

然后运行ng g c my-component

【讨论】：

【解决方案7】：

您的命令语句：ng g c my-component 可能会导致问题。请尝试

ng g c mycomponent

【讨论】：

像这样在组件名称中使用连字符是标准做法吗？无论如何我都试过了，以防万一，得到同样的错误。

【解决方案8】：

我闻到ng在应用根目录下发现多个模块文件，请在生成组件时提供模块

ng generate component componentName --module=<MODULE-NAME>

ng generate component componentName --module=app.module

【讨论】：

我得到指定的模块不存在错误...模块确实存在。
可能需要相对路径，例如--module=../app.module。