Topic: Lazyloading and route preloading Angular MDB

myictsolutions premium asked 4 years ago


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,


Arkadiusz Idzikowski staff answered 4 years ago


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 premium commented 4 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 4 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 premium commented 4 years ago

Great thanks for the update ! pls send me a message when the update is ready :)


myictsolutions premium answered 4 years ago


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 4 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 premium commented 4 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 4 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.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • 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