質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • Angular

    123questions

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 689

kaoru3151

score 37

 エラー時の開発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 { }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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


で作成できそうです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/12 09:00

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

    キャンセル

同じタグがついた質問を見る

  • Angular

    123questions