In Kentheme Metronics angular Template ngx-toastr is not working
when i import ToastrModule in app,module.ts
import { ToastrModule } from 'ngx-toastr';
imports: [
ToastrModule
],
getting these error:-
Error: node_modules/ngx-toastr/toastr/toast-noanimation.component.d.ts:49:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.
49 static ɵcmp: i0.ɵɵComponentDeclaration<ToastNoAnimation, "[toast-component]", never, {}, {}, never, never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ngx-toastr/toastr/toast.component.d.ts:57:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.
57 static ɵcmp: i0.ɵɵComponentDeclaration<Toast<any>, "[toast-component]", never, {}, {}, never, never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ngx-toastr/toastr/toast.directive.d.ts:8:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.
8 static ɵdir: i0.ɵɵDirectiveDeclaration<ToastContainerDirective, "[toastContainer]", ["toastContainer"], {}, {}, never, never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ngx-toastr/toastr/toast.provider.d.ts:2:10 - error TS2305: Module '"@angular/core"' has no exported member 'EnvironmentProviders'.
2 import { EnvironmentProviders } from '@angular/core';
~~~~~~~~~~~~~~~~~~~~
Replies (7)
Hi,
Please note that `ngx-toastr` is not installed by default in the Keentheme Metronics Angular Template. You will need to install it manually in order to use it in your project.
To install `ngx-toastr`, follow these steps:
1. Open your terminal or command prompt.
2. Navigate to your project directory.
3. Run the following command to install `ngx-toastr`:
yarn add ngx-toastr4. Once the installation is complete, you can import the necessary modules and components from `ngx-toastr` in your Angular application.
For example, in your `
app.module.ts` file, you can add the following import statement:import { ToastrModule } from "ngx-toastr";And then, include `
ToastrModule.forRoot()` in the `imports` array:imports: [
// Other imports
ToastrModule.forRoot()
]5. After installing and configuring `
ngx-toastr`, you can use it in your components by importing it and utilizing its features.You can try the following steps to resolve your issue:
Update your project's dependencies, including Angular and
ngx-toastr, to the latest versions. Run npm update oryarn update to update your packages.Remove node_modules: Delete the
node_modules folder in your project directory to ensure a clean installation of the dependencies.Run
npm install or yarn install to reinstall the dependencies and rebuild your project.Double-check that you are importing the correct modules from
ngx-toastr in your app.module.ts file. Make sure you are importing the required modules and components correctly.Thanks
Hi thank you response Faizal,
i follow your entire steps , still im geting nodemodule toastr error , let me breif what i did it in project
first install the ngx-toastr by yarn add ngx-toastr
second import the statement import { ToastrModule } from 'ngx-toastr';
as well as import it in import metadata.
then its giving throwing the error
again i removed the node module and add npm install and update the npm , install the same ngx-toastr same result ,
can you give me demo task link or project which is working ngx-toastr in angular template
NOTE: install dependency "ngx-toastr" installed in nodemodule it wont give any error msg compiling project fine after import the import stament n lib in app.module ts its throwing error
error messages are :
./node_modules/ngx-toastr/fesm2022/ngx-toastr.mjs:1497:9-33 - Error: export 'makeEnvironmentProviders' (imported as 'makeEnvironmentProviders') was not found in '@angular/core' (possible exports: ANALYZE_FOR_ENTRY_COMPONENTS, ANIMATION_MODULE_TYPE, APP_BOOTSTRAP_LISTENER, APP_ID, APP_INITIALIZER, ApplicationInitStatus, ApplicationModule, ApplicationRef, Attribute, COMPILER_OPTIONS, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Compiler, CompilerFactory, Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, ContentChild, ContentChildren, DEFAULT_CURRENCY_CODE, DebugElement, DebugEventListener, DebugNode, DefaultIterableDiffer, Directive, ENVIRONMENT_INITIALIZER, ElementRef, EmbeddedViewRef, EnvironmentInjector, ErrorHandler, EventEmitter, Host, HostBinding, HostListener, INJECTOR, Inject, InjectFlags, Injectable, InjectionToken, Injector, Input, IterableDiffers, KeyValueDiffers, LOCALE_ID, MissingTranslationStrategy, ModuleWithComponentFactories, NO_ERRORS_SCHEMA, NgModule, NgModuleFactory, NgModuleRef, NgProbeToken, NgZone, Optional, Output, PACKAGE_ROOT_URL, PLATFORM_ID, PLATFORM_INITIALIZER, Pipe, PlatformRef, Query, QueryList, ReflectiveInjector, ReflectiveKey, Renderer2, RendererFactory2, RendererStyleFlags2, ResolvedReflectiveFactory, Sanitizer, SecurityContext, Self, SimpleChange, SkipSelf, TRANSLATIONS, TRANSLATIONS_FORMAT, TemplateRef, Testability, TestabilityRegistry, Type, VERSION, Version, ViewChild, ViewChildren, ViewContainerRef, ViewEncapsulation, ViewRef, asNativeElements, assertPlatform, createEnvironmentInjector, createNgModuleRef, createPlatform, createPlatformFactory, defineInjectable, destroyPlatform, enableProdMode, forwardRef, getDebugNode, getModuleFactory, getNgModuleById, getPlatform, importProvidersFrom, inject, isDevMode, platformCore, resolveForwardRef, setTestabilityGetter, ɵALLOW_MULTIPLE_PLATFORMS, ɵAPP_ID_RANDOM_PROVIDER, ɵChangeDetectorStatus, ɵComponentFactory, ɵConsole, ɵDEFAULT_LOCALE_ID, ɵINJECTOR_SCOPE, ɵLContext, ɵLifecycleHooksFeature, ɵLocaleDataIndex, ɵNG_COMP_DEF, ɵNG_DIR_DEF, ɵNG_ELEMENT_ID, ɵNG_INJ_DEF, ɵNG_MOD_DEF, ɵNG_PIPE_DEF, ɵNG_PROV_DEF, ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, ɵNO_CHANGE, ɵNgModuleFactory, ɵNoopNgZone, ɵReflectionCapabilities, ɵRender3ComponentFactory, ɵRender3ComponentRef, ɵRender3NgModuleRef, ɵRuntimeError, ɵTESTABILITY, ɵTESTABILITY_GETTER, ɵViewRef, ɵ_sanitizeHtml, ɵ_sanitizeUrl, ɵallowSanitizationBypassAndThrow, ɵbypassSanitizationTrustHtml, ɵbypassSanitizationTrustResourceUrl, ɵbypassSanitizationTrustScript, ɵbypassSanitizationTrustStyle, ɵbypassSanitizationTrustUrl, ɵclearResolutionOfComponentResourcesQueue, ɵcoerceToBoolean, ɵcompileComponent, ɵcompileDirective, ɵcompileNgModule, ɵcompileNgModuleDefs, ɵcompileNgModuleFactory, ɵcompilePipe, ɵcreateInjector, ɵdefaultIterableDiffers, ɵdefaultKeyValueDiffers, ɵdetectChanges, ɵdevModeEqual, ɵfindLocaleData, ɵflushModuleScopingQueueAsMuchAsPossible, ɵgetDebugNode, ɵgetDebugNodeR2, ɵgetDirectives, ɵgetHostElement, ɵgetInjectableDef, ɵgetLContext, ɵgetLocaleCurrencyCode, ɵgetLocalePluralCase, ɵgetSanitizationBypassType, ɵgetUnknownElementStrictMode, ɵgetUnknownPropertyStrictMode, ɵglobal, ɵinjectChangeDetectorRef, ɵinternalBootstrapApplication, ɵisBoundToModule, ɵisDefaultChangeDetectionStrategy, ɵisListLikeIterable, ɵisObservable, ɵisPromise, ɵisStandalone, ɵisSubscribable, ɵivyEnabled, ɵmakeDecorator, ɵmarkDirty, ɵnoSideEffects, ɵpatchComponentDefWithScope, ɵpublishDefaultGlobalUtils, ɵpublishGlobalUtil, ɵregisterLocaleData, ɵrenderComponent, ɵresetCompiledComponents, ɵresetJitOptions, ɵresolveComponentResources, ɵsetAllowDuplicateNgModuleIdsForTest, ɵsetClassMetadata, ɵsetCurrentInjector, ɵsetDocument, ɵsetLocaleId, ɵsetUnknownElementStrictMode, ɵsetUnknownPropertyStrictMode, ɵstore, ɵstringify, ɵtransitiveScopesFor, ɵunregisterLocaleData, ɵunwrapSafeValue, ɵwhenRendered, ɵɵCopyDefinitionFeature, ɵɵFactoryTarget, ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature, ɵɵProvidersFeature, ɵɵStandaloneFeature, ɵɵadvance, ɵɵattribute, ɵɵattributeInterpolate1, ɵɵattributeInterpolate2, ɵɵattributeInterpolate3, ɵɵattributeInterpolate4, ɵɵattributeInterpolate5, ɵɵattributeInterpolate6, ɵɵattributeInterpolate7, ɵɵattributeInterpolate8, ɵɵattributeInterpolateV, ɵɵclassMap, ɵɵclassMapInterpolate1, ɵɵclassMapInterpolate2, ɵɵclassMapInterpolate3, ɵɵclassMapInterpolate4, ɵɵclassMapInterpolate5, ɵɵclassMapInterpolate6, ɵɵclassMapInterpolate7, ɵɵclassMapInterpolate8, ɵɵclassMapInterpolateV, ɵɵclassProp, ɵɵcontentQuery, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵdefineNgModule, ɵɵdefinePipe, ɵɵdirectiveInject, ɵɵdisableBindings, ɵɵelement, ɵɵelementContainer, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementStart, ɵɵenableBindings, ɵɵgetCurrentView, ɵɵgetInheritedFactory, ɵɵhostProperty, ɵɵi18n, ɵɵi18nApply, ɵɵi18nAttributes, ɵɵi18nEnd, ɵɵi18nExp, ɵɵi18nPostprocess, ɵɵi18nStart, ɵɵinject, ɵɵinjectAttribute, ɵɵinvalidFactory, ɵɵinvalidFactoryDep, ɵɵlistener, ɵɵloadQuery, ɵɵnamespaceHTML, ɵɵnamespaceMathML, ɵɵnamespaceSVG, ɵɵnextContext, ɵɵngDeclareClassMetadata, ɵɵngDeclareComponent, ɵɵngDeclareDirective, ɵɵngDeclareFactory, ɵɵngDeclareInjectable, ɵɵngDeclareInjector, ɵɵngDeclareNgModule, ɵɵngDeclarePipe, ɵɵpipe, ɵɵpipeBind1, ɵɵpipeBind2, ɵɵpipeBind3, ɵɵpipeBind4, ɵɵpipeBindV, ɵɵprojection, ɵɵprojectionDef, ɵɵproperty, ɵɵpropertyInterpolate, ɵɵpropertyInterpolate1, ɵɵpropertyInterpolate2, ɵɵpropertyInterpolate3, ɵɵpropertyInterpolate4, ɵɵpropertyInterpolate5, ɵɵpropertyInterpolate6, ɵɵpropertyInterpolate7, ɵɵpropertyInterpolate8, ɵɵpropertyInterpolateV, ɵɵpureFunction0, ɵɵpureFunction1, ɵɵpureFunction2, ɵɵpureFunction3, ɵɵpureFunction4, ɵɵpureFunction5, ɵɵpureFunction6, ɵɵpureFunction7, ɵɵpureFunction8, ɵɵpureFunctionV, ɵɵqueryRefresh, ɵɵreference, ɵɵregisterNgModuleType, ɵɵresetView, ɵɵresolveBody, ɵɵresolveDocument, ɵɵresolveWindow, ɵɵrestoreView, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl, ɵɵsanitizeUrlOrResourceUrl, ɵɵsetComponentScope, ɵɵsetNgModuleScope, ɵɵstyleMap, ɵɵstyleMapInterpolate1, ɵɵstyleMapInterpolate2, ɵɵstyleMapInterpolate3, ɵɵstyleMapInterpolate4, ɵɵstyleMapInterpolate5, ɵɵstyleMapInterpolate6, ɵɵstyleMapInterpolate7, ɵɵstyleMapInterpolate8, ɵɵstyleMapInterpolateV, ɵɵstyleProp, ɵɵstylePropInterpolate1, ɵɵstylePropInterpolate2, ɵɵstylePropInterpolate3, ɵɵstylePropInterpolate4, ɵɵstylePropInterpolate5, ɵɵstylePropInterpolate6, ɵɵstylePropInterpolate7, ɵɵstylePropInterpolate8, ɵɵstylePropInterpolateV, ɵɵsyntheticHostListener, ɵɵsyntheticHostProperty, ɵɵtemplate, ɵɵtemplateRefExtractor, ɵɵtext, ɵɵtextInterpolate, ɵɵtextInterpolate1, ɵɵtextInterpolate2, ɵɵtextInterpolate3, ɵɵtextInterpolate4, ɵɵtextInterpolate5, ɵɵtextInterpolate6, ɵɵtextInterpolate7, ɵɵtextInterpolate8, ɵɵtextInterpolateV, ɵɵtrustConstantHtml, ɵɵtrustConstantResourceUrl, ɵɵviewQuery)
Error: node_modules/ngx-toastr/toastr/toast-noanimation.component.d.ts:49:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.
49 static ɵcmp: i0.ɵɵComponentDeclaration<ToastNoAnimation, "[toast-component]", never, {}, {}, never, never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ngx-toastr/toastr/toast.component.d.ts:57:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.
57 static ɵcmp: i0.ɵɵComponentDeclaration<Toast<any>, "[toast-component]", never, {}, {}, never, never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~0m
Error: node_modules/ngx-toastr/toastr/toast.directive.d.ts:8:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.
8 static ɵdir: i0.ɵɵDirectiveDeclaration<ToastContainerDirective, "[toastContainer]", ["toastContainer"], {}, {}, never, never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ngx-toastr/toastr/toast.provider.d.ts:2:10 - error TS2305: Module '"@angular/core"' has no exported member 'EnvironmentProviders'.
2 import { EnvironmentProviders } from '@angular/core';
~~~~~~~~~~~~~~~~~~~~
× Failed to compile.
Hi,
It seems like there may be compatibility issues or incorrect imports causing these errors.
Make sure you have installed the correct version of ngx-toastr that is compatible with your Angular version. Check the compatibility matrix or documentation of ngx-toastr to ensure you have the right version.
https://github.com/scttcper/ngx-toastr#dependencies
Ensure that your Angular version is up to date. You can try updating your Angular packages by running the command ng update @angular/core @angular/cli in your project directory.
If the issue persists, it's possible that there may be conflicts with other dependencies in your project. Try removing and reinstalling the ngx-toastr package along with its dependencies by deleting the node_modules folder and running npm install or yarn install again.
Thanks
Hi Faizal,
can you send me the working demo for ngx-toastr in metronics angular project it will help me more resolve this issue
Thank you,
Nagaraj
Hi,
You can check out an example of Toastr in the Metronic Angular Demo1 by following this link:
https://drive.google.com/file/d/1o9AQu7EBdADMvRJB8SpkO7R8Dmt_osTq/view?usp=share_link
We have tested this example in the Metronic Angular Demo1 environment. Here is a screenshot for your reference:
Feel free to download and explore the example. If you have any further questions or need assistance, please let us know.
Thanks
Thank you Faizal,
the issue is CLI and Yarn file problem , i upgradated Angular CLI version now is working ok ,thank you for your valuable response and time .
Nagaraj
You're welcome! I'm glad to hear that upgrading the Angular CLI version resolved the issue with your CLI and Yarn files. If you have any further questions or need assistance with anything else, feel free to ask.
Thanks
