エラー：（SystemJS）予期しない値「CommonService」モジュールによって宣言された「AppModule」

Question

こんにちは、私は「CommmonService」と呼ばれるサービスを利用しようとしている問題をした

事は、私はこのサービスを使用する必要があるということです他のコンポーネントからの呼び出し機能が、私はこのエラーを取得しています：

common.service.ts

import { Injectable, Inject } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class CommonService { 
    private notify = new Subject<any>(); 
    /** 
    * Observable string streams 
    */ 
    notifyObservable$ = this.notify.asObservable(); 

    constructor() { } 

    public notifyOther(data: any) { 
     if (data) { 
      this.notify.next(data); 
     } 
    } 
} 

アプリ： "エラー（SystemJS）予期しない値 'CommonService' モジュール 'AppModule' で宣言しました"。 module.ts

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

import { AppHeader } from './app.header'; 
import { CommonService } from './common.service'; 
import { AppContent } from './app.content'; 
import { AppModal } from './app.modal'; 
import { AppFooter } from './app.footer'; 
import { DialogComponent } from './dialog.component'; 


@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
    ], 
    declarations: [ 
     AppHeader, 
     CommonService, 
     AppContent, 
     AppFooter, 
     AppModal, 
     DialogComponent 
    ], 
    bootstrap: [AppHeader, AppContent, AppFooter, AppModal] 
}) 

export class AppModule { } 

app.content.ts

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

import { Product } from './product'; 
import { CommonService } from './common.service'; 


const PRODUCTS: Product[] = [ 
    { id: 0, color: 'Negro', quantity: 15, price: 500, imgUrl: '', cant: 1 }, 
    { id: 1, color: 'Castaño Oscuro', quantity: 15, price: 500, imgUrl: '', cant: 1 }, 
    { id: 2, color: 'Castaño Medio', quantity: 15, price: 500, imgUrl: '', cant: 1 }, 
    { id: 3, color: 'Gris', quantity: 15, price: 500, imgUrl: '', cant: 1 }, 
    { id: 4, color: 'Rubio', quantity: 15, price: 500, imgUrl: '', cant: 1 } 
]; 

@Component({ 
    selector: 'content-app', 
    templateUrl: 'app/content.html' 
}) 

export class AppContent implements OnInit, OnDestroy { 

    constructor(private commonService: CommonService) { 
    } 

    ngOnInit() { 
    } 

    onSubmit() { 
     // this method needs to be called when user click on submit button from header 
     alert("x"); 
     this.commonService.notifyOther({ option: 'onSubmit', value: 'From app.content' }); 
    } 

    ngOnDestroy() { 
    } 

    products = PRODUCTS; 

    addCant(product) { 
     product.cant++; 
     product.price = this.updatePrice(product); 
     product.quantity = this.updateQuantity(product); 
    } 

    removeCant(product) { 

     if (product.cant > 1) { 
      product.cant--; 
      product.price = this.updatePrice(product); 
     } 
    } 

    buy(product) { 
     sessionStorage['product'] = JSON.stringify(product); 

     var temp = sessionStorage.getItem('product'); 
     var productObj = JSON.parse(temp); 
     //alert(productObj.id); 

    } 

    updatePrice(product): number { 
     return 500 * product.cant; 
    } 

    updateQuantity(product): number { 
     return 15 * product.cant; 
    } 

    showModal() { 
    // this.modal.showModal(); 
    } 


} 

app.modal.ts

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { CommonService } from './common.service'; 
import { Subscription } from 'rxjs/Subscription'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app/app.modal.html' 
}) 

export class AppModal implements OnInit, OnDestroy { 

    private subscription: Subscription; 

    constructor(private commonService: CommonService) { 

    } 

    ngOnInit() { 
     this.subscription = this.commonService.notifyObservable$.subscribe((res) => { 
      if (res.hasOwnProperty('option') && res.option === 'onSubmit') { 
       console.log(res.value); 
       // perform your other action from here 
       alert("llegamos"); 

      } 
     }); 
    } 

    ngOnDestroy() { 
     this.subscription.unsubscribe(); 
    } 

    showDialog = false; 

    showModal() { 

     this.showDialog = true; 
    } 
} 

私が間違ってやっているの任意のアイデア？ おかげ

Answer 1

CommonServiceがサービスであるためには、あなたは以下のショーとして@NgModuleのprovidersメタプロパティでそれを宣言する必要があり、

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
    ], 
    declarations: [ 
     AppHeader, 
     AppContent, 
     AppFooter, 
     AppModal, 
     DialogComponent 
    ], 
    providers:[CommonService]   //<---added this line 

    bootstrap: [AppHeader, AppContent, AppFooter, AppModal] 
    //<<---not sure why are you using AppContent, AppFoooter and AppModal stuffs for bootstrap !!! 
}) 

Answer 2

は、それが動作するようになりました、ありがとう！ブートストラップについては、私が何をやっているのか分かりませんが、削除してもうまくいきませんでした。