After Updating Ng Snootify in Angular 9 Bugs about ng-snotify HOT 21 OPEN

Hi,

I'm preparing a PR, which I hope will fix the problem.

from ng-snotify.

You must import SnotifyPosition in your imports just like this one

import { SnotifyPosition, SnotifyService } from 'ng-snotify';

If you are using vscode you can just hover over the error and click on quick fix and import SnotifyPosition

from ng-snotify.

Hi,

Already solved my problem, for future developers who will encounter this kind of issues.
I'm expecting you are using Angular 9 and ng-snotify 9.0.1

1. Error in Snotify Position when running project

Solution A:
Navigate to node_modules/ng-snotify/lib/interfaces/snotify-toast-config.interface.d.ts.
Scroll to the bottom and change position?: SnotifyPosition to position?: string

This solution works when your previous ng-snotify structure is like this one. sample only. As you can see the position property is string. so you must set it to string to prevent this kind of issue.

this.snotify.confirm(message, { showProgressBar: false, timeout: 2000, position: "centerBottom", buttons: [{ text: 'Close', action: (toast) => { this.snotify.remove(toast.id); } }, ], }, );

Solution B:
If you don't like the previous solution, and your previous ng-snotify structure is like this one.

this.snotify.confirm(message, { showProgressBar: false, timeout: 2000, position: "centerBottom", buttons: [{ text: 'Close', action: (toast) => { this.snotify.remove(toast.id); } }, ], }, );

The only thing you need to change is the position property and your final structure must be this one.

this.snotify.confirm(message, { showProgressBar: false, timeout: 2000, position: SnotifyPosition.centerBottom, buttons: [{ text: 'Close', action: (toast) => { this.snotify.remove(toast.id); } }, ], }, );

and dont forget to import SnotifyPosition to your imports or else you will have an error in SnotifiyPosition not declared.
import { SnotifyPosition, SnotifyService } from 'ng-snotify';

Minimal error:
If you successfully implement the solution above you will encounter a minimal error which is the @import "~ng-snotify/styles/material.css" cannot be found when running the project, just change the material.css to material.scss. For material.css is not existing anymore in the project library.

Thanks for the help author.

from ng-snotify.

Please take a look at this stackblitz code.

https://stackblitz.com/edit/angular-scss-demo-zrb8w9?file=src%2Fapp%2Fapp.component.html

from ng-snotify.

having the same issue. what is the version of your ng-snotify?

from ng-snotify.

Have you tried to use enum value ?

this.SnotifyService.success('test1', 'TEST2', {
  timeout: 100,
  showProgressBar: true,
  closeOnClick: true,
  pauseOnHover: true,
  position: SnotifyPosition.rightTop
});

Source: doc

from ng-snotify.

Thanks for answering.

I have found problem in

        import { SnotifyButton } from './snotify-button.interface';
        import { SnotifyAnimate } from './snotify-animate.interface';
        import { SnotifyType } from '../types/snotify.type';
        import { SafeHtml } from '@angular/platform-browser';
        import { SnotifyPosition } from '../enums/snotify-position.enum';
        /**
         * Toast configuration object
         */
        export interface SnotifyToastConfig {
            /**
             * Toast timeout in milliseconds.
             * Disable timeout = 0
             */
            timeout?: number;
            /**
             * Enable/Disable progress bar.
             * Disabled if timeout is 0.
             */
            showProgressBar?: boolean;
            /**
             * Type of toast, affects toast style.
             * It's not recommended to change it.
             * Depends on toast type.
             */
            type?: SnotifyType;
            /**
             * Should toast close on click?
             */
            closeOnClick?: boolean;
            /**
             * Should timeout pause on hover?
             */
            pauseOnHover?: boolean;
            /**
             * Buttons config.
             */
            buttons?: SnotifyButton[];
            /**
             * Placeholder for Prompt toast
             */
            placeholder?: string;
            /**
             * Toast title maximum length
             */
            titleMaxLength?: number;
            /**
             * Toast body maximum length
             */
            bodyMaxLength?: number;
            /**
             * Activate custom icon.
             * You should provide full tag, e.g.
             * ```html
             * <img src="assets/custom-icon.png"/>
             * ```
             * ```html
             * <svg x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 48 48;" xml:space="preserve" width="48px" height="48px">
             *     <g><path....../></g>
             * </svg>
             * ```
             */
            icon?: string;
            /**
             * Custom icon class.
             */
            iconClass?: string;
            /**
             * Backdrop opacity.
             * * **Range:** `0.0 - 1.0`.
             * * **Disabled:** `-1`
             */
            backdrop?: number;
            /**
             * Animation config
             */
            animation?: SnotifyAnimate;
            /**
             * Html string witch overrides toast content
             */
            html?: string | SafeHtml;
            /**
             * Toasts position on screen
             */
            position?: string; //works
			 position?: SnotifyPosition; //did not works

        }

Due to Error

	     node_modules/ng-snotify/lib/interfaces/snotify-toast-config.interface.d.ts:84:5
				84     position?: SnotifyPosition;
					   ~~~~~~~~
				The expected type comes from property 'position' which is declared here on type 'SnotifyToastConfig'

Logs
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
70% building 773/773 modules 0 active
ERROR in angularapppaths:293:29 - error TS2304: Cannot find name 'SnotifyPosition'.

			293                   position: SnotifyPosition.rightTop
											~~~~~~~~~~~~~~~
			angularapppaths:309:21 - error TS2322: Type '"rightTop"' is not assignable to type 'SnotifyPosition'.
			
			309                     position: 'rightTop'
									~~~~~~~~
			
			  node_modules/ng-snotify/lib/interfaces/snotify-toast-config.interface.d.ts:84:5
				84     position?: SnotifyPosition;
					   ~~~~~~~~
				The expected type comes from property 'position' which is declared here on type 'SnotifyToastConfig'
			angularapppaths:324:21 - error TS2322: Type '"rightTop"' is not assignable to type 'SnotifyPosition'.
			
			324                     position: 'rightTop'
									~~~~~~~~
			
			  node_modules/ng-snotify/lib/interfaces/snotify-toast-config.interface.d.ts:84:5
				84     position?: SnotifyPosition;
					   ~~~~~~~~
				The expected type comes from property 'position' which is declared here on type 'SnotifyToastConfig'
			angularapppaths:334:17 - error TS2322: Type '"rightTop"' is not assignable to type 'SnotifyPosition'.

from ng-snotify.

having the same issue. what is the version of your ng-snotify?

Angular 9 and Snotify 9.0.1

Thanks

from ng-snotify.

did it solve the issue upgrading to ng-snotify 9.0.1?

Please let me know, Thanks.

from ng-snotify.

by changing library code

/**
* Toasts position on screen
*/
position?: String;

Thanks

from ng-snotify.

Have you tried to use enum value ?

this.SnotifyService.success('test1', 'TEST2', {
  timeout: 100,
  showProgressBar: true,
  closeOnClick: true,
  pauseOnHover: true,
  position: SnotifyPosition.rightTop
});

Source: doc

After changing the position: "rightTop" to position: SnotifyPosition.rightTop it solved my error which is the position stuff error, however new error occurs.

core.js:4061 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'toast' of undefined TypeError: Cannot read property 'toast' of undefined at SnotifyService.push../node_modules/ng-snotify/fesm5/ng-snotify.js.SnotifyService.create (ng-snotify.js:325) at SnotifyService.push../node_modules/ng-snotify/fesm5/ng-snotify.js.SnotifyService.confirm (ng-snotify.js:367) at SnotifyService.value (ng-snotify.js:189) at SnotifyService.value [as confirm] (ng-snotify.js:107)

S'il vous plaît laissez-moi savoir si quel est le problème avec celui-ci. Je vous remercie.

from ng-snotify.

by changing library code

/**

• Toasts position on screen
  */
  position?: String;

Thanks

After you fix this issue did you encounter an issue about TypeError: Cannot read property 'toast' of undefined TypeError: Cannot read property 'toast' of undefined at

Thanks

from ng-snotify.

No friend

i did encounter angular ivy issue

"ng-snotify": "^9.0.1",

Please can you run

npm install  ng-snotify@latest

angular/angular#35282

Thanks

from ng-snotify.

SnotifyPosition.rightTop

Thanks for the response

position?: SnotifyPosition;

if changed code to
position: SnotifyPosition.rightTop

exception raised
Cannot find name 'SnotifyPosition

from ng-snotify.

SnotifyPosition

Many Thanks for the help.

from ng-snotify.

You must import SnotifyPosition in your imports just like this one

import { SnotifyPosition, SnotifyService } from 'ng-snotify';

If you are using vscode you can just hover over the error and click on quick fix and import SnotifyPosition

Many Thanks

from ng-snotify.

Hi,

Already solved my problem, for future developers who will encounter this kind of issues.
I'm expecting you are using Angular 9 and ng-snotify 9.0.1

1. Error in Snotify Position when running project

Solution A:
Navigate to node_modules/ng-snotify/lib/interfaces/snotify-toast-config.interface.d.ts.
Scroll to the bottom and change position?: SnotifyPosition to position?: string

This solution works when your previous ng-snotify structure is like this one. sample only. As you can see the position property is string. so you must set it to string to prevent this kind of issue.

this.snotify.confirm(message, { showProgressBar: false, timeout: 2000, position: "centerBottom", buttons: [{ text: 'Close', action: (toast) => { this.snotify.remove(toast.id); } }, ], }, );

Solution B:
If you don't like the previous solution, and your previous ng-snotify structure is like this one.

this.snotify.confirm(message, { showProgressBar: false, timeout: 2000, position: "centerBottom", buttons: [{ text: 'Close', action: (toast) => { this.snotify.remove(toast.id); } }, ], }, );

The only thing you need to change is the position property and your final structure must be this one.

this.snotify.confirm(message, { showProgressBar: false, timeout: 2000, position: SnotifyPosition.centerBottom, buttons: [{ text: 'Close', action: (toast) => { this.snotify.remove(toast.id); } }, ], }, );

and dont forget to import SnotifyPosition to your imports or else you will have an error in SnotifiyPosition not declared.
import { SnotifyPosition, SnotifyService } from 'ng-snotify';

Minimal error:
If you successfully implement the solution above you will encounter a minimal error which is the @import "~ng-snotify/styles/material.css" cannot be found when running the project, just change the material.css to material.scss. For material.css is not existing anymore in the project library.

Thanks for the help author.

Please can you help me in stackblitz

Snotify css is not loading in Stackblitz

https://stackblitz.com/edit/angular-fzckue

from ng-snotify.

Please take a look at this stackblitz code.

https://stackblitz.com/edit/angular-scss-demo-zrb8w9?file=src%2Fapp%2Fapp.component.html

Many Thanks

from ng-snotify.

im using angular 9 and facing same Issue here {{ TypeError: Cannot read property 'toast' of undefined TypeError: Cannot read property 'toast'}}
any new regarding to this ?

from ng-snotify.

from ng-snotify.

@gitalvininfo the solved by SnotifyModule.forRoot() becuase i have multiple module
but also dose not work on init event

from ng-snotify.