Angular2（CLI）：独立した共通のコンポーネントとロジック・コンポーネントの角1.4では

Question

のように、私はNG6の定型文を使用していたし、それは素晴らしい構造を生成していました：

app 
    common 
    components 
    services 


etc... 

今私はtypescriptですとangular2学ぶしようとしています。 Angular CLIを使用しています。

と私はポートの角度1.4からの構造のいくつかをしたい：私は分離することを意味し、例えば、顧客成分など

から、コンポーネントを選択し、私は、このような構造を作成：

を

コンポーネント - モジュール、顧客はモジュール、リスト - はコンポーネントです。

私のapp.component.htmlではどのようにリストコンポーネントを使用できますか？ Like：

<app-customer-list></app-customer-list> 

モジュール&のインポートに問題があります。

私は、このような方法でそれを実行します。

**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 { ComponentsModule } from './components/components.module'; 

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

-

**components.module.ts** 

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

import { CustomerModule } from './customer/customer.module'; 


@NgModule({ 
    imports: [ 
    CustomerModule 
    ], 
    declarations: [] 
}) 
export class ComponentsModule { } 

-

**customer.module.ts** 

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { CustomerComponent } from './customer.component'; 
import { ListComponent } from './list/list.component'; 

@NgModule({ 
    imports: [ 
    CommonModule 
    ] 
    declarations: [CustomerComponent, ListComponent] 
}) 
export class CustomerModule { } 

-

**list.component.ts** 

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-customer-list', 
    templateUrl: './list.component.html', 
    styleUrls: ['./list.component.css'] 
}) 
export class ListComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

どうしたの？どのように正しくインポートできますか？

Answer 1

あなたが他のモジュールと共有しているこれらのモジュールには、コンポーネント/モジュールをエクスポートするために忘れている：

**customer.module.ts** 
 

 
import { NgModule } from '@angular/core'; 
 
import { CommonModule } from '@angular/common'; 
 
import { CustomerComponent } from './customer.component'; 
 
import { ListComponent } from './list/list.component'; 
 

 
@NgModule({ 
 
    imports: [ 
 
    CommonModule 
 
    ] 
 
    declarations: [CustomerComponent, ListComponent], 
 
    exports: [CustomerComponent, ListComponent] 
 
}) 
 
export class CustomerModule { }

**components.module.ts** 
 

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

 
import { CustomerModule } from './customer/customer.module'; 
 

 

 
@NgModule({ 
 
    imports: [ 
 
    CustomerModule 
 
    ], 
 
    exports: [CustomerModule] 
 
    declarations: [] 
 
})