Topic: Problems to setup MDB with Angular
Hello guys,
I try to run Angular with MDB PRO Bundle as a single user but I've a problem. I setup my standard Angular project, add the resource files to the asset folder, add these paths to the angular.json file like this:
"styles": [
"src/styles.css",
"src/assets/mdb/css/mdb.min.css"
],
"scripts": [
"src/assets/mdb/js/mdb.es.min.js"
]
It works until I need for example the collapse module for the header. I tried to import it in the component but it won't be found.
import { Component } from '@angular/core';
import { MdbCollapseModule } from 'mdb-angular-ui-kit/collapse';
@Component({
selector: 'app-header',
imports: [MdbCollapseModule],
templateUrl: './header.component.html',
styleUrl: './header.component.css',
})
export class HeaderComponent {
}
How can I fix it?
Modules like MdbCollapseModule are part of the MDB Angular library and it seems like you are trying to import JS/CSS from the MDB Standard (which is MDB version written in a plain JS).
If you have access to the Angular version, please follow this installation guide: https://mdbootstrap.com/docs/angular/pro/installation/
Kevin priority commented 2 weeks ago
I found the solution. But do you know that there're several deprecations like:
▲ [WARNING] Deprecation [plugin angular-sass]
src/styles.scss:8:8:
8 │ @import 'mdb-angular-vector-maps/scss/vector-map.scss';
╵ ^
Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
And how can I clean update the resources if there are newer ones from MDB without overwriting the app component e.g.?
Kevin priority commented 2 weeks ago
And is it better to use standalone:false with MDB or can I use standalone:true too without problems?
Arkadiusz Idzikowski staff commented 2 weeks ago
We are aware of those deprecation warnings. We rely on the Bootstrap styles and we need to wait for the Bootstrap to update their syntax first. The @import syntax is still supported in Angular (the Dart Sass 3.0.0 package is not even available yet). We will make sure to update the code in time.
If you prefer to use standalone components in your app you can do that without any problems. In this case instead of updating your modules import array you will need to include MDB Angular modules imports in the standalone components.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 9.1.0
- Device: Computer
- Browser: Firefox
- OS: Windows 11
- Provided sample code: No
- Provided link: No