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

时间:2016-11-21 15:55:15

标签: angular angular-cli

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

ng generate component test

执行后,会生成新的组件文件,但引用不会添加到app.module.ts文件中:

  

找不到应用模块。请将新课程添加到您的组件中。

enter image description here

我试图找到解决方法来解决这个问题所以我不必总是导入新组件并手动将其添加到声明中,但我在网上找不到任何关于此问题的信息。

我认为它可能与我的angular-cli.json文件有关,但似乎没问题:enter image description here

有什么想法吗?

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

enter image description here

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 { }

2 个答案:

答案 0 :(得分:1)

angular-cli无法找到app模块的问题是“@”符号和“NgModule”名称不在同一行。这不会导致代码在执行时失败,但会阻止CLI检测模块:

@
NgModule({

如果你在同一行上写两个,cli能够成功找到模块:

@NgModule({

答案 1 :(得分:0)

没问题。但未添加,您安装的组件。因此,请将您的组件名称添加到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 { }