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

时间：2017-05-24 07:13:48

标签： angular-cli

在角度2中我使用

ng g c componentname

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

23 个答案:

答案 0 :(得分：83)

在Angular4中，这将起作用。如果您收到错误，我认为您的问题出在其他地方。

在命令提示符下输入

  

ng生成组件YOURCOMPONENTNAME

甚至还有一些简写：命令generate可用作g，component用作c：

  

ng g c YOURCOMPONENTNAME

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

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

  

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

更新：这仍然适用于Angular版本7。

答案 1 :(得分：21)

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)

答案 2 :(得分：10)

ng g component componentname

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

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

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

答案 3 :(得分：7)

如果要创建没有const文件的新组件，可以使用

let

您可以使用.spec

找到这些选项

答案 4 :(得分：4)

确保您在项目cmd行中

    ng g component componentName

答案 5 :(得分：3)

ng生成组件component_name在我的情况下不起作用，因为而不是使用＆＃39; app＆＃39;作为项目文件夹名称，我将其重命名为其他名称。 我再次将其更改为app。 现在，它工作正常

答案 6 :(得分：3)

ng g c COMPONENTNAME

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

  

g用于生成组件

的c

答案 7 :(得分：3)

ng g c componentname

它将创建以下4个文件：

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

答案 8 :(得分：2)

在我的情况下，我的.angular-cli.json文件夹中碰巧有另一个src文件。删除它解决了这个问题。希望它有所帮助

angular 4.1.1 angular-cli 1.0.1

答案 9 :(得分：2)

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

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

不创建任何文件夹 

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

此行将在创建create-employee组件的下方创建一个文件夹名称employee。

答案 10 :(得分：2)

ng g c --dry-run所以你可以在实际操作之前看到你要做的事情会节省一些挫败感。只是告诉你在没有实际操作的情况下它会做什么。

答案 11 :(得分：2)

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

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

ng new my-app
cd my-app
ng g component User
ng serve

此处“ D：\ Angular \ my-app＆gt; ”是我的Angular应用程序项目目录，“用户”是组件的名称。

公地看起来像 - 

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)

答案 12 :(得分：2)

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

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

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

答案 13 :(得分：1)

进入项目并运行，

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

OR 

> 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”）

答案 14 :(得分：1)

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

ng生成组件“ component_name”

OR

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

答案 15 :(得分：1)

第一步：

进入Project Directory！（进入创建的应用程序）。

第二步：

键入以下命令并运行！

ng generate component [componentname]

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

OR

ng generate c [componentname]

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

两者都可以

有关Angular文档这一部分的信息，请参考！

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

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

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

答案 16 :(得分：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

答案 17 :(得分：1)

转到你的角项目文件夹并打开命令promt a type＆＃34; ng g component header＆＃34; 其中header是您要创建的新组件。默认情况下，标头组件将在app组件内创建。您可以在组件内创建组件。例如，如果您想在我上面创建的标题内创建一个组件，那么键入＆＃34; ng g组件标题/菜单＆＃34;。这将在标题组件

中创建一个菜单组件

答案 18 :(得分：1)

ng g c COMPONENTNAME应该有效，如果你找到模块未找到异常，那么试试这些东西 -

  1. 检查项目目录。
  2. 如果您使用的是visual studio代码，请重新加载或重新打开项目。

答案 19 :(得分：1)

ng g component component name

在键入此推荐检查之前，您将进入项目指令路径

答案 20 :(得分：1)

您是否将angular-cli更新为最新版本？或者你尝试更新节点或npm或打字稿？这个问题是因为像angular / typescript / node这样的版本。如果要更新cli，请在此处使用此链接。 https://github.com/angular/angular-cli/wiki/stories-1.0-update

答案 21 :(得分：0)

ng生成组件componentName。

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

答案 22 :(得分：0)

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

相关问题
最新问题