Topic: MBD Bootstrap PRO – NPM

tmmidia free asked 4 years ago


Hello guys, I got a MDB Pro license and I need it by npm . I was searching how to do that and then I found https://git.mdbootstrap.com/users/sign_in that you guys have to give me access.
This if my order number #50276.

I tried on contact@mdbootstrap.com but I had no success.
I was talking with f.kapusta@mdbootstrap.com and I had no answer no more.

What should I do ?  how to proceed ?

Could you help me ?


Damian Gemza staff answered 4 years ago


Dear tmmidia, If you click on link which Filip provided you, you have to scroll down and you have to find two blue panels called 'free' and 'pro'. You have to click on 'pro' button, and panel will show you step-by-step instruction how to install MDB Pro using npm. Or, if you click on that link from Filip, just click buttons CTRL + F from your's keyboard, and find NPM installation: header. If you find it, you have to click on 'pro' button in this nice, blue area. And then you will see step-by-step instruction how to install MDB Pro via npm. If you can't find this instructions, I'll paste here it for you: Step 1:  Create new angular project using Angular CLI command: ng new your-angular-project --style=scss Step 2:  cd your-angular-project Step 3:  GitLab npm install  
  • Visit  https://git.mdbootstrap.com  and log in , if you are PRO user and do not have account yet, please request one contacting us:  contact@mdbootstrap.com
  • From top right corner click at your avatar and choose "Setting → Access Tokens" or navigate directly to:  https://git.mdbootstrap.com/profile/personal_access_tokens
  • Provide a Name for your token and choose "api" from scopes. Then click "Create personal access token"
  • Once your token will be generated make sure to copy it and store in safe place. You won't be able to access it again. In case of lose you will have to generate new token again.
  • Navigate to given repository, switch GIT to HTTP and copy it's url i.e. :  http://git.mdbootstrap.com/mdb/angular/ng-pro.git
  • Adjust following link as per below: "git+https://oauth2: + access _token + @ + repo address" 

    i.e. 

    git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-pro.git
  • Within existing npm project run: npm install git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-pro.git --save if you don't have existing npm project you should crate it first (npm init) alternatively you can update your dependencies in package.json like below :  "dependencies": { "ng-pro": "git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-pro.git" } and run npm install
Step 4:  add following imports and providers to your app.module.ts:

import { MDBBootstrapModules } from 'ng-mdb-pro';
import { MDBSpinningPreloader } from 'ng-mdb-pro';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
...
imports: [
    ...
    MDBBootstrapModules.forRoot(),
    ...
],
providers: [
...
MDBSpinningPreloader,
...
],
schemas: [ NO_ERRORS_SCHEMA ]

Step 5: Into your angular-cli.json file   add styles

"styles": [
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/ng-mdb-pro/assets/scss/bootstrap/bootstrap.scss",
"../node_modules/ng-mdb-pro/assets/scss/mdb.scss", 
"./styles.scss"
],
and scripts

"scripts": [
"../node_modules/chart.js/dist/Chart.js",
"../node_modules/easy-pie-chart/dist/easypiechart.js",
"../node_modules/screenfull/dist/screenfull.js",
"../node_modules/hammerjs/hammer.min.js"
],
Step 6: Update ts.config.json file add following into tsconfig.json file located in root folder
"include": ["node_modules/ng-mdb-pro/**/*.ts",  "src/**/*.ts"], 
Step 7: Install 3rd party libraries using npm i --save chart.js@2.5.0 easy-pie-chart@2.1.7 hammerjs@2.0.8 screenfull@3.3.0 font-awesome OR to package.json add:
"chart.js": "^2.5.0", 
"easy-pie-chart": "^2.1.7", 
"hammerjs": "^2.0.8", 
"screenfull": "3.3.0", 
"font-awesome": "^4.7.0"
and then use npm i Step 8: if you want to use maps you will have to npm i --save @agm/core and then add import { AgmCoreModule } from '@agm/core'; to your app.module. To use them you will also need add it to your imports AgmCoreModule.forRoot({ apiKey: 'Your_api_key' }) Step 9: ng serve -o And that's it. If you need more help, please write new message in this topic, or simply write to me an email: d.gemza@mdbootstrap.com Best Regards, Damian  

tmmidia free commented 4 years ago

Thank you Damian and Filip for help me, on this refer link that Filip gave me.. has a component tab.. I didn't see that was a component tab.. I figured those steps would be for both versions. As the MBD Pro Steps is "hidden" by component tab.. it confused me.. by the way thank you guys again.

Damian Gemza staff commented 4 years ago

We're glad that everything is okay to you. I'm closing this topic. Best Regards, Damian

tmmidia free answered 4 years ago


Hi Filip, thanks for your answer, but I still don't know how to install MDB Pro by npm as MDB Free. MDB Free:  npm i angular-bootstrap-md --save MDB PRO: ??? How can I install MDB Pro using npm ?

Filip Kapusta staff commented 4 years ago

If your token is generated you should follow the instruction here: https://mdbootstrap.com/angular/5min-quickstart/ You can choose to install Pro or Free version.

tmmidia free commented 4 years ago

Filip, on this link, doesn't have any mention abou token and MBP Pro. All the instructions and steps, in any time show how to select MDP Pro using nom. I need to know step by step, how to install the MDB Pro using npm. At the link you gave does not explain. Can you help me ?

Filip Kapusta staff answered 4 years ago


Hello, Thank you for reaching out. We contacted you via email. Your case has been resolved. Best regards,

FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags