After Updating Ng Snootify in Angular 9 Bugs #88

afeef1915 · 2020-03-23T11:16:16Z

HI All,

I have updated to Angular 9 and ng snotify with verison 9.0.1.

Angular code

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

Type '"rightTop"' is not assignable to type 'SnotifyPosition'.

Error
./node_modules/ng-snotify/styles/material.css ./node_modules/angular-archwizard/archwizard.css .
Module not found: Error: Can't resolve '\APPS\app\node_modules\ng-snotify\styles\material.css' in '\APPS\app'

/**

Toast position
*/
export declare enum SnotifyPosition {
leftTop = "leftTop",
leftCenter = "leftCenter",
leftBottom = "leftBottom",
rightTop = "rightTop",
rightCenter = "rightCenter",
rightBottom = "rightBottom",
centerTop = "centerTop",
centerCenter = "centerCenter",
centerBottom = "centerBottom"
}

The text was updated successfully, but these errors were encountered:

gitalvininfo · 2020-03-23T17:05:08Z

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

smarlhens · 2020-03-23T19:41:40Z

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

afeef1915 · 2020-03-24T05:26:59Z

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

afeef1915 · 2020-03-24T05:28:05Z

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

Angular 9 and Snotify 9.0.1

Thanks

gitalvininfo · 2020-03-24T05:33:13Z

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

Please let me know, Thanks.

afeef1915 · 2020-03-24T06:05:13Z

by changing library code

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

Thanks

gitalvininfo · 2020-03-24T06:40:30Z

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.

gitalvininfo · 2020-03-24T07:05:54Z

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

afeef1915 · 2020-03-24T07:10:02Z

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

afeef1915 · 2020-03-24T08:26:18Z

SnotifyPosition.rightTop

Thanks for the response

position?: SnotifyPosition;

if changed code to
position: SnotifyPosition.rightTop

exception raised
Cannot find name 'SnotifyPosition

gitalvininfo · 2020-03-24T08:35:20Z

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

smarlhens · 2020-03-24T08:39:09Z

Hi,

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

afeef1915 · 2020-03-24T08:47:44Z

SnotifyPosition

Many Thanks for the help.

afeef1915 · 2020-03-24T08:48:24Z

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

gitalvininfo · 2020-03-24T09:13:48Z

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

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.

afeef1915 · 2020-03-24T11:09:41Z

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

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

gitalvininfo · 2020-03-25T08:21:05Z

Please take a look at this stackblitz code.

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

afeef1915 · 2020-03-25T09:11:21Z

Please take a look at this stackblitz code.

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

Many Thanks

ahmadalsadder · 2020-07-14T08:06:27Z

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 ?

gitalvininfo · 2020-07-14T11:10:40Z

can you show me the snippet of your snotify? and what version of ng-snotify are you using?

…

On Tue, 14 Jul 2020, 4:06 pm ahmadalsadder, ***@***.***> wrote: same Issue here {{ TypeError: Cannot read property 'toast' of undefined TypeError: Cannot read property 'toast'}} any new regarding to this ? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#88 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADNAKEAKZBMGNGUFQQP3WB3R3QGZHANCNFSM4LRZKE5A> .

ahmadalsadder · 2020-07-16T08:30:59Z

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

smarlhens mentioned this issue Mar 24, 2020

fix(snotify-toast-config): position type #90

Merged

Elijah-appddiction mentioned this issue May 11, 2020

Cannot read property "toast" of undefined #93

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

After Updating Ng Snootify in Angular 9 Bugs #88

After Updating Ng Snootify in Angular 9 Bugs #88

afeef1915 commented Mar 23, 2020 •

edited

gitalvininfo commented Mar 23, 2020

smarlhens commented Mar 23, 2020 •

edited

afeef1915 commented Mar 24, 2020

afeef1915 commented Mar 24, 2020

gitalvininfo commented Mar 24, 2020

afeef1915 commented Mar 24, 2020

gitalvininfo commented Mar 24, 2020 •

edited

gitalvininfo commented Mar 24, 2020

afeef1915 commented Mar 24, 2020 •

edited

afeef1915 commented Mar 24, 2020

gitalvininfo commented Mar 24, 2020

smarlhens commented Mar 24, 2020

afeef1915 commented Mar 24, 2020

afeef1915 commented Mar 24, 2020

gitalvininfo commented Mar 24, 2020 •

edited

afeef1915 commented Mar 24, 2020

gitalvininfo commented Mar 25, 2020

afeef1915 commented Mar 25, 2020

ahmadalsadder commented Jul 14, 2020 •

edited

gitalvininfo commented Jul 14, 2020 via email

ahmadalsadder commented Jul 16, 2020

After Updating Ng Snootify in Angular 9 Bugs #88

After Updating Ng Snootify in Angular 9 Bugs #88

Comments

afeef1915 commented Mar 23, 2020 • edited

gitalvininfo commented Mar 23, 2020

smarlhens commented Mar 23, 2020 • edited

afeef1915 commented Mar 24, 2020

afeef1915 commented Mar 24, 2020

gitalvininfo commented Mar 24, 2020

afeef1915 commented Mar 24, 2020

gitalvininfo commented Mar 24, 2020 • edited

gitalvininfo commented Mar 24, 2020

afeef1915 commented Mar 24, 2020 • edited

afeef1915 commented Mar 24, 2020

gitalvininfo commented Mar 24, 2020

smarlhens commented Mar 24, 2020

afeef1915 commented Mar 24, 2020

afeef1915 commented Mar 24, 2020

gitalvininfo commented Mar 24, 2020 • edited

afeef1915 commented Mar 24, 2020

gitalvininfo commented Mar 25, 2020

afeef1915 commented Mar 25, 2020

ahmadalsadder commented Jul 14, 2020 • edited

gitalvininfo commented Jul 14, 2020 via email

ahmadalsadder commented Jul 16, 2020

afeef1915 commented Mar 23, 2020 •

edited

smarlhens commented Mar 23, 2020 •

edited

gitalvininfo commented Mar 24, 2020 •

edited

afeef1915 commented Mar 24, 2020 •

edited

gitalvininfo commented Mar 24, 2020 •

edited

ahmadalsadder commented Jul 14, 2020 •

edited