notifications are not visible

[martov1]

Hi, thanks for this library.

I added SimpleNotificationsModule to my imports array

in my component.ts file i imported

import { NotificationsService, SimpleNotificationsComponent } from 'angular2-notifications'

and the component itself only consists of

export class DashboardComponent implements OnInit {
  public text: string;
  public environmentName: string;
  public options = {
    position: ["bottom", "left"],
    timeOut: 5000,
    lastOnBottom: true
  }
  constructor(private sessionService: SessionService, private _service: NotificationsService) {
    this.environmentName = environment.name;


  }
  ngOnInit() {
    this._service.alert("hi", "hi")
    this._service.success("this.title", "this.content", {id: 123});

  }

}

in my component.html file I added
<simple-notifications></simple-notifications>

but nothing comes up, i can see the element created but it has zero height and it has no content inside it.

Am i doing something wrong?

[antoinezanardi]

Same for me, I have the same issue, no errors, the notication just doesn't show up.

Any ideas ?

[flauc]

is this version 0.4.51?

[martov1]

according to the package.json yes
"version": "0.4.51"

I installed it using NPM today

Thanks for your time <3

[flauc]

I think I must have messed something up with the latest release. Can you please try installing 0.4.5?

[martov1]

it seems it's not a valid version to download, i can either get 0.4.51 or 0.4.49,
I will try 0.4.49 and get back to you

λ  npm install [email protected] --save
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\user\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install" "[email protected]" "--save"
npm ERR! node v4.4.5
npm ERR! npm  v3.10.8
npm ERR! code ETARGET

npm ERR! notarget No compatible version found: [email protected]
npm ERR! notarget Valid install targets:
npm ERR! notarget 0.4.51, 0.4.49, 0.4.48, 0.4.47, 0.4.46, 0.4.45, 0.4.44, 0.4.43, 0.4.42, 0.4.41, 0.4.4, 0.4.3, 0.4.2, 0.4.1, 0.4.0, 0.3.9, 0.3.8, 0.3.7, 0.3.6, 0.3.5, 0.3.4, 0.3.3, 0.3.2, 0.3.1, 0.3.0, 0.2.6, 0.2.5, 0.2.4, 0.2.3, 0.2.2, 0.2.1, 0.2.0, 0.1.59, 0.1.58, 0.1.57, 0.1.56, 0.1.55, 0.1.54, 0.1.53, 0.1.52, 0.1.51, 0.1.47, 0.1.46, 0.1.44, 0.1.43, 0.1.42, 0.1.41, 0.1.29, 0.1.28, 0.1.27, 0.1.26, 0.1.25, 0.1.24, 0.1.23, 0.1.22, 0.1.21, 0.1.19, 0.1.18, 0.1.17, 0.1.16, 0.1.15, 0.1.14, 0.1.13, 0.1.12, 0.1.11, 0.1.7, 0.1.6, 0.1.4, 0.1.3, 0.1.2, 0.1.1, 0.1.0
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\user\Google Drive\Elance projects\richard\dominiqueUiClient\npm-debug.log

[flauc]

meh I really messed up here, okay can you try 0.4.49, and let me know if it works.

[martov1]

i installed 0.4.49 but i still have the same problem sadly :/

[antoinezanardi]

I'm on 0.4.49 now and it is still not showing up ..

[flauc]

Hmm.. 0.4.49 works fine for me. Are you on a public project can you share it?

[antoinezanardi]

app.component.ts
`export class AppComponent {
public options = {};
title = 'app works!';

constructor(private api: APIService, private notify: NotificationsService) { }
//
ngOnInit(): void {
this.notify.success(
'Some Title',
'Some Content',
);`

app.component.html
<router-outlet></router-outlet> <simple-notifications [options]="options" (onCreate)="created($event)" (onDestroy)="destroyed($event)"></simple-notifications>

Simple as that. Do you find any errors ? Thanks :)

[flauc]

No that's all good. And you import in the main module right?

[antoinezanardi]

imports: [ BrowserModule, SimpleNotificationsModule, PushNotificationsModule]
Here is the main module !

[antoinezanardi]

There is no error at all, so I don't think it's an error of importing or compiling..

[flauc]

Ok can you inspect the html and look at the <simple-notifications></simple-notifications> element. When you create a notification does it show up in there?

[antoinezanardi]

<!--template bindings={ "ng-reflect-ng-for-of": "" }-->

Nothing is triggered, there is only this comment.

[martov1]

I can see the <simple-notifications></simple-notifications> even if i dont trigger an alert on my code.
Not sure if that information is usefull, it would seem that it's not being triggered,but i'm sure that that line of code is being executed.

Any chance you could provide a simple bare bones plnkr with this version to demostrate? maybe i'm doing something wrong somewere.

[antoinezanardi]

If I console.log(this.notify.success(...)), I can see the object in my console, it is generated with width, text, etc. I think the problem is in the insert into HTML.

[MihailoVasovic]

we need fix asap!!

[martov1]

Take it easy, no one is paying him to support this, if you need the fix immediately then open the code base and do it yourself.

[flauc]

Thanks @martov1 👍

Sorry guys I'm completely out of time at the moment, I'll try to work on it as soon as possible. If someone can recreate the issue in a plunkr it would be extremely helpful.

[namhq1989]

Same here, hope he'll fix this soon! Thanks!

[atapas]

Tried with 0.4.49 as suggested above but no luck.

I see just above. My code is as equal as @antoinezanardi and @martov1 posted.

I understand this fix might take time to come, but is there any tentative date? I am planning to include it for one of my product development hence asking for the time. Sorry about that.

[atapas]

Hi @flauc, Here is the plunker where I could reproduce the issue..

https://plnkr.co/edit/tyawVR?p=preview

Hope it is useful.

[flauc]

Hi @atapas

Thank you for reproducing this, it helps a lot 👍

So I've added a button that calls the notification, and creating a notification from the method called by the button works.

Here is the plunker:
https://plnkr.co/edit/mb2sY6

So it looks like something didn't get initialized when OnInit() is called.

[flauc]

Okay so it looks like calling the notification in AfterViewInit() actually works. So you can use that as a fix for now. I'll dig deeper when I get a bit more time to look in to it.

[atapas]

Awesome @flauc . This works for me to get started. Will consume the updated version once submitted.

[JuliaRakitina]

I have same problem. Notification just does not shows up. On button click too

[basilinjoe]

@JuliaRakitina may be you have redefine NotificationsService in child component providers

[leomayer]

The following code works for me:

private zone: NgZone;
...
this.zone.run(() => {
      this.toast.error(strTitle, strContent);
});

The above code works as wrapper... in ones own app

@flauc To find a permanent fix the EventEmitter in the NotificationsService should be wrapped the same way when emitting an Event, i.e.

export class NotificationsService {
...
 constructor(private zone: NgZone) {}
...
 this.zone.run(() => { // <=== wrapper!!!
      this.emitter.next({command: 'set', notification: notification, add: to});
  });

[Antoshjkee]

I have got the same error. Any news?

[flauc]

@leomayer Thank you for finding this.
@Antoshjkee I will try to resolve this tonight.

[kwiniarski97]

@flauc any status or ETA?