Angular/cliでng g component [コンポーネント名]でのエラーがよくわかりません

Question

エラー時の開発version

@angular/cli: 1.3.2
node: 7.0.0
os: win32 x64
@angular/animations: 4.3.6
@angular/cdk: 2.0.0-beta.10-6b5100b
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/material: 2.0.0-beta.10-6b5100b
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.3.2
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6

エラー内容

コマンドラインで新たにコンポーネントを生成しようとする際に下記のエラーがでます。

Error locating module for declaration
        SilentError: Multiple module files found: ["app.module.ts","material.module.ts"]

思い当たる所

現在、Angular/cliで@angular/materialを使用してアプリケーションの開発をしていて、material用のモジュールを作成したからだと思うのですが。。
以前に、他のアプリケーション開発でルートをまとめたモジュールを作成した時にはこのようなエラーが出なかったのでもしわかる方教えてください。

material.moduels.ts

import { NgModule } from '@angular/core';

import {
    MdButtonModule,
    MdMenuModule,
    MdToolbarModule,
    MdIconModule,
    MdCardModule,
    MdGridListModule,
    MdSidenavModule,
    MdTableModule
} from '@angular/material';

@NgModule({
    imports: [
        MdButtonModule,
        MdMenuModule,
        MdToolbarModule,
        MdIconModule,
        MdCardModule,
        MdGridListModule,
        MdSidenavModule,
        MdTableModule
    ],
    exports: [
        MdButtonModule,
        MdMenuModule,
        MdToolbarModule,
        MdIconModule,
        MdCardModule,
        MdGridListModule,
        MdSidenavModule,
        MdTableModule
    ]
})

export class MaterialModule {}

app.moduels.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

import { FormsModule } from '@angular/forms';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

https://github.com/angular/angular-cli/blob/master/README.md

angular-cli will add reference to components, directives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow this steps:

ng g module new-module to create a new module
call ng g component new-module/new-component
This should add the new component, directive or pipe reference to the new-module you've created.

説明文を読んで見る限り
hogehogeコンポーネントを追加する場合

ng g component material/hogehoge
または
ng g component app/hogehoge

で作成できそうです。

Comments

[kaoru3151]

回答ありがとうございます！
同じ階層にapp.modules.tsとmaterial.modules.tsが同じ階層にあったので、material/material.modules.tsにようにしたら解決しました。
ありがとうございました！