Topic: Integrating MDB-Angular-Pro to existing Angular 4 application

mystvictor pro asked 7 years ago


Could you provide steps to integrate the angular pro version to existing Angular 4 projects.I cant find any examples for this. Thanks

Alan Mroczek free answered 7 years ago


You can also find a detailed explanation here: https://mdbootstrap.com/angular/5min-quickstart/ The first section is about deploying our project, but the second one is about how to integrate MDB Angular into the new angular project.

danimardo pro answered 7 years ago


I'm going to explain what I do:   ng new nameProject cd nameProject git init npm i web-animations-js --save; npm install chart.js --save; npm install classlist.js --save; npm install hammerjs --save; npm install angular-bootstrap-md --save; npm install web-animations-js --save; npm install chart.js --save; npm install font-awesome --save, npm install bootstrap@next --save; npm install angular-bootstrap-md --save; Unzip MDB_Angular_PRO_4.x.x.zip and copy src/app/typescripts and src/app/angular-bootstrap-md to our app directory. Copy css, font, img and scss folders to ours project root folder.   in  .angular-cli.json "styles": [ "../node_modules/font-awesome/scss/font-awesome.scss", "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss", "../scss/mdb.scss", "./styles.scss" ], "scripts": [ "../node_modules/web-animations-js/web-animations.min.js", "../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"], in tsconfig.json: "lib": [ "es2017", "dom" ], "types": [ "jquery", "bootstrap", "node" ] In app.module.ts: import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { MDBBootstrapModule } from './typescripts/free'; import { MDBBootstrapModulePro } from './typescripts/pro'; // import { AgmCoreModule } from '@agm/core'; à para Google maps .. imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, HttpModule, MDBBootstrapModule.forRoot(), MDBBootstrapModulePro.forRoot(), ], .., schemas: [NO_ERRORS_SCHEMA] .. rename styles.css to styles.scss (we need a sass compiler in our IDE) and write: @import "../node_modules/bootstrap/scss/bootstrap.scss";   ng serve or npm start And Enjoy :)      

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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags