Angular CLI 生成组件时出现问题

Question

使用ng g c my-component命令生成新组件时，出现以下错误：

无法找到NgModule。使用skip-import选项以跳过NgModule导入。

如果使用skip-import选项，则Angular会在e2e文件夹中生成组件。

我认为这可能与我的angular.json文件有关，该文件在运行ng升级之前称为angular-cli.json，这无疑是导致问题的原因，因为似乎进行了一些结构性变化。

是否有方法可以在不创建新项目并手动复制文件的情况下解决此问题？

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

文件夹结构:

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

my-app文件夹中的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

- Mark Jones

---

你是否使用 ng update 命令将你的应用程序升级到 Angular 6？ - Pankaj Parkar

你的项目文件夹结构是什么样子的？在哪个文件夹内执行 ng g c my-component 命令？ - Muhammad Vakili

是的，我不明智地运行了ngupdate。编辑-添加了文件夹结构。ng g c从我的应用文件夹中运行。 - Mark Jones

尝试使用 ng g c my-component --module app.module (或者 --module ../module.app，或者根据需要的父级层次数调整)。 - Andy King

Answer 1

我闻到了 ng 在应用根目录上找到了多个模块文件，请在生成组件时提供模块。

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

ng generate component componentName --module=app.module

- Alok G.

---

我收到了“指定的模块不存在”的错误...当然，该模块确实存在。 - Mark Jones

可能需要使用相对路径，例如 --module=../app.module。 - Andy King

Answer 2

针对有相同问题的人提供答案/更新。

您可以cd到组件目录，ng g c将正常运行。

为了能够从根目录运行此命令，我将我的@angular/cli版本回滚到6.0.3。我之前安装的是6.0.8版本。

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

ng g c your-component然后就可以像平常一样从根目录运行了。

- Mark Jones

Answer 3

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

请注意，主项目的sourceRoot仍应为"src"，您只需要将其更改为空字符串即可解决e2e项目的问题。

- Anshul Rawat

---

谢谢你的回答。我看了很多关于这个 bug 的帖子，人们总是说“删除 e2e 项目”或“移动到项目根目录”。我是说，这对我来说从来不是一个可接受的解决方案。所以你的回答帮了我大忙。我把 e2e 项目和我的主项目位置互换了一下，现在它完美地运行了。 - Tallerlei

Answer 4

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

请参考这里：如何在ASP.NET Core 2 Angular模板中使用Angular CLI？ 来自@Ashkan Rahmani 的答案。

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

因此，您需要替换

"src": "" 

带有。

"src": "app"

然后运行 ng g c my-component。

- kboul

Answer 5

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

在我的情况下，主要应用程序项目排在第一位，其后是e2e项目。我交换了它们，然后CLI回到了适当的src/app文件夹中创建原理图。

我猜测，无论ng-update对配置进行了什么操作，都会导致原理图生成器查看angular.json中项目列表中最后一个项目。

- John Gallego

Answer 6

我在尝试生成新组件时也遇到了同样的问题，虽然我不知道确切的原因，但我猜测是由于 Angular 更新引起的。不过我已经解决了，你可以尝试以下方法：

使用：ng g c (组件名称) --project=(项目名称*) --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。

- SanketSingh

---

使用 --project 就解决了问题。 - Abhi

Answer 7

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

• 最好的方法是使用Angular CLI，使用以下命令 ng generate component sampleComponent 或者 ng g c sampleComponent

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

1. 您必须位于主根目录(my-app)项目文件夹或src/app文件夹内，然后使用生成组件命令。
2. 无论哪种方式，新生成的组件都将被创建在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/
• 更改目录到app cd app/

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

- PRagh

Answer 8

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

ng g c mycomponent

- Joel Wembo

---

在组件名称中使用连字符是标准做法吗？我还是试了一下，结果出现了相同的错误。 - Mark Jones