list group error - angular - Material Design for Bootstrap

Topic: list group error - angular

Anas mohammed pro asked 6 years ago

please reply me the below error Uncaught Error: Template parse errors: Can't bind to 'vertical' since it isn't a known property of 'mdb-tabset'. 1. If 'mdb-tabset' is an Angular component and it has 'vertical' input, then verify that it is part of this module. 2. If 'mdb-tabset' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <mdb-tabset [ERROR ->][vertical]="true" [buttonClass]="'tabs-white flex-column'" [contentClass]="'vertical'">  <mdb-tabset [vertical]="true" [ERROR ->][buttonClass]="'tabs-white flex-column'" [contentClass]="'vertical'">  <mdb-tab he"): ng:///DashboardModule/RootComponent.html@1:30 Can't bind to 'contentClass' since it isn't a known property of 'mdb-tabset'. 1. If 'mdb-tabset' is an Angular component and it has 'contentClass' input, then verify that it is part of this module. 2. If 'mdb-tabset' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <mdb-tabset [vertical]="true" [buttonClass]="'tabs-white flex-column'" [ERROR ->][contentClass]="'vertical'">  <mdb-tab heading="<a class='list-group-item'> Home <"): ng:///DashboardModule/RootComponent.html@1:71 'mdb-tab' is not a known element: 1. If 'mdb-tab' is an Angular component, then verify that it is part of this module. 2. If 'mdb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("l]="true" [buttonClass]="'tabs-white flex-column'" [contentClass]="'vertical'">  [ERROR ->]<mdb-tab heading="<a class='list-group-item'> Home </a>"> <div class="row"> <div cla"): ng:///DashboardModule/RootComponent.html@3:2 'mdb-tab' is not a known element: 1. If 'mdb-tab' is an Angular component, then verify that it is part of this module. 2. If 'mdb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </mdb-tab>  [ERROR ->]<mdb-tab heading="<a class='list-group-item'> Profile </a>"> <div class="row"> <div "): ng:///DashboardModule/RootComponent.html@13:2 'mdb-tab' is not a known element: 1. If 'mdb-tab' is an Angular component, then verify that it is part of this module. 2. If 'mdb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </mdb-tab>  [ERROR ->]<mdb-tab heading="<a class='list-group-item'> Messages </a>"> <div class="row"> <div"): ng:///DashboardModule/RootComponent.html@23:2 'mdb-tab' is not a known element: 1. If 'mdb-tab' is an Angular component, then verify that it is part of this module. 2. If 'mdb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </mdb-tab>  [ERROR ->]<mdb-tab heading="<a class='list-group-item'> Settings </a>"> <div class="row"> <div"): ng:///DashboardModule/RootComponent.html@33:2 'mdb-tabset' is not a known element: 1. If 'mdb-tabset' is an Angular component, then verify that it is part of this module. 2. If 'mdb-tabset' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]<mdb-tabset [vertical]="true" [buttonClass]="'tabs-white flex-column'" [contentClass]="'vertical'"> "): ng:///DashboardModule/RootComponent.html@1:0

Damian Gemza staff commented 6 years ago

Dear salmansahnoon, Did you attached NO_ERRORS_SCHEMA to your app.module.ts file? If not, please do it, and let me know how stuff going. Best Regards, Damian

Anas mohammed pro commented 6 years ago

ofcrs i attached it on app.module.ts file. kindly verify it from your side too.

Anas mohammed pro commented 6 years ago

import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { MDBBootstrapModules } from 'ng-mdb-pro'; import { MDBSpinningPreloader } from 'ng-mdb-pro'; import { ToastModule } from 'ng-mdb-pro/pro/alerts'; import { RouterModule, Routes } from '@angular/router'; import { FormsModule } from '@angular/forms'; import { HttpModule, XHRBackend } from '@angular/http'; import { AuthenticateXHRBackend } from './authenticate-xhr.backend'; import { HttpClientModule } from '@angular/common/http'; import { AuthGuard } from './auth.guard'; import { routing } from './app.routing'; // services import { AccountService } from './service/account.service'; import { ConfigService } from './service/config.service'; // components import { HomeComponent } from './page/home/home.component'; import { AppComponent } from './app.component'; import { HeaderComponent } from './page/header/header.component'; import { FooterComponent } from './page/footer/footer.component'; /* Dashboard Imports */ import { DashboardModule } from './page/dashboard/dashboard.module'; @NgModule({ declarations: [ AppComponent, HomeComponent, HeaderComponent, FooterComponent ], imports: [ DashboardModule, FormsModule, BrowserAnimationsModule, HttpModule, HttpClientModule, BrowserModule, ToastModule.forRoot(), MDBBootstrapModules.forRoot(), routing ], providers: [ AccountService, MDBSpinningPreloader, AuthGuard, ConfigService, { provide: XHRBackend, useClass: AuthenticateXHRBackend } ], schemas: [NO_ERRORS_SCHEMA], bootstrap: [AppComponent] }) export class AppModule { }

// services
import { AccountService } from './service/account.service';
import { ConfigService } from './service/config.service';

// components
import { HomeComponent } from './page/home/home.component';
import { AppComponent } from './app.component';
import { HeaderComponent } from './page/header/header.component';
import { FooterComponent } from './page/footer/footer.component';

/* Dashboard Imports */
import { DashboardModule } from './page/dashboard/dashboard.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    DashboardModule,
    FormsModule,
    BrowserAnimationsModule,
    HttpModule,
    HttpClientModule,
    BrowserModule,
    ToastModule.forRoot(),
    MDBBootstrapModules.forRoot(),
    routing
  ],
  providers: [
    AccountService,
    MDBSpinningPreloader,
    AuthGuard,
    ConfigService, {
      provide: XHRBackend,
      useClass: AuthenticateXHRBackend
    }
  ],
  schemas: [NO_ERRORS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule { }

Please insert min. 15 characters.

Damian Gemza staff commented 6 years ago

Any reproduction steps? I tried to reproduct it on my project, but for me, everything works fine.

Anas mohammed pro commented 6 years ago

Dear Damaian, i tried using both manual installation and npm installation file. but both are not working. how you can help me? Thanks in advance

Damian Gemza staff commented 6 years ago

Salman could you send me your project without node_modules @ my mail? d.gemza@mdbootstrap.com Unfortunately, for me, everything is working fine and i'm unable to reproduce your case. Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Opened

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Anas mohammed

Pro User 4Support score
6Questions 2Answers 0Snippets