如何使用CLI在Angular 4中创建新组件

Question

在 Angular 2 中，我使用

ng g c componentname

但它不受Angular 4支持，所以我手动创建了它，但它显示错误，说它不是一个模块。

- surbhiGoel

---

根据文档，"ng generate component componentname"意思是生成名为componentname的组件。 - user4676340

你需要在 module.ts 文件中导入手动创建的组件。 - surbhiGoel

在Angular 7中也适用。ng g c <componentname> OR ng generate component <Name> - Chinmoy

根据文档，您可以根据组件的原理图和选项添加组件。 - Savaj Patel

Answer 1

在Angular4中，这个操作仍然有效。如果您遇到错误，我认为问题出在其他地方。

在命令提示符中输入：

ng generate component YOURCOMPONENTNAME

甚至有一些简写：命令generate可以使用g来代替，而component则可以使用c：

ng g c YOURCOMPONENTNAME

您可以使用ng --help、ng g --help或者ng g c --help查看文档。

当然，将YOURCOMPONENTNAME重命名为您想要使用的名称。

文档：angular-cli会在app.module.ts中自动添加对组件、指令和管道的引用。

更新：在Angular 8版本中，此操作仍然有效。

- Mike Bovenlander

---

我在安装组件时遇到了以下错误----------- 找不到声明的模块 静默错误：未找到任何模块文件 - surbhiGoel

我在想，是否有任何命令可以删除已创建的组件，包括它所引用的应用程序模块？ - panky sharma

@pankysharma 在Angular CLI中没有删除组件的命令，但是如果您想使用不同的选项重新创建组件，则可以使用--force（简写：-f）选项覆盖文件。 - Mike Bovenlander

"ng g c employees" 对我来说是可行的。我之前在'ng'之前使用了'$'，像"$ng g c employees"，但在这种情况下会出现问题。 - Raj Chaurasia

如果您在创建新组件时不需要测试文件（.spec.ts），请在命令中添加参数--skipTests。 - Chirag K

Answer 2

通过开发服务器生成和提供 Angular 项目 -

首先进入您的项目目录，然后输入以下内容 -

ng new my-app
cd my-app
ng generate component User (or) ng g c user 
ng serve

这里的“D:\Angular\my-app>”是我的 Angular 应用程序项目目录，而“User”是组件的名称。

命令看起来像-

D:\Angular\my-app>ng g component User
  create src/app/user/user.component.html (23 bytes)
  create src/app/user/user.component.spec.ts (614 bytes)
  create src/app/user/user.component.ts (261 bytes)
  create src/app/user/user.component.css (0 bytes)
  update src/app/app.module.ts (586 bytes)

- Anil Singh

Answer 3

1）首先进入您的项目目录。

2）然后在终端中运行以下命令。

ng generate component componentname

或者

ng g component componentname

3) 然后你会看到这样的输出：

create src/app/test/componentname.component.css (0 bytes)
create src/app/test/componentname.component.html (23 bytes)
create src/app/test/componentname.component.spec.ts (614 bytes)
create src/app/test/componentname.component.ts (261 bytes)
update src/app/app.module.ts (1087 bytes)

- Apurv Chaudhary

Answer 4

ng g component componentname

它会生成组件并将组件添加到模块声明中。

当手动创建组件时，您应该像这样将组件添加到模块的声明中：

@NgModule({
  imports: [
    yourCommaSeparatedModules
    ],
  declarations: [
    yourCommaSeparatedComponents
  ]
})
export class yourModule { }

- sudheer singh

Answer 5

如果您想创建没有 .spec 文件的新组件，可以使用

ng g c component-name --spec false

你可以使用ng g c --help找到这些选项。

- Mile Mijatović

Answer 6

创建特定文件夹下的组件

ng g c employee/create-employee --skipTests=false --flat=true

这一行代码将创建一个名为“employee”的文件夹，并在其中创建一个“create-employee”组件。

不创建任何文件夹

不创建任何文件夹

ng g c create-employee --skipTests=false --flat=true

- Alexander Zaldostanov

Answer 7

请确保您在CMD命令行中处于您的项目目录中

    ng g component componentName

- santhosh

Answer 8

ng g c componentname

它将创建以下4个文件:

1. componentname.css
2. componentname.html
3. componentname.spec.ts
4. componentname.ts

这些文件包括css样式表、html模板、测试文件以及组件代码文件。

- Kamlesh Kumawat

Answer 9

ng g c COMPONENTNAME

这个命令是在终端中使用的，用于生成组件，我在Angular2中使用它。

g代表generate（生成），c代表component（组件）

- rajeev omar

Answer 10

在我的情况下，ng generate component组件名没有起作用，因为我将项目文件夹名称从'app'改名为其他名称。 我又将其更改回'app'，现在它可以正常运行。

- surbhiGoel