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
Add comment
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 :)
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