Errors when adding MdbSidenavModule to project upon running

Topic: Errors when adding MdbSidenavModule to project upon running ng build

Aakash Banerjee pro premium priority asked 2 years ago

I am trying to add sidenav to a dashboard component in a perfectly working project. Is there anything else I am missing to get the sidenav working? I think the sidenav docs are not very clear. I followed docs at this link: https://mdbootstrap.com/docs/angular/navigation/sidenav/

Component html copied from mdb site looks like this.

dashboard.component.html

    <mdb-sidenav-layout>
  <mdb-sidenav #sidenav="mdbSidenav" [mode]="'side'">
    <ul class="sidenav-menu">
      <mdb-sidenav-item *ngFor="let item of items">
        <a class="sidenav-link" tabindex="0" [class.active]="rla.isActive">
          <i class="fas fa-grin fa-fw me-3"></i><span>{{ item.name }}</span>
        </a>
        <ul class="sidenav-collapse" mdbCollapse [collapsed]="!rla.isActive" #rla="routerLinkActive" routerLinkActive>
          <li class="sidenav-item" *ngFor="let link of item.links">
            <a class="sidenav-link" tabindex="0" [routerLink]="[link.route]" [routerLinkActive]="'active'">{{ link.name }}</a>
          </li>
        </ul>
      </mdb-sidenav-item>
    </ul>
  </mdb-sidenav>
  <mdb-sidenav-content #sidenavContent>
    <!-- Toggler -->
    <button class="btn btn-primary" (click)="sidenav.toggle()">
      <i class="fas fa-bars"></i>
    </button>
    <!-- Toggler -->
    <router-outlet></router-outlet>
  </mdb-sidenav-content>
</mdb-sidenav-layout>

app.module.ts

import { MdbSidenavModule } from 'mdb5-angular-ui-kit-pro-essential/sidenav';

Then I added

imports: 
[
    MdbSidenavModule,
]

*Expected behavior*ng build should run to completion successfully

Actual behavior

ng build
✔ Browser application bundle generation complete.

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot resolve type entity i7.MdbScrollbarModule to symbol

Error: node_modules/mdb-angular-ui-kit/collapse/collapse.directive.d.ts:23:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.

23     static ɵdir: i0.ɵɵDirectiveDeclaration<MdbCollapseDirective, "[mdbCollapse]", ["mdbCollapse"], { "collapsed": "collapsed"; }, { "collapseShow": "collapseShow"; "collapseShown": "collapseShown"; "collapseHide": "collapseHide"; "collapseHidden": "collapseHidden"; }, never, never, false, never>;
                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/mdb5-angular-ui-kit-pro-essential/sidenav/sidenav.module.d.ts:8:21 - error TS2307: Cannot find module 'mdb-angular-ui-kit/scrollbar' or its corresponding type declarations.

8 import * as i7 from "mdb-angular-ui-kit/scrollbar";
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Deleted node_modules folder and ran ng build again, errors below.

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot resolve type entity i6.MdbCollapseModule to symbol

Error: node_modules/mdb5-angular-ui-kit-pro-essential/sidenav/sidenav-item.component.d.ts:4:38 - error TS2307: Cannot find module 'mdb-angular-ui-kit/collapse' or its corresponding type declarations.

4 import { MdbCollapseDirective } from 'mdb-angular-ui-kit/collapse';
                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/mdb5-angular-ui-kit-pro-essential/sidenav/sidenav.component.d.ts:3:38 - error TS2307: Cannot find module 'mdb-angular-ui-kit/collapse' or its corresponding type declarations.

3 import { MdbCollapseDirective } from 'mdb-angular-ui-kit/collapse';
                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/mdb5-angular-ui-kit-pro-essential/sidenav/sidenav.module.d.ts:7:21 - error TS2307: Cannot find module 'mdb-angular-ui-kit/collapse' or its corresponding type declarations.

7 import * as i6 from "mdb-angular-ui-kit/collapse";
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/mdb5-angular-ui-kit-pro-essential/sidenav/sidenav.module.d.ts:8:21 - error TS2307: Cannot find module 'mdb-angular-ui-kit/scrollbar' or its corresponding type declarations.

8 import * as i7 from "mdb-angular-ui-kit/scrollbar";


         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Resources (screenshots, code snippets etc.)

Aakash Banerjee pro premium priority commented 2 years ago

I have added the items array in the dashboard.component.ts as well.

Arkadiusz Idzikowski staff commented 2 years ago

Did you follow our guide to install and configure MDB library: https://mdbootstrap.com/docs/angular/pro/installation/?

The side nav module import path looks strange, it should be from mdb-angular-ui-kit/sidenav.

Aakash Banerjee pro premium priority commented 2 years ago

Hi Arkadiusz I did, this is actually a project that uses many MDB5 components. When I try adding the sidenav that causes the problem.

In package.json I see

"mdb-angular-ui-kit": "^4.0.0", "mdb5-angular-ui-kit-pro-essential": "git+https://oauth2:XXXX@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential.git",

I have tried both imports

import { MdbSidenavModule } from 'mdb-angular-ui-kit/sidenav'; and import { MdbSidenavModule } from 'mdb5-angular-ui-kit-pro-essential/sidenav';

Doesn't work. However when I remove the sidenav related stuff imports etc everything build and serve works fine.

Arkadiusz Idzikowski staff commented 2 years ago

Please remove the mdb-angular-ui-kit package from your package.json, rename mdb5-angular-ui-kit-pro-essential to mdb-angular-ui-kit and reinstall your dependencies (it might be good idea to remove the node_modules and package-lock before running npm install again). You will then need to fix your import paths (from mdb5-angular-ui-kit-pro-essential to mdb-angular-ui-kit).

These packages are the same library, the only difference is that the one installed from our GitLab is an extended version with access to pro components. I'm not sure if that is causing the problem, but it is better to fix that anyway before we start looking for another cause.

Aakash Banerjee pro premium priority commented 2 years ago

Thank you but issues persist.

I have removed "mdb-angular-ui-kit": "^4.0.0" from package.json and added the line below.

"mdb-angular-ui-kit": "git+https://oauth2:xxxxx@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential.git",

Deleted node_modules and then ran npm install.

Installation succeeds. Then I added the imports for sidenav like below.

app.module.ts

import { MdbSidenavModule } from 'mdb-angular-ui-kit/sidenav';

imports: [ MdbSidenavModule, ]

Then I run ng build.

Below are the errors I get now.

Error: node_modules/mdb-angular-ui-kit/sidenav/sidenav-content.component.d.ts:5:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.

5 static ɵcmp: i0.ɵɵComponentDeclaration; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/mdb-angular-ui-kit/sidenav/sidenav-item.component.d.ts:31:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.

31 static ɵcmp: i0.ɵɵComponentDeclaration; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/mdb-angular-ui-kit/sidenav/sidenav-loyaut.component.d.ts:23:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.

23 static ɵcmp: i0.ɵɵComponentDeclaration; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/mdb-angular-ui-kit/sidenav/sidenav.component.d.ts:129:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.

129 static ɵcmp: i0.ɵɵComponentDeclaration; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Aakash Banerjee pro premium priority commented 2 years ago

Here is what my project environment looks like.

Angular CLI: 14.2.10 Node: 16.17.1 Package Manager: npm 8.15.0 OS: darwin x64

Angular: 14.2.12 ... animations, common, compiler, compiler-cli, core, forms ... language-service, localize, platform-browser ... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1402.10 @angular-devkit/build-angular 14.2.10 @angular-devkit/core 14.2.10 @angular-devkit/schematics 14.2.10 @angular/cdk 13.3.9 @angular/cli 14.2.10 @schematics/angular 14.2.10 rxjs 6.5.5 typescript 4.6.4

Arkadiusz Idzikowski staff commented 2 years ago

It looks like some of the dependencies you use are outdated. I added an answer with an example dependency list that we use in our ready-to-use projects (MDB Angular v4.x.x requires Angular 15).

Add comment

Arkadiusz Idzikowski staff answered 2 years ago

0 0 Best answer

You need to update the Angular (and its dependencies) version. Here is an example dependency list that we use in our projects with MDB Angular v4.0.0:

  "dependencies": {
    "@angular/animations": "^15.0.2",
    "@angular/cdk": "^15.0.1",
    "@angular/common": "^15.0.2",
    "@angular/compiler": "^15.0.2",
    "@angular/core": "^15.0.2",
    "@angular/forms": "^15.0.2",
    "@angular/platform-browser": "^15.0.2",
    "@angular/platform-browser-dynamic": "^15.0.2",
    "@angular/router": "^15.0.2",
    "@fortawesome/fontawesome-free": "^6.0.0",
    "chart.js": "^3.1.1",
    "mdb-angular-ui-kit": "git+https://oauth2:XXXX@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential.git",
    "rxjs": "~7.5.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.2",
    "@angular/cli": "^15.0.2",
    "@angular/compiler-cli": "^15.0.2",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.7.0",
    "typescript": "~4.8.3"
  }

Aakash Banerjee pro premium priority commented 2 years ago

Thanks @Arkadiusz Idzikowski but I am licensed and looking at using MDB Angular v 5.0 with Angular 14. Should I upgrade to Angular 15? Anything I can do to make sure I am upgrading and using MDB Angular v 5? Thank you.

Aakash Banerjee pro premium priority commented 2 years ago

Finally I updated Typescript and then angular to 15, I am able to build and serve. package and tool versions below. How do I know if I am using MDB Angular 4 or 5? How d Angular CLI: 15.2.4 Node: 16.17.1 Package Manager: npm 8.15.0 OS: darwin x64

Angular: 15.2.3 ... animations, common, compiler, compiler-cli, core, forms ... language-service, localize, platform-browser ... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1502.4 @angular-devkit/build-angular 15.2.4 @angular-devkit/core 15.2.4 @angular-devkit/schematics 15.2.4 @angular/cdk 13.3.9 @angular/cli 15.2.4 @schematics/angular 15.2.4 rxjs 6.5.5 typescript 4.8.2

Arkadiusz Idzikowski staff commented 2 years ago

The 5 in MDB Angular 5 is part of the library name and means that the library is built with Bootstrap 5 (in MDB Angular 4 we used Bootstrap 4). This may be a bit confusing right now because the latest version of MDB Angular 5 is v4.0.0.

When you install MDB Angular 5, the npm package name is mdb-angular-ui-kit (in MDB Angular 4 it was called ng-uikit-pro-standard). In this case your configuration is correct if you wanted to use MDB Angular 5.

Aakash Banerjee pro premium priority commented 2 years ago

Thank you so much! I have been able to upgrade to Angular 15 and the sidenav works with a little deviation from what I want or thought.

So I have two simple component. Dashboard (component with sidenav links) and Life(simple component with an image).

app.routing.module.ts const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full'}, { path: 'home', component: LandingzoneComponent }, { path: 'life', component: LifeComponent, canActivate:[AuthGuard] }, { path: 'signout', component: SignoutComponent }, { path: 'dashboard', component: DashboardComponent, canActivate:[AuthGuard] }, { path: '**', redirectTo: '/home'}, ];

dashboard.component.html

<div class="mt-4">
  <div id="header-content" class="ps-3">
    <img
      src="/assets/hello.jpg"
      alt="Avatar"
      class="rounded-circle img-fluid mb-3"
      style="max-width: 200px"
    />
    <h4 class="text-dark">name</h4>
    <p class="text-dark">email</p>
  </div>
  <hr class="mb-0" />
</div>

<ul class="sidenav-menu" style="background-color: #000000; height: 100vh;">
  <mdb-sidenav-item *ngFor="let item of items">
    <a class="sidenav-link" tabindex="0" [class.active]="rla.isActive">
      <i class="fas fa-user fa-fw me-3"></i><span>{{ item.name }}</span>
    </a>
    <ul class="sidenav-collapse" mdbCollapse [collapsed]="!rla.isActive" #rla="routerLinkActive" routerLinkActive>
      <li class="sidenav-item" *ngFor="let link of item.links">
        <a class="sidenav-link" tabindex="0" [routerLink]="[link.route]" [routerLinkActive]="'active'">{{ link.name }}</a>
      </li>
    </ul>
  </mdb-sidenav-item>
</ul>

<button class="btn btn-light" (click)="sidenav.toggle()">
  <i class="fas fa-bars"></i>
</button>

<router-outlet></router-outlet>

dashboard.component.ts import { Component, OnInit } from '@angular/core';

@Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) export class DashboardComponent implements OnInit {

constructor() { }

items = [ { name: 'Personal', links: [ { name: 'Life', route: '/life' }, { name: 'Logout', route: '/signout' } ], }, ];

ngOnInit(): void { }

}

When I click on life link on sidenav instead of displaying the component inside the sidenav content it takes me to the life component where the sidenav is not part of the component. Is this how it is supposed to work. It would be nice if the components rendered in the sidenav content inside the dashboard component. Do I have to do something with the router-outlet? Thank you again.

Arkadiusz Idzikowski staff commented 2 years ago

I think in this case you would need to fix your routes configuration (or move the sidenav code to some main, parent component). If router-outlet is placed inside the mdb-sidenav-content and you want to display the Life component there, then the Life component route needs to be a child route of the Dashboard component.

I marked this thread as resolved because I think we already have the answer to the original question. In case of any further problems with our components, please consider creating a new thread.

Add comment

Write

Create snippet

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 4.0.0
Device: Macbook Pro
Browser: Mozilla
OS: macOS Ventura 13.2.1
Provided sample code: No
Provided link: Yes

Aakash Banerjee

Pro User Premium support

20Support score
7Questions 3Answers

0Snippets likes 0Snippets