After Updating Ng Snootify in Angular 9 Bugs

[afeef1915]

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" }

[gitalvininfo]

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

[smarlhens]

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]

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]

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

Angular 9 and Snotify 9.0.1

Thanks

[gitalvininfo]

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

Please let me know, Thanks.

[afeef1915]

by changing library code

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

Thanks

[gitalvininfo]

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]

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]

No friend

i did encounter angular ivy issue

"ng-snotify": "^9.0.1",

Please can you run

npm install  ng-snotify@latest

https://github.com/angular/angular/issues/35282

Thanks

[afeef1915]

SnotifyPosition.rightTop

Thanks for the response

position?: SnotifyPosition;

if changed code to position: SnotifyPosition.rightTop

exception raised Cannot find name 'SnotifyPosition

[gitalvininfo]

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]

Hi,

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

[afeef1915]

SnotifyPosition

Many Thanks for the help.

[afeef1915]

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]

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.

[afeef1915]

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

[gitalvininfo]

Please take a look at this stackblitz code.

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

[afeef1915]

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]

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]

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, [email protected] 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 https://github.com/artemsky/ng-snotify/issues/88#issuecomment-658035976, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADNAKEAKZBMGNGUFQQP3WB3R3QGZHANCNFSM4LRZKE5A .

[ahmadalsadder]

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