npm install mdb5 angular advanced errors

Topic: npm install mdb5 angular advanced errors

Aakash Banerjee priority asked 1 year ago

Expected behavior npm install should complete successfully

Actual behavior

npm install git+https://oauth2:xxxxxxxxxxxxxxxx@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-advanced.git --save
npm WARN tarball tarball data for mdb-angular-calendar@file:mdb-angular-calendar-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-cookies-management@file:mdb-angular-cookies-management-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-countdown@file:mdb-angular-countdown-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-input-mask@file:mdb-angular-input-mask-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-drag-and-drop@file:mdb-angular-drag-and-drop-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-file-upload@file:mdb-angular-file-upload-3.0.1.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-mention@file:mdb-angular-mention-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-parallax@file:mdb-angular-parallax-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-onboarding@file:mdb-angular-onboarding-3.0.1.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-storage-management@file:mdb-angular-storage-management-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-transfer@file:mdb-angular-transfer-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-treeview@file:mdb-angular-treeview-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-scroll-status@file:mdb-angular-scroll-status-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-vector-maps@file:mdb-angular-vector-maps-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-wysiwyg@file:mdb-angular-wysiwyg-3.0.1.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-ui-kit@file:mdb-angular-ui-kit-3.0.1.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-calendar@file:mdb-angular-calendar-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-cookies-management@file:mdb-angular-cookies-management-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-countdown@file:mdb-angular-countdown-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-input-mask@file:mdb-angular-input-mask-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-drag-and-drop@file:mdb-angular-drag-and-drop-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-file-upload@file:mdb-angular-file-upload-3.0.1.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-mention@file:mdb-angular-mention-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-parallax@file:mdb-angular-parallax-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-onboarding@file:mdb-angular-onboarding-3.0.1.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-storage-management@file:mdb-angular-storage-management-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-transfer@file:mdb-angular-transfer-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-treeview@file:mdb-angular-treeview-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-scroll-status@file:mdb-angular-scroll-status-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-vector-maps@file:mdb-angular-vector-maps-3.0.0.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-wysiwyg@file:mdb-angular-wysiwyg-3.0.1.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for mdb-angular-ui-kit@file:mdb-angular-ui-kit-3.0.1.tgz (null) seems to be corrupted. Trying again.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve

Resources (screenshots, code snippets etc.) I have a working project that uses mdb4 that i used npm install using this repo git+https://oauth2:xxxxxxxxx@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git

I am trying to upgrade the project to mdb5 angular advanced uikit. I have removed the node_modules folder ng-uikit-pro-standard and then tried the npm install for the mdb5. npm ERR and WARN messages are being generated.

Is there a process to upgrade from the package i am using to the mdb5 angular advanced. Thank you.

Add comment

Arkadiusz Idzikowski staff answered 1 year ago

0 0 Best answer

Please insert min. 20 characters.

Please take a look at our installation guide, we described the mdb-angular-ui-kit installation step by step there: https://mdbootstrap.com/docs/angular/pro/installation/

The mdb5-angular-ui-kit-pro-advanced is a ready-to-use Angular project, not a library you can install in an existing application. MDB Advanced is composed of a core UI Kit (Essential) and Plugins, you need to install those libraries separately.

In this case, you need to install mdb5-angular-ui-kit-pro-essential package.

Aakash Banerjee priority commented 1 year ago

Thanks @Arkadiusz understood. However, the bigger question that will help me decide one way or the other is:

I am currently using MDB ANGULAR PRO BASIC 14.0.0. I had purchased this probably 2017/2018 and I used npm install method with the token.

Do you recommend I create a brand new project with the MDB5 mdb5-angular-ui-kit-pro-essential package using the npm install and recreate the angular components and services or is there a way to rework and replace the existing code base?

Thank you for your guidance.

Aakash Banerjee priority commented 1 year ago

I have replaced all references to the old package and replaced it with mdb5-angular-ui-kit-pro-essential in package.json and the build and serve works. But let's say I have this navbar from the project, it shows everything ok but when clicked it does not work as expected (does not route to the target angular component. Do I need to change anything because I switched to mdb5 pro essential ui kit.

    <!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a *ngIf="!loggedin" class="navbar-brand ms-5 mb-2 mb-lg-0" routerLink="/home">Name</a>
    <a *ngIf="loggedin" class="navbar-brand ms-5 mb-2 mb-lg-0" routerLink="/dashboard">Dashboard</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav ms-5 mb-2 mb-lg-0">
            <li class="nav-item">
                <a routerLink="/proex" class="nav-link active">ProEx</a>
            </li>
            <li class="nav-item">
                <a routerLink="/perpro" class="nav-link active">PerPro</a>
            </li>
            <li class="nav-item">
                <a routerLink="/art" class="nav-link active">Art</a>
            </li>
            <li class="nav-item">
                <a routerLink="/photo" class="nav-link active">Photo</a>
            </li>
           <li *ngIf="!loggedin" class="nav-item">
              <a routerLink="/privatezone" class="nav-link active">Login</a>
            </li>
            <li *ngIf="loggedin" class="nav-item">
              <a routerLink="/signout" class="nav-link active">Signout</a>
            </li>
        </ul>
      </div>
     </div>
</nav>

<p>I have replaced all references to the old package and replaced it with mdb5-angular-ui-kit-pro-essential in package.json and the build and serve works. But let's say I have this navbar from the project, it shows everything ok but when clicked it does not work as expected (does not route to the target angular component. Do I need to change anything because I switched to mdb5 pro essential ui kit.</p>

<pre class="prettyprint"><code>    
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a *ngIf="!loggedin" class="navbar-brand ms-5 mb-2 mb-lg-0" routerLink="/home">Name</a>
    <a *ngIf="loggedin" class="navbar-brand ms-5 mb-2 mb-lg-0" routerLink="/dashboard">Dashboard</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav ms-5 mb-2 mb-lg-0">
            <li class="nav-item">
                <a routerLink="/proex" class="nav-link active">ProEx</a>
            </li>
            <li class="nav-item">
                <a routerLink="/perpro" class="nav-link active">PerPro</a>
            </li>
            <li class="nav-item">
                <a routerLink="/art" class="nav-link active">Art</a>
            </li>
            <li class="nav-item">
                <a routerLink="/photo" class="nav-link active">Photo</a>
            </li>
           <li *ngIf="!loggedin" class="nav-item">
              <a routerLink="/privatezone" class="nav-link active">Login</a>
            </li>
            <li *ngIf="loggedin" class="nav-item">
              <a routerLink="/signout" class="nav-link active">Signout</a>
            </li>
        </ul>
      </div>
     </div>
</nav>
</code></pre>

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 1 year ago

I think it would be easier to create a new project and replace syntax from MDB4 Angular (Bootstrap 4) with the one from MDB5 (Bootstrap 5). We tried to keep as many similarities between the two libraries, but the MDB5 is not a continuation of MDB4, it is a completely new product.

You can find the MDB5 Angular documentation here: https://mdbootstrap.com/docs/angular/

In this case, the syntax of our library should not affect the Angular routing. Are there any errors in the browser console when you try to change the route?

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Angular
MDB Version: MDB5 3.0.1
Device: Macbook Pro
Browser: Chrome
OS: macOS 12.6
Provided sample code: No
Provided link: Yes

Aakash Banerjee

20Support score
7Questions 3Answers 0Snippets