Angular 2 CLI“ng generate component”命令找不到 app.module答案

【问题标题】：Angular 2 CLI "ng generate component" command does not find app.moduleAngular 2 CLI“ng generate component”命令找不到 app.module
【发布时间】：2017-04-05 02:05:50
【问题描述】：

我一直在尝试使用 Angular2 的 CLI 工具使用以下命令生成新组件：

ng generate component test

执行后会生成新的组件文件，但引用并没有添加到app.module.ts文件中：

未找到应用模块。请将您的新类添加到您的组件中。

我试图找到解决此问题的解决方案，因此我不必总是导入新组件并将其手动添加到声明中，但我在网上找不到有关此问题的任何信息。

我认为这可能与我的 angular-cli.json 文件有关，但似乎没问题：

有什么想法吗？

更新：这是我的项目文件夹结构，很简单。我删除了不相关的文件夹：

app.module.ts 中的代码如下：

import { NgModule }         from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';
import { HttpModule }       from '@angular/http';
import { AppComponent }     from './app.component';
import { SearchComponent }  from './search/search.component';

@
NgModule({
    declarations: [
        AppComponent,
        SearchComponent
    ],
    imports: [
        BrowserModule,
        HttpModule
    ],
    providers: [
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }

【问题讨论】：

你当前的工作目录是什么？
嗨，乔恩，它是“C:\Sources\Search”。这发生在我从 Search 文件夹、Search/src 或 Search/src/app 执行命令时。总是一样的结果，找不到 app.module，只是文件被放到了树中不同的新文件夹中。
@AndrejLučanský 你确定吗？屏幕截图显示C:\Sources 似乎有些不对劲。你生成了一个名为 test 的组件，但它把它放在 src/app/search 中，即使它根本没有显示。
之所以这样，只是因为我从那里删除了整个 TFS 存储库路径，但它基本上是“C:\Sources\xxx\\SRC\Branches\xxx\Sprint-branch\Search>”。我忘记在快照中留下路径的最后一个“搜索”部分。我更新了图片，使其包含工作目录。
是的，它还在。我将更新问题并添加我的文件夹结构的片段。

标签： angular angular-cli

【解决方案1】：

angular-cli 找不到应用模块的问题是“@”符号和“NgModule”名称不在同一行。这不会使代码在执行时失败，但会阻止 CLI 检测模块：

@
NgModule({

如果两个都写在同一行，cli就可以成功找到模块：

@NgModule({

【讨论】：

我也遇到了同样的问题。但是在我的情况下，@NgModule 没有任何问题。（
这可能是早期 Angular 2 版本的解析器问题。我想新的 Angular 版本不再有这个“同一行”问题了。

【解决方案2】：

没问题。但未添加，您安装的组件。因此，将您的组件名称添加到 app.module.ts。
示例

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';<!-- My Installed Component -->
import { FooterComponent } from './footer/footer.component';<!-- My Installed Component -->

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,<!-- My Installed Component -->
    FooterComponent<!-- My Installed Component -->
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：