Topic: Lazyloading and route preloading Angular MDB
Hi,
page speed insights complains about the following:
Preload routes ahead of time to speed up navigation. Learn more.
the suggest to do this ->
https://web.dev/route-preloading-in-angular/?utm_source=lighthouse&utm_medium=unknown
how is this possible with mdb ?
kind regards,
Our library does not affect the standard Angular modules configuration in any way. You can use the technique described in this article, just remember that if you want to use MDB components in any lazy loaded module, you need to add our modules to this module imports array (every lazy loaded module in your app will have its own scope). For example, if you need to use MDB Buttons, include our ButtonsModule. Here is a full MDB modules list:
https://mdbootstrap.com/docs/angular/getting-started/modules/
myictsolutions pro premium commented 5 years ago
Hi Arkadiusz,
thanks for the info, one more question. I also want to use angular universal. (ng add @nestjs/ng-universal) however this gives the following issue when I try to run the build I created with npm run build:ssr, npm run serve:ssr
server/main.js
:227898
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["metadata"])("design:paramtypes", [KeyboardEvent]),
ReferenceError: KeyboardEvent is not defined
at Module../node_modules/ng-uikit-pro-standard/__ivy_ngcc/fesm2015/ng-uikit-pro-standard.js
How can I solve this error?
Arkadiusz Idzikowski staff commented 5 years ago
This error has already been reported to us and we are already working on a solution. Update with a fix should be available next week.
myictsolutions pro premium commented 5 years ago
Great thanks for the update ! pls send me a message when the update is ready :)
Hi,
I found a problem that when ever a component is lazy loaded. the mdb components declared in app.module.ts are nolonger found for this lazy components. also if i declare MDB in the shared module it isn't possible to the clare the for root function.
how can is solve this. below code snippet (shared module)
import { NgModule } from '@angular/core';
import { QuicklinkModule } from 'ngx-quicklink';import { CommonModule } from '@angular/common';import { LayoutModule } from '@angular/cdk/layout';import { RouterModule } from '@angular/router';import { WavesModule, ButtonsModule, InputsModule, CardsModule, MDBBootstrapModulesPro, IconsModule } from 'ng-uikit-pro-standard';import { NgwWowModule } from 'ngx-wow';import { FormsModule, ReactiveFormsModule } from '@angular/forms';import { HttpClientModule } from '@angular/common/http';import { ToastModule } from 'ng-uikit-pro-standard';import { AgmCoreModule } from '@agm/core';
const components = \[\];
const modules = \[ QuicklinkModule, CommonModule, LayoutModule, RouterModule, WavesModule, ButtonsModule, InputsModule, CardsModule, MDBBootstrapModulesPro.forRoot(), NgwWowModule, FormsModule, ReactiveFormsModule, IconsModule, HttpClientModule, ToastModule.forRoot(), AgmCoreModule.forRoot({ apiKey: '' })\];
@NgModule({ declarations: \[...components\], imports: \[...modules\], exports: \[ ...components, ...modules, \]})export class SharedModule {}
kind regards
Arkadiusz Idzikowski staff commented 5 years ago
It is expected behavior, you need to add MDB inports to lazy module again, because it doesn't have access to root module imports.
If you import specific MDB modules like InputsModule or CardsModule, then it is not recommended to import MDBBootstrapModulesPro, because this module contain every MDB module.
What is the exact problem with forRoot method?
myictsolutions pro premium commented 5 years ago
oke, thanks. I think i figured it out. Is there a possibility to preload font awesome in MDB Angular?
Arkadiusz Idzikowski staff commented 5 years ago
We didn't test that yet and we don't have any guide for font preloading. I added a task for that and we will definitely check that, but we can't provide an ETA yet.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 9.0.0
- Device: Mac Book pro
- Browser: chrome
- OS: Catalina
- Provided sample code: No
- Provided link: Yes