Topic: [PRO USER] Error: Uncaught (in promise): Error: ToastModule is already loaded. It should only be imported in your application’s main module.
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.
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 6 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, DamianKlavs free commented 6 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? KlavsDamian Gemza staff commented 6 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, DamianKlavs free commented 6 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. KlavsADS@Aareon pro commented 6 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, RichardDamian Gemza staff commented 6 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, DamianADS@Aareon pro commented 6 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, RichardDamian Gemza staff commented 6 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, DamianADS@Aareon pro commented 6 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) RichardDamian Gemza staff commented 6 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, DamianADS@Aareon pro commented 6 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", RichardDamian Gemza staff commented 6 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 6 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, RichardDamian Gemza staff commented 6 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 6 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, RichardClosed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No