Can’t bind to ‘mdbCollapse’ since it isn’t a known property of ‘div’

MDB SupportCategory: MDB AngularCan’t bind to ‘mdbCollapse’ since it isn’t a known property of ‘div’
Constantin Exari asked 9 months ago in MDB free, version:4

I copied this code in my angular component

<button class="btn btn-primary waves-light" type="button" (click)="test.toggle()" mdbRippleRadius>
    Toggle collapse
</button>

<div class="" [mdbCollapse]="isCollapsed" #test="bs-collapse">
    <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
</div>

but it doesn’t work, it show’s me this error: Template parse errors: Can’t bind to ‘mdbCollapse’ since it isn’t a known property of ‘div’.

Damian Gemza replied 2 months ago

Dear milestoneadmin,
I’m unable to reproduce it on MDB Angular 5.2.3 and on MDB Angular Admin Dashboard 5.2.3. Could you please send me your project without node_modules directory at d.gemza@mdbootstrap.com?
I could debug your app and check what’s wrong.
Best Regards,
Damian

milestoneadmin Pro User replied 2 months ago

I can't provide code, But as I said before I had used same code whichever given in toggle example.

version: 5.2.3

Here you go:-

https://mdbootstrap.com/angular/advanced/collapse

Damian Gemza replied 2 months ago

Dear milestoneadmin,
Could you please send me your project without node_modules at d.gemza@mdbootstrap.com? It would help me to debug your problem.
Best Regards,
Damian

milestoneadmin Pro User replied 2 months ago

Here you can see app.module.ts file.

import { RouterModule, Routes } from ‘@angular/router’;
import { ToastModule } from ‘./typescripts/pro/alerts/toast/toast.module’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { NgModule, NO_ERRORS_SCHEMA } from ‘@angular/core’;
import { FormsModule } from ‘@angular/forms’;
import { HttpModule } from ‘@angular/http’;
import { MDBBootstrapModule } from ‘./typescripts/free/index’;
import { MDBBootstrapModulePro } from ‘./typescripts/pro/index’;
import { MDBSpinningPreloader } from ‘./typescripts/pro/index’;
import { AgmCoreModule } from ‘@agm/core’;
import { AppComponent } from ‘./app.component’;

const appRoutes: Routes = [
{ path: ”, loadChildren: ‘./account/account.module#AccountModule’ },
{ path: ‘dashboard’, loadChildren: ‘./dashboard/dashboard.module#DashboardModule’ }
];

@NgModule({
declarations: [
AppComponent
],
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <– debugging purposes only
),
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
ToastModule.forRoot(),
MDBBootstrapModule.forRoot(),
MDBBootstrapModulePro.forRoot(),
AgmCoreModule.forRoot({
// https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key
apiKey: 'Your_api_key'
})
],
providers: [MDBSpinningPreloader],
bootstrap: [AppComponent],
schemas: [NO_ERRORS_SCHEMA]
})

export class AppModule { }

Damian Gemza replied 2 months ago

Dear milestoneadmin,
Could you provide me reproduction steps? And please show me your app.module.ts file (or another module where you’re using our MDB Angular library).
Best Regards,
Damian

milestoneadmin Pro User replied 2 months ago

I found the same issue, but I wasn’t able to solve even after following of below all suggestion. Please help me out with same.

Thank you!!!

3 Answers
Constantin Exari answered 9 months ago

I see that the support for free version of MDB actually doesn’t exist here. Nice, very nice 🙂

Witold Tkaczyk answered 9 months ago

Hi Constantin Exari, 

Sorry, I cannot reproduce your error. Would you please send me some code or even your package in order to investigate your error? You can send it to w.tkaczyk@mdbootstrap.com.

Regards

andrews88l Pro User answered 4 months ago

I’m having the same issue with MDB Pro version 5…

 

Literally copied and pasted the example code and it doesn’t work.

Lil27 Pro User replied 2 months ago

Hi David, here’s a link to prepare your Angular app for Heroku
https://www.codewithjason.com/deploy-angular-cli-webpack-project-heroku/
In addition, here’s my settings in package.json
{
“name”: “mdbootstrappro”,
“version”: “5.2.3”,
“license”: “MIT”,
“scripts”: {
“ng”: “ng”,
“start”: “http-server”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“aot:build”: “ng build –prod –sm=false –aot=true –output-path=dist –build-optimizer=false”,
“pre-commit”: “ng lint”,
“preinstall”: “npm install -g http-server”,
“postinstall”: “ng build –aot –target=production && mv dist/* .”
},

Dawid Adach Pro User replied 3 months ago

You can write them here as an answer, that will be more readable 🙂

Lil27 Pro User replied 3 months ago

That would be great David if you guys will look into it. And I will contact Heroku in the meantime.
Did you want the steps to deploy to Heroku here? Should I submit them someplace else?

Dawid Adach Pro User replied 3 months ago

Dear Lil27,
unfortunately, this looks like an issue with Heroku and their deployment. As you mentioned MDB itself works fine. We are not aware of deployment model of Heroku. Please try to contact them, it looks like they were ignoring import flag. Also please provide us with steps to reproduce deployment, we will look into that in next sprint. I also advise to try to install MDB using npm instead of zip file, perhaps that will help.

Lil27 Pro User replied 3 months ago

Hi David, yes I just download version “mdb-angular-pro-6.0.1” to test and added the Collapse script, and same issue appear. The project already comes with the statement:
import { NgModule, NO_ERRORS_SCHEMA } from ‘@angular/core’;
in the app.module.ts

The collapse will work, but I can’t deploy it to Heroku with this kind of error msg
“Identifier ‘isCollapsed’ is not defined. The component declaration, template variable declarations, and element references do not contain such a member”

Dawid Adach Pro User replied 3 months ago

Lili27, could you please check whether the same happens on fresh MDB project?

Lil27 Pro User replied 3 months ago

I’m having similar issue with MDB Pro version 5
Error msg: “Identifier ‘isCollapsed’ is not defined. The component declaration, template variable declarations, and element references do not contain such a member”

And [NO_ERRORS_SCHEMA] is already applied app.module.ts

Damian Gemza replied 4 months ago

Dear Andrews,
Please add schemas: [NO_ERRORS_SCHEMA] to your app.module.ts
Best Regards,
Damian