mdb-stepper not working in beta6


Topic: mdb-stepper not working in beta6

Tobias pro premium asked 3 years ago

I'm on beta6 of mdb5-angular-ui-kit-pro-essential, trying to implement the stepper. I've done the import in app.module.ts and I'm using the first example in the docs, but I get this error in my template:

'mdb-stepper' is not a known element: 1. If 'mdb-stepper' is an Angular component, then verify that it is part of this module. 2. If 'mdb-stepper' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)


Arkadiusz Idzikowski staff commented 3 years ago

@Tobias Did you import the component module MdbStepperModule from the new import path: mdb-angular-ui-kit/stepper?


Tobias pro premium commented 3 years ago

Sure did:

import { MdbStepperModule } from 'mdb-angular-ui-kit/stepper';


Arkadiusz Idzikowski staff commented 3 years ago

@Tobias Please try to remove the node_modules folder and package-lock.json file and reinstall your dependencies with npm install to ensure this is not a problem with cache.

We double-checked library exports and tested the component in new Angular application and it looks like everything is working correctly.


Tobias pro premium commented 3 years ago

Ok, so I removed node_modules and package-lock.json and reinstalled all dependencies. But still the same error.


Tobias pro premium commented 3 years ago

My app.module.ts:

import { MdbStepperModule } from 'mdb-angular-ui-kit/stepper';
…
@NgModule ({
  ...
  imports: [MdbStepperModule],
  ...
})

My component template:

<mdb-stepper>
    <mdb-step *ngFor="let step of steps" [name]="step.name">
      {{ step.content }}
    </mdb-step>
</mdb-stepper>

Am I missing something?


Arkadiusz Idzikowski staff commented 3 years ago

@Tobias The configuration looks correct. Please go to node_modules/mdb-angular-ui-kit and check the version in package.json to make sure that you use 1.0.0-beta6. We double-checked that and could not found any problems with this component.


Tobias pro premium commented 3 years ago

Thanks for checking, the package.json states: "_from": "git+https://oauth2:xxxxxxxxxxxx@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential", "_id": "mdb-angular-ui-kit@1.0.0-beta6"


Arkadiusz Idzikowski staff commented 3 years ago

@Tobias Can you prepare an example project on which we will be able to reproduce that and send it to a.idzikowski@mdbootstrap.com?


Tobias pro premium commented 3 years ago

This so weird. So I created a new project and the stepper works. I've compared the code to the original project but simply can't see what differs, that can have an impact here.


Arkadiusz Idzikowski staff commented 3 years ago

@Tobias Do you use the same Angular version and configuration in both projects?


Tobias pro premium commented 3 years ago

Yes, they are the same. Weird that it's only the stepper that is not working, using lot's of other components that are working fine.


Tobias pro premium commented 3 years ago

The only difference is that the old project had to be upgraded (11->12) due to beta6, which the new project didn't. Anyway, I ended up creating a new project where I had stepper confirmed working and then component by component migrate all code from the old project. It is all working now. Let's hope you don't add any hard requirements for Angular 13 in the coming betas :) Thanks for your efforts!


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: No