Topic: [PRO USER] Error: Uncaught (in promise): Error: ToastModule is already loaded. It should only be imported in your application’s main module.

Vitor Pavanelli free asked 4 years ago


Hi team,

I'm having the error below when lazy loading a module.

"Error: Uncaught (in promise): Error: ToastModule is already loaded. It should only be imported in your application's main module."

I have already tried the FAQ and the suggested fixes mentioned there, but it also doesn't work.

In fact, only by importing the MDBBootstrapModules on a lazy loaded module, it errors the message above.

Please, I need to know how to stop this error.



                
                  

Vitor Pavanelli free answered 4 years ago


Guys,

Here is what you will need to do to fix this problem and please, add this to your release. I don't want to keep commenting out my code.

..node_modules/ng-mdb-pro/pro/alerts.index.ts

Comment all of these lines:

// export * from './toast/toast.directive';
// export * from './toast/toast.component';
// export * from './toast/toast.service';
// export * from './toast/toast.config';
// export * from './toast/toast.module';
// export * from './toast/toast.injector';
../node_modules/ng-mdb-pro/pro/index.ts

Comment these lines:

(9) //import { ToastModule } from './alerts/';

(48) // export {
//   ToastComponent, ToastContainerDirective, ToastContainerModule, ToastInjector, ToastPackage, ToastRef, ToastIconClasses,
//   ToastModule, ToastService, GlobalConfig, IndividualConfig, Overlay, OVERLAY_PROVIDERS, OverlayContainer, OverlayRef
// } from './alerts/';

(109)  //ToastModule,

(129) //ToastModule.forRoot(),

 

Suggest to add this to the CoreModule or AppModule (in my case I only use it within my CoreModule and it be a singleton only inside my CoreModule)

imports: [
  :
  :
  :
  ToastModule.forRoot()
],
:
:
providers: [
 ToastService
]

Please, please, please! I really wanna recommend your product but you guys need to have some work done there. I also need to start
making some profit and it is not, in any way, acceptable to have these issues. I kindly ask you guys to revise what you sell because 
I see a lot of potential in your product and I want to use it very badly. 

You guys rock and let's get the product even better :)

Best regards from Brazil,
Vitor

 


Damian Gemza staff commented 4 years ago

Hello Vitor, Thanks for your's advices. Well check it and if it's works good, we'll implement this in our next release. We do everything we can to make MDB the best library for Angular. We still have a lot of work ahead of us. Best Regards, Damian

Klavs free commented 4 years ago

Hey Guys, Any update on this, getting the same error when lazy loading a module. Are there any other solutions that I could try apart from messing about with the source code? Klavs

Damian Gemza staff commented 4 years ago

Hi Klavs, Today we've released an 5.1.2 update for our MDB Angular. Please update your's project and check if problem still exists, because it was repaired in this release. Best Regards, Damian

Klavs free commented 4 years ago

That's perfect Damian, It has fixed my issue, am now able to have a lazyloaded module and all working as its supposed tof. Thanks very much. Klavs

ADS@Aareon pro commented 4 years ago

This change seems to have broke our code. (5.1.2) I can no longer import ToastModule and ToastService? import { ToastModule } from 'ng-mdb-pro/pro/alerts'; and import { ToastService } from 'ng-mdb-pro/pro/alerts'; Both give an error now and cant be resolved. So how do i use the toastModule and service in the latest release. Documentation is wrong? https://mdbootstrap.com/angular/advanced/alerts/#examples Kind regards, Richard

Damian Gemza staff commented 4 years ago

Dear ADS@Aareon, Documentation is right. In your's app.module.ts please import ToastModule, and in imports table import ToastModule.forRoot(). Next in your's component.ts please import ToastService, and everything should works fine. Please make force reinstall 5.1.2. -> remove ng-mdb-pro from node modules, run npm i and check if isue still occurs. Best Regards, Damian

ADS@Aareon pro commented 4 years ago

Hello Damian, Thats my hole point, i cant... When i try to import the toast module or service it just says: in vscode: [ts] Module '"d:/Repos/ADS/Turing.WebApplications.FoxBailiff/node_modules/ng-mdb-pro/pro/alerts/index"' has no exported member 'ToastModule'. and during ng serve: ERROR in src/app/core/core.module.ts(15,10): error TS2305: Module '"D:/Repos/ADS/Turing.WebApplications.FoxBailiff/node_modules/ng-mdb-pro/pro/alerts/index"' has no exported member 'ToastModule'. src/app/core/error-handler/error-popup/error-popup.component.ts(4,10): error TS2305: Module '"D:/Repos/ADS/Turing.WebApplications.FoxBailiff/node_modules/ng-mdb-pro/pro/alerts/index"' has no exported member 'ToastService'. Same for the ToastService... Whitch kinda makes sence right, sinds you removed this from index.ts? // export * from './toast/toast.directive'; // export * from './toast/toast.component'; // export * from './toast/toast.service'; // export * from './toast/toast.config'; // export * from './toast/toast.module'; // export * from './toast/toast.injector'; So how can i import the ToastModule and service? Thanks, Richard

Damian Gemza staff commented 4 years ago

Dear ADS@Aareon, Please delete your's node_modules and type npm install one more time. It was fixed in latest 5.1.2. If you install our latest MDB from 1.02.2018, you will be able to import toastModule and toastService. Best Regards, Damian

ADS@Aareon pro commented 4 years ago

"Please delete your’s node_modules and type npm install one more time." Nope, not working. Did this about 6 times now... When you say "latest MDB from 1.02.2018" do you mean the first of februari or the second of januari? i am reading it (netherlands) as the first of feb, but the latest change in the toast module is two weeks ago. Downloading it from git+https://oauth2:xxxxxxxxxxxxxxxxxx@git.mdbootstrap.com/mdb/angular/ng-pro.git#5.1.2 In this file https://git.mdbootstrap.com/mdb/angular/ng-pro/blob/5.1.2/pro/alerts/index.ts the exports are commented // export * from './toast/toast.directive'; // export * from './toast/toast.component'; // export * from './toast/toast.service'; // export * from './toast/toast.config'; // export * from './toast/toast.module'; // export * from './toast/toast.injector'; When i remove the comment after the install it is working, but this is obviously not a solution (not even an acceptable workaround) Richard

Damian Gemza staff commented 4 years ago

Please uncomment those lines. That's the case. In 5.1.2 we messed this up, but on next day's morning, we've fixed this again. So the latest MDB from first of february got this fix. If you have commented lines, you haven't got as latest as possible MDB. Best Regards, Damian

ADS@Aareon pro commented 4 years ago

I now referenced the master branch and its fixed in there (exports are uncommnented) Could this be released as a new stable version as soon as possible? (hotfix maybe?) I dont like referencing a version that is stil in development and might change at any moment. You guys might want to rethink your versioning strategy. master has the same version as the latest stable release (5.1.2) I am also getting warnings when installing: npm WARN ng-mdb-pro@5.1.2 requires a peer of @angular/animations@5.0.0 - 5.2.1 but none is installed. You must install peer dependencies yourself. npm WARN ng-mdb-pro@5.1.2 requires a peer of @angular/common@5.0.0 - 5.2.1 but none is installed. You must install peer dependencies yourself. npm WARN ng-mdb-pro@5.1.2 requires a peer of @angular/compiler@5.0.0 - 5.2.1 but none is installed. You must install peer dependencies yourself. npm WARN ng-mdb-pro@5.1.2 requires a peer of @angular/core@5.0.0 - 5.2.1 but none is installed. You must install peer dependencies yourself. npm WARN ng-mdb-pro@5.1.2 requires a peer of @angular/forms@5.0.0 - 5.2.1 but none is installed. You must install peer dependencies yourself. npm WARN ng-mdb-pro@5.1.2 requires a peer of @angular/http@5.0.0 - 5.2.1 but none is installed. You must install peer dependencies yourself. npm WARN ng-mdb-pro@5.1.2 requires a peer of @angular/platform-browser@5.0.0 - 5.2.1 but none is installed. You must install peer dependencies yourself. npm WARN ng-mdb-pro@5.1.2 requires a peer of @angular/platform-browser-dynamic@5.0.0 - 5.2.1 but none is installed. You must install peer dependencies yourself. npm WARN ng-mdb-pro@5.1.2 requires a peer of @angular/router@5.0.0 - 5.2.1 but none is installed. You must install peer dependencies yourself. But i do have angular 5.2.0 installed... from my package.json: "@angular/animations": "^5.2.0", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/platform-server": "^5.2.0", "@angular/router": "^5.2.0", Richard

Damian Gemza staff commented 4 years ago

Versioning is okay, because master branch is the latest stable. We're working on dev branch, and when everything is okay and tested well, we merge dev branch to master :) about this npm warnings: it's only warning. Don't think about these. npm warns you that our MDB is compatible with 5.2.1, and you could got bigger version of angular. This warning won't produce you any errors.

ADS@Aareon pro commented 4 years ago

Hello Damian, I disagree with what you are saying. Current master has the exact same version number as the stable 5.1.2 release, but the code is different. So there was a change merged from the develop to the master without updating the version number? There are now two different "versions" of version 5.1.2... Any way i stil dont want to reference the master, because you could deside to merge a change from develop at any moment, possibly breaking my code (and our automated builds) Will there be a new release soon? Kind regards, Richard

Damian Gemza staff commented 4 years ago

Richard, Yes there was a hotfix without popping up version number. Please rely on our master branch because it's our the most stable branch. On this branch we put the newest releases of our MDB. But, you have to remember that, if for example you have mdb 5.1.2 from master branch, and we will update our master to 5.2.0 release, your's project won't update automatically to newer version. You have to delete your's node_modules and type npm install one more time. In few next days we want to release MDB 5.2.0 which will be a huge update (added fix for strictNullChecks and using Bootstrap 4-stable directly from npm, not from our package).

ADS@Aareon pro commented 4 years ago

Damien, " You have to delete your’s node_modules and type npm install one more time." And that is exactly what our build script is doing every night... (npm is not pefect, sometimes you realy need to do a clean install to get things going) Anyway, thanks for your support, and we will be looking out for the 5.2.0 release. Kind regards, Richard

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags