last day (14 days later) » 

3:05 PM
0
A: How to get access to this property inside subscribe()?

Maciej TrederAre you sure you have injected your service in the constructor? @Component({ //some component setup }) export class MyComponent{ constructor(private _flashMessagesService: FlashMessagesService) }

 
Yes, I am sure, also I added this is app.module
 
You need it in the component constructor.
 
Yes, I dud it before
But I use this not in component, in service class
 
Ok, do you have any error message in the console?
 
Yes: ERROR TypeError: Cannot read property 'show' of undefined in line: this._flashMessagesService.show('dd', { cssClass: 'alert-success', timeout: 1000 });#
 
3:05 PM
And what is happening when you are trying to use .sho() outside of observable? It runs correctly?
 
Do you mean outside service? in component?
 
Hello
Nope. I mean before this line:
 
It works in this section right:
 
return this.http.get(this.apiUrl.base_path + 'credentials')
 
public ngOnInit() {
this.flashMessagesService.show('We are in about component!', { cssClass: 'your-css-class' });
}
but does not work in service
export class AuthenticationService {

constructor(private http: Http, private credentials: Credentials, public apiUrl: ApiUrls, public localStorageService: LocalStorageService, public router: Router, public _flashMessagesService: FlashMessagesService) {

//this._flashMessagesService.show('dd', { cssClass: 'alert-success', timeout: 1000 });
}}
 
3:06 PM
Ok... let me think a moment..
Ok.. I think i got the point.
Could you show me, where are you using this service (AuthenticationService).
I think, that you are trying to make some UI operation, before it is initialized.
 
Just a moment
in main component html:
 
html is not important. Show me the ts file with your component declaration.
 
And I use AuthenticationService
only by event click
public authenticate(value: any) {
this.authenticationFactory.login(value.phone, value.password);
}
Where this.authenticationFactory is:
constructor(private fb: FormBuilder,
private router: Router,
private http: Http,
private credential: Credentials,
private apiUrl: ApiUrls,
private localStorage: LocalStorageService,
private flashMessagesService: FlashMessagesService,
private captcha: Captcha
) {

this.authenticationFactory = new AuthenticationService(
http,
credential,
apiUrl,
localStorage,
flashMessagesService); }
 
Ok... Sec.. So in the service you got something like:
public login(phone, password) { and here you are calling your this._flasMessageService}
yes?
 
This is more extended error: at SafeSubscriber.http.get.map.subscribe._this._flashMessagesService.show.cssClass [as _next] (localhost:3000/main.bundle.js:111598:40)
yes, code is:
public login(username: string, password: string) { return this.http.get(this.apiUrl.base_path + 'credentials')
.map(res => res.json())
.subscribe(
credentials => {
this._flashMessagesService.show('We are in about component!', { cssClass: 'alert-success', timeout: 1000 });
this.saveToken(credentials);
},
err => {
this._flashMessagesService.show('We are in about component!' + err, { cssClass: 'alert-error', timeout: 1000 });
}
); }
 
3:17 PM
And you are sure for 100% that this moment is not called anywhere else? Try to add console.log in it and reload your app
 
console.log(?)
 
yeah.
Let's do such test.
Add:
ngOninit() {console.log('component initialized')}
to your component
and console.log('method invoked') to your service method.
 
First: work
Second: you mean in login method?
or in constructor of service?
 
in logic.
just before you are calling flashMessageService
Ohh. I think that it could be also another point of issue. In which module are you importing flashMessagesService?
 
it works
Yes in service I have
import { FlashMessagesService } from 'angular2-flash-messages';
 
3:22 PM
Ok, in service. And in the module?
 
and in app.module: import { FlashMessagesModule } from 'angular2-flash-messages';
 
And that's all?
 
imports: [
FlashMessagesModule }
 
Ok. And this is the only Module in your app?
 
Yes
 
3:23 PM
And your service is provided in the same module?
 
in the same where?
 
imports: [FlassMessagesModule], providers: [YourService]
This is how it looks?
 
no I dont have nothin in proviers
I mean my service
 
Ohh... So I am suprised that it is working ;)
Do you have this project hosted somewhere? GitHub? GitLab?
 
I added, but it does not work
No, it is private project
I can share screen via Chrome Destop remote
 
3:28 PM
I am afraid that the problem is burred in some other place.
Unfornatelly I don't have ability to use screen sharing tool at this moment.
 
I try to do this:
constructor(private http: Http, private credentials: Credentials, public apiUrl: ApiUrls, public localStorageService: LocalStorageService, public router: Router, public _flashMessagesService: FlashMessagesService) {


console.log(this._flashMessagesService);
}
 
Noo. It doesn't make sense this way..
If you have thone everything as it is said in the npm packe of that service.
I think you should report a bug to it.
Maybe something it's wrong in it.
 
maybe I dont need to import library inside service if I imported this in component?
 
It depends on your flow.
You can also perform such actions in component.
In example login via service return observable and listen for changes
ie: public login(login, pass): Observable<boolean>
and in component
this.service.login.filter(result => result).subscribe(()=> invoke flasmessage here);
 
Problem is that I get undefined in this place before calling http request
public login(username: string, password: string) {

console.log(this._flashMessagesService); // Here is undefined }
 
3:43 PM
Ok. But in Component it is working, yup?
 
Yes
 
So invoke it from component, depending on result from the login function
 
I can not because all were made in service, I mean success, error callback
return this.http.get(this.apiUrl.base_path + 'credentials')
.map(res => res.json())
.subscribe(
credentials => {
this._flashMessagesService.show('We are in about component!', { cssClass: 'alert-success', timeout: 1000 });
this.saveToken(credentials);
},
err => {
this._flashMessagesService.show('We are in about component!' + err, { cssClass: 'alert-error', timeout: 1000 });
}
);
okay, will try
1 minute
 
just return this.http.get()
get it in your component.
and .map.subscribe in component
 
Yes, I did this, it works in component
 
3:46 PM
So.. Problem solved.
Ohh.. It took a little bit ;)
 
Thank you for all! Can you share email address or any another contact?
 
Will it be enough? ;)
 
Yes, thank you, but are you from?
 
Poland, Krakow.
You can also follow me on twitter if you want
@MaciejTreder, Krakow, Poland
2 tweets, 4 followers, following 26 users
If you want you can check out my other answers on Stack Overflow:
Maybe you will find something interesting for you.
g2g see ya
 

last day (14 days later) »