2016-12-05 19 views
0

私はAngular2 CLIとMeteorで遊んでいました。 私は、Angular2 CLIでコンポーネントを生成するときに、別のモジュールに含めるには、そのコンポーネントを組み込み、そのモジュールの宣言配列内に挿入する必要があることに気付きました。 enter image description hereAngular2 CLI角度メテオコンポーネントの作成

menu.component.ts

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

import { MenuItem } from './menu-item';           
import { MENUITEMS } from './mocks'; 

@Component({ 
    selector: 'menu',                     
    templateUrl: './menu.component.html',           
    styleUrls: ['./menu.component.css'] 
}) 

export class MenuComponent implements OnInit { 

    menuItems: MenuItem[];                   

    constructor() { }                     

    ngOnInit() { 
    this.menuItems= MENUITEMS;               
    }                             

} 

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 { RouterModule } from '@angular/router'; 

import { AppComponent } from './app.component'; 
import { MenuComponent } from './menu/menu.component'; 
import { HomeComponent } from './home/home.component'; 
import { TrendsComponent } from './trends/trends.component'; 
import { ControllerComponent } from './controller/controller.component'; 
import { WaterPlantComponent } from './water-plant/water-plant.component'; 
import { DocsComponent } from './docs/docs.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    MenuComponent, 
    HomeComponent, 
    TrendsComponent, 
    ControllerComponent, 
    WaterPlantComponent, 
    DocsComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot([ 
     { path: 'home', redirectTo: '', pathMatch: 'full' }, 
     { path: '', component: HomeComponent }, 
     { path: 'trends', component: TrendsComponent }, 
     { path: 'controller', component: ControllerComponent }, 
     { path: 'waterplant', component: WaterPlantComponent }, 
     { path: 'docs', component: DocsComponent } 
    ]) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

私はmenu.componentフォルダにindex.tsを追加した後、それだけで動作します:

index.ts

import { MenuComponent } from './menu.component'; 

export * from './menu.component'; 

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { RouterModule } from '@angular/router'; 

import { AppComponent } from './app.component'; 
import { PARTIES_DECLARATIONS } from './parties'; 
import { MenuComponent } from './menu/menu.component'; 

@NgModule({ 
    imports: [ 
    BrowserModule 
    ], 
    declarations: [ 
    AppComponent, 
    ...PARTIES_DECLARATIONS, 
    MenuComponent 
    ], 
    bootstrap: [ 
    AppComponent 
    ] 
}) 
export class AppModule {} 

は理由が流星のためのCLIおよびjscommonためES6である(tsconfig.json内側)コンパイラの "モジュール"、だろうか?

ありがとうございました!

+0

あなたの投稿は非常に混乱しています。「Meteorを使用すると、index.tsファイルをmenu.componentフォルダに追加しない限り動作しません」と言っているのですか?私はindex.tsを追加しますか? " – Mikkel

+0

はい、それがポイントです。投稿編集、ありがとう –

答えて

0

Angular CLIでは、importsというディレクトリ内に明示的にインポートされたファイルを配置することを推奨するAngular-Meteor directory structureではなく、Angular2スタイルのガイドディレクトリ構造を使用しているようです。 Meteorのハイブリッドモジュールシステムでは、importsディレクトリ以外のファイルのMeteor default load orderがのロードオーダーの変更によって解決される場合があります。これはのexportステートメントによって作成されますか?

関連する問題