Click here to Skip to main content
15,880,972 members
Search within:


Circular dependency when adding flash message module & service in angular 2
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
dependency
Below is the code in app.module.ts file

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

import { AppComponent } from './app.component';
import { HomeComponent } from './HomePage/home.component';
import { ProfileComponent } from './ProfilePage/profile.component';
import { RegisterComponent } from './RegisterPage/Register.component';
import { BaseComponent } from './BasePage/base.component';
import { LoginComponent } from './LoginPage/login.component';
import { AboutComponent } from './AboutPage/about.component';
import { PageNotFoundComponent } from './PageNotFound/pageNotFound.component';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { AuthenticationService } from './Services/authentication.service';
import { GenderPipe } from './CustomePipes/genderPipe';
import { AuthGuard } from './Guard/auth.guard';
import { FlashMessagesModule } from 'angular2-flash-messages';

const appRoutes: Routes = [
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
    { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
    { path: 'about', component: AboutComponent, canActivate: [AuthGuard] },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
];

@NgModule({
    imports: [BrowserModule, HttpModule, FormsModule, RouterModule.forRoot(appRoutes), FlashMessagesModule.forRoot()],
    declarations: [AppComponent, BaseComponent, HomeComponent, ProfileComponent, PageNotFoundComponent, RegisterComponent, LoginComponent, AboutComponent, GenderPipe],
    bootstrap: [AppComponent],
    providers: [AuthenticationService, AuthGuard]
})
export class AppModule { }



Below is the code in component:
import { Component, OnInit } from '@angular/core';
import { IProfile } from '../interfaces/profile.Interface';
import { ICountry } from '../interfaces/country.interface';
import { IState } from '../interfaces/state.interface';
import { ProfileService } from '../Services/profile.service';
import { AddressService } from '../Services/address.service';
import { Observable } from 'rxjs/Observable';
import { FlashMessagesService } from 'angular2-flash-messages';

@Component({
    selector: 'profile',
    templateUrl: '/src/app/profilePage/profile.component.html',
    providers: [ProfileService, AddressService, FlashMessagesService]
})
export class ProfileComponent {

    header: string = "Profile";
    profileData: IProfile;
    countryList: ICountry[];
    permStateList: IState[];
    currStateList: IState[];
    profilePicture: string;
    disableObject: boolean = false;

    constructor(public _svcProfile: ProfileService, public _svcAddress: AddressService, private flashMessagesService: FlashMessagesService) {
    }

    ngOnInit() {
        this._svcProfile.getProfileData('abc')
            .subscribe(response => this.profileData = response);

        this._svcAddress.getCountryList()
            .subscribe(response => this.countryList = response);

        this._svcProfile.getProfilePicture('abc')
            .subscribe(response => (this.profilePicture = response));

        this._svcAddress.getStateList('2')
            .subscribe(response => this.permStateList = response);

        this._svcAddress.getStateList('1')
            .subscribe(response => this.currStateList = response);
    }

}


as soon as I add flash messages service related code in component I get below error:
profile:20 Error: (SystemJS) Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files.
	Error: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files.
	    at syntaxError (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:1725:34)
	    at eval (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:15849:40)
	    at Array.forEach (<anonymous>)
	    at CompileMetadataResolver._getProvidersMetadata (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:15834:19)
	    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:15250:30)
	    at CompileMetadataResolver._getEntryComponentMetadata (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:15922:45)
	    at eval (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:15908:48)
	    at Array.forEach (<anonymous>)
	    at CompileMetadataResolver._getEntryComponentsFromProvider (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:15907:30)
	    at eval (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:15871:83)
	Evaluating http://localhost:51042/src/main.js
	Error loading http://localhost:51042/src/main.js
	    at syntaxError (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:1725:34)
	    at eval (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:15849:40)
	    at Array.forEach (<anonymous>)
	    at CompileMetadataResolver._getProvidersMetadata (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:15834:19)
	    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:15250:30)
	    at CompileMetadataResolver._getEntryComponentMetadata (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:15922:45)
	    at eval (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:15908:48)
	    at Array.forEach (<anonymous>)
	    at CompileMetadataResolver._getEntryComponentsFromProvider (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:15907:30)
	    at eval (http://localhost:51042/node_modules/@angular/compiler/bundles/compiler.umd.js:15871:83)
	Evaluating http://localhost:51042/src/main.js
	Error loading http://localhost:51042/src/main.js
(anonymous) @ profile:20
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1517
globalZoneAwareCallback @ zone.js:1543
XMLHttpRequest.send (async)
scheduleTask @ zone.js:2935
ZoneDelegate.scheduleTask @ zone.js:407
Zone.scheduleTask @ zone.js:232
Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1092
(anonymous) @ zone.js:2967
proto.(anonymous function) @ zone.js:1372
fetchTextFromURL @ system.src.js:1051
(anonymous) @ system.src.js:1778
ZoneAwarePromise @ zone.js:875
(anonymous) @ system.src.js:1777
(anonymous) @ system.src.js:2806
(anonymous) @ system.src.js:3384
(anonymous) @ system.src.js:3707
(anonymous) @ system.src.js:4099
(anonymous) @ system.src.js:4562
(anonymous) @ system.src.js:4831
(anonymous) @ system.src.js:407
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1517
globalZoneAwareCallback @ zone.js:1543
XMLHttpRequest.send (async)
scheduleTask @ zone.js:2935
ZoneDelegate.scheduleTask @ zone.js:407
Zone.scheduleTask @ zone.js:232
Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1092
(anonymous) @ zone.js:2967
proto.(anonymous function) @ zone.js:1372
fetchTextFromURL @ system.src.js:1051
(anonymous) @ system.src.js:1778
ZoneAwarePromise @ zone.js:875
(anonymous) @ system.src.js:1777
(anonymous) @ system.src.js:2806
(anonymous) @ system.src.js:3384
(anonymous) @ system.src.js:3707
(anonymous) @ system.src.js:4099
(anonymous) @ system.src.js:4562
(anonymous) @ system.src.js:4831
(anonymous) @ system.src.js:407
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1517
globalZoneAwareCallback @ zone.js:1543
XMLHttpRequest.send (async)
scheduleTask @ zone.js:2935
ZoneDelegate.scheduleTask @ zone.js:407
Zone.scheduleTask @ zone.js:232
Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1092
(anonymous) @ zone.js:2967
proto.(anonymous function) @ zone.js:1372
fetchTextFromURL @ system.src.js:1051
(anonymous) @ system.src.js:1778
ZoneAwarePromise @ zone.js:875
(anonymous) @ system.src.js:1777
(anonymous) @ system.src.js:2806
(anonymous) @ system.src.js:3384
(anonymous) @ system.src.js:3707
(anonymous) @ system.src.js:4099
(anonymous) @ system.src.js:4562
(anonymous) @ system.src.js:4831
(anonymous) @ system.src.js:407
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
ZoneAwarePromise.then @ zone.js:946
(anonymous) @ system.src.js:4789
import @ system.src.js:839
(anonymous) @ system.src.js:1801
(anonymous) @ profile:20


What I have tried:

I changed the code component to:

import { Component } from '@angular/core';
import { FlashMessagesService } from 'angular2-flash-messages';

@Component({
    selector: 'profile',
    templateUrl: '/src/app/profilePage/profile.component.html',
    providers: [FlashMessagesService]
})
export class ProfileComponent {
    header: string = "Profile";
    constructor(private flashMessagesService: FlashMessagesService) {
    }

    SaveProfileData() {
        this.flashMessagesService.show('flash message');
    }
}


Still it did not work, however when i remove flash messages service related code then it works.
Posted
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Solving Circular Dependency
This dependency cannot be added because it will create a circular dependency
circular dependencies error
CORS issue when angular and web API(.NET core) is used [SOLVED]
Converting azure angular datetime to .NET datetime
Could not load file or assembly or one of its dependencies. The specified module could not be found.
reference to the business access layer could not be added adding this project as a reference would cause a circular dependency how to solve this error?
Problem with post method in angular service
When run angular with webapi ASP.NET core project get error
Angular code in umbraco

Advertise
Privacy
Cookies
Terms of Use
Last Updated 6 Mar 2018
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web03 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900