CODEWITHSUNDEEP
angularimport
Code Ratchet
Code Ratchet

Reputation: 6029

Import Module into another module to access services

I have the following module:

import { NgModule } from '@angular/core';
import { ActivitiesService } from '../services/activities.service';

@NgModule({
    declarations: [],
    imports: [ActivitiesService],
    providers: [],
    bootstrap: [],
    exports: [ActivitiesService]
})

export class ActivitiesModule { }

The ActivitiesService will be used through different components within my application, so I decided to create a shared module for the ActivitiesService which imports the service and exports it making it available for other modules to import.

I then created a new module, this module will import the above module which is as follows:

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

// Components
import { ProfileComponent } from '../component/profile/profile.component';

// Routing
import { profileRouting } from '../routing/profile-routing';

// Shared << 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 { }

Now inside my ProfileComponent I have the following declaration:

// Services
import { ActivitiesService } from '../../../shared/services/activities.service';

The constructor for ProfileComponent

constructor(private activityService: ActivitiesService) {}

My ngOnInit method looks like so:

ngOnInit() {

   this.activityService.getActivities();

}

Yet when I run this, and navigate to the Profile page I get the error message:

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.

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?

Upvotes: 3

Views: 13047

Answers (1)

Code Ratchet
Code Ratchet

Reputation: 6029

Resolved by doing the following:

ActivitiesModule:

import { NgModule } from '@angular/core';
import { ActivitiesService } from '../services/activities.service';

@NgModule({
    declarations: [],
    imports: [],
    providers: [ActivitiesService],
    bootstrap: [],
    exports: []
})

export class ActivitiesModule { }

Importing into the ProfileModule remains the same.

Upvotes: 2

Related Questions