Циклическая зависимость при добавлении модуля Flash message module & service в angular 2
Ниже приведен код в файле app.module.ts
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 { }
Ниже приведен код в компоненте:
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);
}
}
как только я добавляю flash messages service related code в компонент я получаю ниже ошибку:
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
Что я уже пробовал:
Я изменил компонент кода на:
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');
}
}
Тем не менее это не сработало, однако когда я удаляю код, связанный с сервисом flash messages, он работает.