Cannot generate an Angular stepper component because MDBoots


Topic: Cannot generate an Angular stepper component because MDBootstrap is incompatible with Angular Ivy

acoyani asked 4 years ago

I am using MDBootstrap Angular Pro Basic 10.0.0 and I intend to create a stepper wizard like here. In order to do that I downloaded the MDB Pro Basic package from my "My Orders" page, decompressed it into a directory and installed its dependencies with npm install.

Then, I created an Angular component with ng generate component vertical-stepper, and then, according to the Angular Stepper API help, on src/app.component.ts, on the imports, I added MdbStepperComponent and MdbStepComponent.

Then, on src/app/vertical-stepper/vertical-stepper.component.ts, I put:

import { StepperModule, WavesModule } from 'ng-uikit-pro-standard';

Then, from the official vertical stepper manual, I pasted the provided HTML code on src/app/vertical-stepper/vertical-stepper-component.html, and the provided Typescript code on src/app/vertical-stepper/vertical-stepper-component.ts.

Then, in src/app/app.component.html, I added this:

<vertical-stepper></vertical-stepper>

Afterwards, I served my Angular project with ng serve on the project root directory.

Expected behavior

I expected to see a vertical stepper wizard on the MDBootstrap example page.

Actual behavior

I get the following error output on the terminal where I called ng serve:

``` Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/

✔ Browser application bundle generation complete.

Initial Chunk Files | Names     |      Size
vendor.js           | vendor    |   6.06 MB
styles.css          | styles    | 603.72 kB
polyfills.js        | polyfills | 141.37 kB
main.js             | main      |  22.45 kB

2 unchanged chunks

Build at: 2020-11-15T02:08:27.271Z - Hash: 49c5751b5ebb6ceeed67 - Time: 7564ms

✔ Compiled successfully.

Error: node_modules/ng-uikit-pro-standard/lib/pro/stepper/stepper.component.d.ts:12:22
 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be 
resolved to an NgModule class.

This likely means that the library (ng-uikit-pro-standard) which declares 
MdbStepperComponent has not been processed correctly by ngcc, or is not compatible 
with Angular Ivy. Check if a newer version of the library is available, and update if so. Also 
consider checking with the library's authors to see if the library is expected to be 
compatible with Ivy.

12 export declare class MdbStepperComponent implements AfterContentInit, AfterViewInit, AfterContentChecked, OnDestroy {
                        ~~~~~~~~~~~~~~~~~~~
node_modules/ng-uikit-pro-standard/lib/pro/stepper/step.component.d.ts:4:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (ng-uikit-pro-standard) which declares MdbStepComponent has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

4 export declare class MdbStepComponent implements OnInit {
                       ~~~~~~~~~~~~~~~~

```


Arkadiusz Idzikowski staff commented 4 years ago

The import { StepperModule, WavesModule } from 'ng-uikit-pro-standard'; should be added to the module file, and those imports must be included in the imports array of the module (unless you use import that contain all MDB modules - MDBBootstrapModulesPro.forRoot(). You mentioned that you added those imports to the component ts file.


acoyani commented 4 years ago

I tried replacing the individual imports on src/app.component.ts with MDBBootstrapModulesPro.forRoot(). The Angular compatibility error now goes away, but I still can't see my stepper. I'm new to Angular, so I'll post extra details on a reply.


acoyani answered 4 years ago

Based on Arkadiusz's comment, I tried replacing my individual imports with MDBBootstrapModulesPro.forRoot() on src/app/app.module.ts. The Angular compatibility error now goes away, but I still can't see my stepper.

I'm still new to Angular, so maybe it's just a mistake of mine. To rule that out, I'll provide my relevant files.

src/app/app.module.ts

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 { HttpClientModule } from '@angular/common/http';
import { AgmCoreModule } from '@agm/core';
import { AppComponent } from './app.component';

import { MDBSpinningPreloader, MDBBootstrapModulesPro, ToastModule, MdbStepperComponent, MdbStepComponent } from 'ng-uikit-pro-standard';
import { VerticalStepperComponent } from './vertical-stepper/vertical-stepper.component';

@NgModule({
declarations: [
   AppComponent,
   VerticalStepperComponent
],
imports: [
   BrowserModule,
   BrowserAnimationsModule,
   FormsModule,
   HttpClientModule,
   ToastModule.forRoot(),
   MDBBootstrapModulesPro.forRoot(),
   //MdbStepperComponent,
   //MdbStepComponent,
   //StepperModule, WavesModule,
   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 { }

src/app/app.component.html

<div style="height: 100vh">
<div class="flex-center flex-column">
   <h1 class="animated fadeIn mb-4">Material Design for Bootstrap (Angular)</h1>

   <h5 class="animated fadeIn mb-3">Thank you for using our product. We're glad you're with us.</h5>
   <h6 class="animated fadeIn mb-3">Start browsing <a href="https://mdbootstrap.com/angular">documentation</a>.</h6>

   <p class="animated fadeIn text-muted">MDB Team</p>

   <p>Test goes here</p>
   <vertical-stepper></vertical-stepper>
</div>
</div>

src/app/vertical-stepper/vertical-stepper.component.html

<mdb-stepper #stepper [vertical]="true">
   <mdb-step name="Step 1" label="Type something" [stepForm]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <div class="md-form">
         <input type="text" class="form-control" mdbInput mdbValidate formControlName="email">
         <label for="">Email</label>
         <mdb-error *ngIf="email.invalid && (email.dirty || email.touched)">Input invalid</mdb-error>
         <mdb-success *ngIf="email.valid && (email.dirty || email.touched)">Input valid</mdb-success>
       </div>
     </form>
     <button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
   </mdb-step>
   <mdb-step name="Step 2" [stepForm]="secondFormGroup">
     <form [formGroup]="secondFormGroup">
       <div class="md-form">
         <input type="password" class="form-control" mdbInput mdbValidate formControlName="password">
         <label for="">Password</label>
         <mdb-error *ngIf="password.invalid && (password.dirty || password.touched)">Input invalid</mdb-error>
         <mdb-success *ngIf="password.valid && (password.dirty || password.touched)">Input valid</mdb-success>
       </div>
     </form>
     <button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
     <button mdbBtn size="sm" color="secondary" (click)="stepper.previous()">BACK</button>
   </mdb-step>
   <mdb-step name="Step 3" label="Step 3 label">
     <p class="pl-2">Finish!</p>
     <div class="step-actions">
       <button mdbBtn  size="sm" color="primary" (click)="onSubmit()">SUBMIT</button>
     </div>
   </mdb-step>
</mdb-stepper>

src/app/vertical-stepper/vertical-stepper.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { StepperModule, WavesModule } from 'ng-uikit-pro-standard';

@Component({
  selector: 'vertical-stepper',
  templateUrl: './vertical-stepper.component.html',
})
export class VerticalStepperComponent implements OnInit {
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  ngOnInit() {
    this.firstFormGroup = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email])
    });
    this.secondFormGroup = new FormGroup({
      password: new FormControl('', Validators.required)
    });
  }

  get email() { return this.firstFormGroup.get('email'); }
  get password() { return this.secondFormGroup.get('password'); }

  onSubmit() {
    // do something here
  }

}

Arkadiusz Idzikowski staff commented 4 years ago

Are there any errors in the console when you open the view in which the vertical stepper should be rendered?


acoyani commented 4 years ago

No console errors, just nothing renders. At most it goes down to the <mdb-stepper> tag but that's it.

My component just renders like this:

<vertical-stepper _ngcontent-fnd-c189=""><mdb-stepper class="ng-tns-c175-0"></mdb-stepper></vertical-stepper>


Arkadiusz Idzikowski staff commented 4 years ago

Can you send a simple demo app with this example to a.idzikowski@mdbootstrap? We would need to check the whole app configuration and it would be much easier to find the cause of the problem this way.


acoyani commented 4 years ago

Thank you very much for your attention. I just sent you a code sample to this provided mail. Hopefully this will help find the root cause.


Arkadiusz Idzikowski staff commented 4 years ago

Thank you for the demo app. We will check it and let you know what we found.


acoyani commented 4 years ago

Would you happen to have any news regarding my demo app?


Arkadiusz Idzikowski staff commented 4 years ago

It looks like you have imports between two components declarations in the app.component.ts file. Please try to move the imports to the top and let us know if that helped to resolve the problem.


acoyani commented 4 years ago

For the record, I recently had an account creation issue corrected that was blocking me from logging in to MDB CLI, and I recently managed to create correctly a project with MDB CLI. However, I am still running into the same issue as before. I'll try these fixes and let you know my results.


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
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 10.0.0
  • Device: VMware Player for Linux
  • Browser: Firefox 78.4.0 ESR
  • OS: Linux Debian 10 AMD64
  • Provided sample code: No
  • Provided link: Yes