title: Import Module into another module to access services
body: <p>I have the following <code>module</code>:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { ActivitiesService } from '../services/activities.service';
  
  @NgModule({
      declarations: [],
      imports: [ActivitiesService],
      providers: [],
      bootstrap: [],
      exports: [ActivitiesService]
  })
  
  export class ActivitiesModule { }
  </code></pre>
  
  <p>The <code>ActivitiesService</code> will be used through different components within my application, so I decided to create a shared module for the <code>ActivitiesService</code> which imports the service and exports it making it available for other modules to import.</p>
  
  <p>I then created a new <code>module</code>, this module will import the above <code>module</code> which is as follows:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  
  // Components
  import { ProfileComponent } from '../component/profile/profile.component';
  
  // Routing
  import { profileRouting } from '../routing/profile-routing';
  
  // Shared &lt;&lt; IMPORTED OTHER MODULE HERE
  import { ActivitiesModule } from '../../shared/modules/activities.module';
  
  
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  
  // Authentication Guard
  import { AuthenticationGuard } from '../../shared/guards/authentication.guard';
  
  
  @NgModule({
      imports: [
          profileRouting,
          FormsModule, 
          ReactiveFormsModule,
          ActivitiesModule],
      declarations: [
          ProfileComponent],
      providers: [AuthenticationGuard]
  })
  
  export class ProfileModule { }
  </code></pre>
  
  <p>Now inside my <code>ProfileComponent</code> I have the following declaration:</p>
  
  <pre><code>// Services
  import { ActivitiesService } from '../../../shared/services/activities.service';
  </code></pre>
  
  <p>The constructor for <code>ProfileComponent</code></p>
  
  <pre><code>constructor(private activityService: ActivitiesService) {}
  </code></pre>
  
  <p>My <code>ngOnInit</code> method looks like so:</p>
  
  <pre><code>ngOnInit() {
  
     this.activityService.getActivities();
  
  }
  </code></pre>
  
  <p>Yet when I run this, and navigate to the <code>Profile</code> page I get the error message: </p>
  
  <blockquote>
    <p>Error: Uncaught (in promise): Error: Unexpected value
    'ActivitiesService' imported by the module 'ActivitiesModule'. Please
    add a @NgModule annotation. Error: Unexpected value
    'ActivitiesService' imported by the module 'ActivitiesModule'. Please
    add a @NgModule annotation.</p>
  </blockquote>
  
  <p>I've checked naming conventions, checked @NgModule annotation and it's all correct.  Can someone shed some light into what I'm doing wrong here? </p>