Gemeinsam genutzte Module in Angular4 verstehen

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

@NgModule({
  imports: [
    NgZorroAntdModule,
    AngularCommonModule
  ],
  declarations: [
    CommonComponent,
    NumberFilterPipe,
    ButtonDirective,
    StepComponent
  ],
  exports: [
    CommonComponent,
    NumberFilterPipe,
    ButtonDirective,
    StepComponent
  ],
  providers: [

  ],
})

import { NgModule } from '@angular/core';
import { AngularComponent } from './angular.component';
import {RouterModule, Routes} from '@angular/router';
import {CommonModule as CommonPrivateModule} from '../../common/common.module';
import {CommonModule} from '@angular/common';
import {HttpService} from '../../common/service/http.service';
import {HttpCommonService} from '../../common/service/http-common.service';
import {BrowserModule} from '@angular/platform-browser';

const routes: Routes = [
  {path: '', component:  AngularComponent}
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    CommonPrivateModule
  ],
  declarations: [AngularComponent],
  providers: []
})
export class AngularModule { }

<p>
  <app-step [stepString]="[&#39;common component&#39;]"></app-step>
  <button appButton> common directive</button> <br>
  common pipe: {{1 | numberFilter}}
</p>

@NgModule({
  imports: [
    NgZorroAntdModule,
    AngularCommonModule
  ],
  declarations: [
    CommonComponent,
    NumberFilterPipe,
    ButtonDirective,
    StepComponent
  ],
  exports: [
    CommonComponent,
    NumberFilterPipe,
    ButtonDirective,
    StepComponent
  ],
  providers: [
    HttpCommonService
  ],
})

import { Injectable } from '@angular/core';
import {Http, Request, RequestOptions} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {NzMessageService} from 'ng-zorro-antd';

@Injectable()
export class HttpCommonService {

  private testService: number;

  constructor(public httpService: Http, private _message: NzMessageService) {
  }

  set(number) {
    this.testService = number;
  }

  get() {
    return this.testService;
  }
}

export class AppComponent implements OnInit {

  title = 'app';

  constructor(private httpCommonService: HttpCommonService) {}

  ngOnInit(): void {
    console.log('appmodule 取值之前的number:' + this.httpCommonService.get());
    this.httpCommonService.set(1);
  }
}

export class HomeComponent implements OnInit {

  constructor(private httpCommonService: HttpCommonService) { }

  ngOnInit() {
    console.log('homemodule 取值之前的number:' + this.httpCommonService.get());
    this.httpCommonService.set(2);
  }
}

export class AngularComponent implements OnInit {
  firstString: string;

  constructor(private httpCommonService: HttpCommonService) { }

  ngOnInit() {
    console.log('angularmodule 取值之前的number:' + this.httpCommonService.get());
  }
}