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

96

在角度2中我使用

ng g c componentname

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

angular-cli

— surbhiGoel
source

6

ng generate component componentname，根据文档

1

您需要在module.ts文件中导入手动创建的组件

— surbhiGoel

在Angular 7中也可以。ng g c <componentname>或ng generate component <Name>

— Chinmoy

您可以根据文档根据

— Savaj Patel

11

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

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

ng new my-app
cd my-app
ng g component 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）
source

147

在Angular4中，它的作用相同。如果遇到错误，我认为您的问题出在其他地方。

在命令提示符下键入

ng生成组件YOURCOMPONENTNAME

这有甚至速记：命令generate可以作为g和component作为c：

ng gc YOURCOMPONENTNAME

您可以使用ng --help，ng g --help或ng g c --help用于文档。

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

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

更新：在Angular版本8中仍然可以使用。

— 迈克·博文兰德
source

1

我收到此错误-----------安装组件为声明SilentError定位错误的模块：未找到模块文件

— surbhiGoel

1

我想知道，是否有任何命令可用来删除创建的组件，包括其参考应用程序模块？

— panky sharma

2

@pankysharma不，Angular CLI中没有命令来删除组件，但是如果要使用不同的选项重新创建组件，请执行以下操作：您可以使用--force（简写：-f）选项覆盖文件。

— Mike Bovenlander '18

“ ng gc员工”为我工作。我在'ng'之前使用'$'，例如'$ ng gc employees'，在这种情况下会造成问题。

— Raj Chaurasia

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

— Chirag K

27

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

2）然后在终端下的Command下运行。

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)

— 乔杜里
source

14

如果要创建不带.spec文件的新组件，则可以使用

ng g c component-name --spec false

您可以使用以下方法找到这些选项 ng g c --help

— 米尔·米亚托维奇
source

11

ng g component componentname

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

手动创建组件时，应将组件添加到模块的声明中，如下所示：

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

— 苏德·辛格
source

8

确保您在CMD行的项目目录中

    ng g component componentName

— 沙
source

6

用于在特定文件夹下创建组件

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

该行将在创建“ create-employee”组件的下方创建一个名为“ employee”的文件夹。

没有创建任何文件夹

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

— 亚历山大·扎尔多斯塔诺夫（Alexander Zaldostanov）
source

4

ng g c componentname

它将创建以下4个文件：

componentname.css
componentname.html
componentname.spec.ts
componentname.ts

— 坎勒什·库玛瓦
source

3

在我的情况下，生成组件component_name无效，因为我没有将“ app”用作项目文件夹名称，而是将其重命名为其他名称。我再次将其更改为app。现在，它工作正常

— surbhiGoel
source

3

ng g c COMPONENTNAME

该命令用于使用我在angular2中使用的终端生成组件。

g代表组件生成c

— 拉耶夫·奥马尔
source

2

就我而言.angular-cli.json，我的src文件夹中恰好有另一个文件。删除它解决了问题。希望能帮助到你

angular 4.1.1 angular-cli 1.0.1

— 相位的
source

2

ng g component component name

在键入此命令之前，您将进入项目指令路径

— 沙
source

2

ng gc --dry-run，这样您就可以在实际执行操作之前先查看要执行的操作，这可以节省一些挫败感。只是告诉您它将实际执行的操作。

— 阿吉·琼恩87
source

2

您应该src/app在命令行上的angular-cli项目的文件夹中。例如：

D:\angular2-cli\first-app\src\app> ng generate component test

只有这样，它才会生成您的组件。

— 阿姆鲁塔·塔库（Amruta Thakur）
source

1

您是否已将angular-cli更新到最新版本？还是您尝试更新节点或npm或打字稿？出现此问题是因为有诸如angular / typescript / node之类的版本。如果要更新cli，请在此处使用此链接。 https://github.com/angular/angular-cli/wiki/stories-1.0-update

— 米特拉布里亚斯
source

1

转到您的角度项目文件夹，然后打开命令promt，输入“ ng g component header”类型，其中header是要创建的新组件。默认情况下，header组件将在app组件内部创建。您可以在例如，如果您想在上面创建的标题内创建一个组件，则键入“ ng g component header / menu”。这将在标题组件内创建一个菜单组件

— 萨吉斯·萨蒂扬
source

1

ng g c COMPONENTNAME 应该可以工作，如果您的模块未找到异常，请尝试以下操作-

检查您的项目目录。
如果您使用的是Visual Studio代码，请重新加载它或在其中重新打开项目。

— 卡玛尔·辛格·梅纳（Kamal Singh Meena）
source

1

转到指定文件夹中的项目位置

C:\Angular6\sample>

在这里您可以输入命令

C:\Angular6\sample>ng g c users

在这里g表示generate，c表示component，users是组件名

它将生成4个文件

users.component.html,
users.component.spec.ts,
users.component.ts,
users.component.css

— 洛娃（Lova Chittumuri）
source

1

步骤1：

进入项目目录！（光盘进入创建的应用）。

第2步：

输入以下命令并运行！

ng generate component [componentname]

在[componentname]部分中添加要生成的组件的名称。

要么

ng generate c [componentname]

在[componentname]部分中添加要生成的组件的名称。

两者都会工作

作为参考，请查阅Angular文档的这一部分！

https://angular.io/tutorial/toh-pt1

作为参考，请在github上查看Angular Cli的链接！

https://github.com/angular/angular-cli/wiki/generate-component

— 柯林斯墨水
source

1

ng generate component componentName.

它将自动将组件导入module.ts

— 何塞·埃拉斯
source

1

cd到您的项目并运行，

> ng generate component "componentname"
ex: ng generate component shopping-cart

要么

> ng g c shopping-cart

（这将在名称为“ shopping-cart”的“ app”文件夹下创建新文件夹，并创建.html，.ts，.css。specs文件。）

如果您不想生成.spec文件

> ng g c shopping-cart --skipTests true

如果要在“应用”下的任何特定文件夹中创建组件

> ng g c ecommerce/shopping-cart

（您将获得文件夹结构“ app / ecommerce / shopping-cart”）

— 阿米德·巴德里亚
source

1

转到CMD中的项目目录，然后运行以下命令。您也可以使用Visual Studio代码终端。

ng generate component "component_name"

要么

ng g c "component_name"

"component_name"将创建一个新文件夹

component_name / component_name.component.html component_name / component_name.component.spec.ts component_name / component_name.component.ts component_name / component_name.component.css

新组件将是自动添加的模块。

您可以避免通过以下命令创建规格文件

ng g c "component_name" --nospec

— 南塔鲁潘
source

0

在Angular中主要有两种生成新组件的方法ng g c <component_name>，一种是使用ng generate component <component_name>。使用这些命令之一，可以生成新组件。

— GT_hash
source