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

【问题标题】：How to create a new component in Angular 4 using CLI如何使用 CLI 在 Angular 4 中创建新组件
【发布时间】：2017-05-24 07:13:48
【问题描述】：

在 Angular 2 中我使用

ng g c componentname

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

【问题讨论】：

ng generate component componentname, according to the documentation
需要在module.ts文件中导入手动创建的组件
在 Angular 7 中也可以。 ng g c <componentname> 或 ng generate component <Name>
您可以根据其原理图和选项添加组件according to documentation

标签： angular-cli

【解决方案1】：

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

在命令提示符下输入

ng 生成组件 YOURCOMPONENTNAME

甚至还有简写形式：generate 命令可以用作g 和component 可以用作c：

ng g c 你的组件名

您可以将ng --help、ng g --help 或ng g c --help 用于文档。

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

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

更新：这在 Angular 8 版中仍然有效。

【讨论】：

我收到这个错误-----------安装组件错误定位模块声明 SilentError: No module files found
我想知道，是否有任何命令可用于删除创建的组件，包括它的参考应用程序模块？
@pankysharma 不，Angular CLI 中没有删除组件的命令，但是如果您想使用不同的选项重新创建组件；您可以使用--force（简写：-f）选项来覆盖文件。
“ng g c employees”为我工作。我在 'ng' 之前使用了 '$'，例如 '$ng g c employees'，这在这种情况下造成了问题。
如果您不需要新组件的测试文件 (.spec.ts)，请在命令中添加参数 --skipTests。

【解决方案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”是组件的名称。

commands 看起来像 -

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)

【讨论】：

【解决方案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)

【讨论】：

【解决方案4】：

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

ng g c component-name --spec false

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

【讨论】：

【解决方案5】：

ng g component componentname

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

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

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

【讨论】：

【解决方案6】：

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

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

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

不创建任何文件夹

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

【讨论】：

【解决方案7】：

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

    ng g component componentName

【讨论】：

【解决方案8】：

ng g c componentname

它将创建以下 4 个文件：

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

【讨论】：

【解决方案9】：

ng generate component component_name 在我的情况下不起作用，因为我没有使用“app”作为项目文件夹名称，而是将其重命名为其他名称。我再次将其更改为应用程序。现在，它工作正常

【讨论】：

【解决方案10】：

ng g c COMPONENTNAME

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

g 为组件生成 c

【讨论】：

【解决方案11】：

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

angular 4.1.1 angular-cli 1.0.1

【讨论】：

【解决方案12】：

ng g component component name

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

【讨论】：

【解决方案13】：

ng g c --dry-run 这样您就可以在实际执行之前查看您将要执行的操作，这样可以避免一些挫败感。只是告诉你它会做什么而不实际做。

【讨论】：

【解决方案14】：

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

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

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

【讨论】：

【解决方案15】：

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

ng generate component "component_name"

或

ng g c "component_name"

将创建一个带有"component_name" 的新文件夹

component_name/component_name.component.html 组件名称/组件名称.component.spec.ts 组件名称/组件名称.component.ts 组件名/组件名.component.css

新组件将自动添加模块。

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

ng g c "component_name" --nospec

【讨论】：

【解决方案16】：

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

【讨论】：

【解决方案17】：

转到您的 Angular 项目文件夹并打开命令提示输入“ng g component header” 其中标头是您要创建的新组件。默认情况下，标头组件将在应用程序组件内创建。您可以在组件内创建组件。例如，如果您想在我们上面制作的标头内创建一个组件，那么键入“ng g 组件标题/菜单”。这将在标题组件内创建一个菜单组件

【讨论】：

【解决方案18】：

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

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

【讨论】：

【解决方案19】：

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

C:\Angular6\sample>

这里可以输入命令

C:\Angular6\sample>ng g c users

这里g表示生成，c表示组件，users是组件名

它将生成4个文件

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

【讨论】：

【解决方案20】：

第一步：

进入项目目录！（cd 进入创建的应用程序）。

第二步：

输入以下命令并运行！

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

【讨论】：

【解决方案21】：

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

【讨论】：

【解决方案22】：

ng generate component componentName.

它会自动导入module.ts中的组件

【讨论】：

【解决方案23】：

cd 到你的项目并运行，

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

或

> ng g c shopping-cart

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

如果不想生成 .spec 文件

> ng g c shopping-cart --skipTests true

如果您想在“app”下的任何特定文件夹中创建组件

> ng g c ecommerce/shopping-cart

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

【讨论】：

【解决方案24】：

我认为您必须使用此命令升级最新的 angular cli。

npm install -g @angular/cli

然后如果你运行ng g c componentName，它就会工作。

【讨论】：

【解决方案25】：

如果您不希望该组件出现在一个文件夹中。

ng g c NameComponent --flat

【讨论】：