angular2-notifications icon indicating copy to clipboard operation
angular2-notifications copied to clipboard

notifications are not visible

Open martov1 opened this issue 7 years ago • 32 comments

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. photo

Am i doing something wrong?

martov1 avatar Feb 02 '17 20:02 martov1

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

Any ideas ?

antoinezanardi avatar Feb 02 '17 20:02 antoinezanardi

is this version 0.4.51?

flauc avatar Feb 02 '17 20:02 flauc

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

I installed it using NPM today

Thanks for your time <3

martov1 avatar Feb 02 '17 20:02 martov1

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

flauc avatar Feb 02 '17 20:02 flauc

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

martov1 avatar Feb 02 '17 20:02 martov1

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

flauc avatar Feb 02 '17 20:02 flauc

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

martov1 avatar Feb 02 '17 20:02 martov1

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

antoinezanardi avatar Feb 02 '17 20:02 antoinezanardi

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

flauc avatar Feb 02 '17 20:02 flauc

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 :)

antoinezanardi avatar Feb 02 '17 20:02 antoinezanardi

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

flauc avatar Feb 02 '17 20:02 flauc

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

antoinezanardi avatar Feb 02 '17 20:02 antoinezanardi

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

antoinezanardi avatar Feb 02 '17 20:02 antoinezanardi

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?

flauc avatar Feb 02 '17 21:02 flauc

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

Nothing is triggered, there is only this comment.

antoinezanardi avatar Feb 02 '17 21:02 antoinezanardi

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.

martov1 avatar Feb 02 '17 21:02 martov1

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.

antoinezanardi avatar Feb 02 '17 21:02 antoinezanardi

we need fix asap!!

MihailoVasovic avatar Feb 06 '17 18:02 MihailoVasovic

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.

martov1 avatar Feb 06 '17 22:02 martov1

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.

flauc avatar Feb 06 '17 22:02 flauc

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

namhq1989 avatar Feb 07 '17 04:02 namhq1989

Tried with 0.4.49 as suggested above but no luck.

image

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 avatar Feb 08 '17 14:02 atapas

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

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

Hope it is useful.

atapas avatar Feb 08 '17 15:02 atapas

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 avatar Feb 08 '17 16:02 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.

flauc avatar Feb 08 '17 16:02 flauc

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

atapas avatar Feb 08 '17 16:02 atapas

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

JuliaRakitina avatar Jun 21 '17 08:06 JuliaRakitina

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

basilinjoe avatar Jul 01 '17 07:07 basilinjoe

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});
  });

leomayer avatar Sep 05 '17 07:09 leomayer

I have got the same error. Any news?

Antoshjkee avatar Sep 05 '17 08:09 Antoshjkee

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

flauc avatar Sep 05 '17 09:09 flauc

@flauc any status or ETA?

kwiniarski97 avatar Mar 11 '21 07:03 kwiniarski97