Hi,
I purchased mdb-angular-pro-4.0.1 today. It only gives instructions to install an new angular-cli with the library pre-installed.
I have my working angular-cli project already. Where can find instructions to integrate mdb-angular-pro-4.0.1 into my angular-cli project?
Also, I see the following as modules to be installed in the app.module:
MDBBootstrapModule.forRoot(),
MDBBootstrapModulePro.forRoot(),
AgmCoreModule.forRoot( {
apiKey: 'you_api_key'
} )
If the apiKey is relevent to me and mdb-angular-pro-4.0.1, where do I get this key? No key was sent in the email confirming my purchase.
Thanks
Hi,
Adding mdb-angular-pro to an existing project is complex and you can experience some error resulting from your project structure and file, wich you must figure how it fixes on your own.
1. Move files from mdb-angular-pro to your project:
from mdb-angular-pro/ folders img, scss and font to your_project/ - all these folders should be a move to this same place
2. Add external lib to package.json:
paste this line at the end of dependencies
"@angular/animations": "^4.0.1",
"bootstrap": "^4.0.0-alpha.6",
"chart.js": "^2.5.0",
"classlist.js": "^1.1.20150312",
"easy-pie-chart": "^2.1.7",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"screenfull": "^3.2.0",
"web-animations-js": "^2.2.5"
in terminal go to your project and install package with npm install
3. Edit angular-cli.json:
change styleExt to scss: "styleExt": "css" -> "styleExt": "scss"
add bootstrap, font-awesome and rename style.css:
this should look like
"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
"../node_modules/font-awesome/scss/font-awesome.scss",
"styles.scss"
]
add scripts
"scripts": [
"../node_modules/chart.js/dist/chart.js",
"../node_modules/easy-pie-chart/dist/easypiechart.js",
"../node_modules/screenfull/dist/screenfull.js"
],
4. add imports in your main ts file
import { ..., NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from './typescripts/angular-bootstrap-md/free';
import { MDBBootstrapModulePro } from './typescripts/angular-bootstrap-md/pro';
import { AgmCoreModule } from './typescripts/angular-bootstrap-md/free/angular2-google-maps/ts/core';
imports: [
...,
MDBBootstrapModule.forRoot(),
MDBBootstrapModulePro.forRoot(),
AgmCoreModule.forRoot({
apiKey: 'Google_maps_api_key'
})
],
shemas: [NO_ERRORS_SCHEMA]
Regards
Thanks Rafal.
I have managed to work out everything except for these two items:
1. import { MDBBootstrapModulePro } from ‘./typescripts/angular-bootstrap-md/pro’;
Where do I get the angular-bootstrap-md/pro from. It does not appear to be in the purchased download.
2. AgmCoreModule.forRoot({apiKey: ‘Google_maps_api_key’}).
Unfamiliar territory here. Do I have to get a legitimate google-maps key from google?
Thanks
Hi
1. Sorry my bad, because I forgot about moving typescript files. You can find them in mdb-angular-pro/src/app/ folder is called typescripts, move this folder to yourProject/src/app/ this should fix this problem.
2. If you will use Google maps component on your page, Yes. If no you can even remove this line and imports to AgmCoreModule.
Regards
So the 3 folders (img, font and scss) where are or should these files being referenced in the application?
I purchased and downloaded the Angular MDB PRO and styling isn't working. Following the instructions above, here is what I have done:
Step 1: Angular (v. 4) Project Folder Structure, added img, font and scss to root of project and added typescripts to app folder.
- e2e
- font
- img
- node_modules
- scss
- src
- app
- typescripts
.angular-cli.json
...
Step 2: Edited package.json adding new packages to dependencies
...
"bootstrap": "^4.0.0-alpha.6",
"chart.js": "^2.5.0",
"classlist.js": "^1.1.20150312",
"font-awesome": "^4.7.0",
"screenfull": "^3.3.1",
"web-animations-js": "^2.2.5",
"easy-pie-chart": "^2.1.7",
"hammerjs": "^2.0.8",
...
Step 3: Edited .angular-cli.json
"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
"../node_modules/font-awesome/scss/font-awesome.scss",
"styles.scss"
],
"scripts": [
"../node_modules/chart.js/dist/Chart.js",
"../node_modules/easy-pie-chart/dist/easypiechart.js",
"../node_modules/screenfull/dist/screenfull.js"
]
Step 4: Edited app.modules.ts
...
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from './typescripts/angular-bootstrap-md/free';
import { MDBBootstrapModulePro } from './typescripts/angular-bootstrap-md/pro';
...
@NgModule({
...
imports: [
...
MDBBootstrapModule.forRoot(),
MDBBootstrapModulePro.forRoot(),
...
],
...
schemas: [
NO_ERRORS_SCHEMA
],
...
})
...
There are no errors when I complete a development build (ng build), but there are not material design styling.
Is there anything I am missing to get this working?
Hi,
What version of angular-bootstrap-md do you have?
Do you change styleExt to scss in angular-cli.json?
Regards
Based on the README file, 4.0.0.
and yes
"defaults": {
"styleExt": "scss",
"component": {}
}
So I figured out 2 things. In .angular-cli.json, I needed to add mdb.scss from the scss folder in the root of the project to the styles section. Additionally, add to scripts web-animations.min.js.
My .angular-cli.json for MD Bootstrap Angular PRO has these changes:
...
"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
"../node_modules/font-awesome/scss/font-awesome.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"
],
...
However, when I run ng build (Development Build) and refresh my browser I get warnings like:
DevTools failed to parse SourceMap:
http://test.com/lt/taskDetails/web-animations.min.js.map
Failed to decode downloaded font:
http://test.com/font/roboto/Roboto-Regular.woff2
Failed to decode downloaded font:
http://test.com/font/roboto/Roboto-Regular.woff
...
How do I resolve these issues? Again, where should these files (font) be referenced?
Hi,
All folders img, font and scss should be placed in the root folder, in your project it's ok. But typescript folder should be placed in app/src/.
It little strange, if you can send me your project on my mail: r.rogulski@mdbootstrap.com, I will check whats is wrong. (please remove node_modules)
Regards
Stuck with the same issue as alobban@afnww.com. Hope this is settled soon and the solution posted here.
Cheers
Hi,
1. Download the newest version of MDB Angular (MDB_Angular_PRO_4.0.8.zip - at this time),
2. Move files:
MDB_Angular_PRO_4.0.8/img/ => your_project/img/
MDB_Angular_PRO_4.0.8/font/ => your_project/font/
MDB_Angular_PRO_4.0.8/scss/ => your_project/scss/
MDB_Angular_PRO_4.0.8/src/app/typescripts/ => your_project/src/app/typescripts/
3. npm install --save angular-bootstrap-md@4.0.8
4. Edit 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/chart.js/dist/chart.js",
"../node_modules/easy-pie-chart/dist/easypiechart.js",
"../node_modules/screenfull/dist/screenfull.js"
],
and change "styleExt": "css" => "styleExt": "scss",
5. Add imports to your main .ts file in my case app.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from './typescripts/angular-bootstrap-md/free';
import { MDBBootstrapModulePro } from './typescripts/angular-bootstrap-md/pro';
@NgModule({
imports: [
...,
MDBBootstrapModule.forRoot(),
MDBBootstrapModulePro.forRoot(),
],
schemas: [NO_ERRORS_SCHEMA]
})
sometime npm don't want to instal all needed dependencies, then you must install it manually
npm install --save chart.js@2.5.0 easy-pie-chart font-awesome hammerjs screenfull
Regards
Hi,
1. Download the newest version of MDB Angular (MDB_Angular_PRO_4.0.8.zip - at this time),
2. Move files:
MDB_Angular_PRO_4.0.8/img/ => your_project/img/
MDB_Angular_PRO_4.0.8/font/ => your_project/font/
MDB_Angular_PRO_4.0.8/scss/ => your_project/scss/
MDB_Angular_PRO_4.0.8/src/app/typescripts/ => your_project/src/app/typescripts/
3. npm install --save angular-bootstrap-md@4.0.8
4. Edit 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/chart.js/dist/chart.js",
"../node_modules/easy-pie-chart/dist/easypiechart.js",
"../node_modules/screenfull/dist/screenfull.js"
],
and change "styleExt": "css" => "styleExt": "scss",
5. Add imports to your main .ts file in my case app.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from './typescripts/angular-bootstrap-md/free';
import { MDBBootstrapModulePro } from './typescripts/angular-bootstrap-md/pro';
@NgModule({
imports: [
...,
MDBBootstrapModule.forRoot(),
MDBBootstrapModulePro.forRoot(),
],
schemas: [NO_ERRORS_SCHEMA]
})
sometime npm don't want to instal all needed dependencies, then you must install it manually
npm install --save chart.js@2.5.0 easy-pie-chart font-awesome hammerjs screenfull
Regards
Hi,
1. Download the newest version of MDB Angular (MDB_Angular_PRO_4.0.8.zip - at this time),
2. Move files:
MDB_Angular_PRO_4.0.8/img/ => your_project/img/
MDB_Angular_PRO_4.0.8/font/ => your_project/font/
MDB_Angular_PRO_4.0.8/scss/ => your_project/scss/
MDB_Angular_PRO_4.0.8/src/app/typescripts/ => your_project/src/app/typescripts/
3. npm install --save angular-bootstrap-md@4.0.8
4. Edit 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/chart.js/dist/chart.js",
"../node_modules/easy-pie-chart/dist/easypiechart.js",
"../node_modules/screenfull/dist/screenfull.js"
],
and change "styleExt": "css" => "styleExt": "scss",
5. Add imports to your main .ts file in my case app.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from './typescripts/angular-bootstrap-md/free';
import { MDBBootstrapModulePro } from './typescripts/angular-bootstrap-md/pro';
@NgModule({
imports: [
...,
MDBBootstrapModule.forRoot(),
MDBBootstrapModulePro.forRoot(),
],
schemas: [NO_ERRORS_SCHEMA]
})
sometime npm don't want to instal all needed dependencies, then you must install it manually
npm install --save chart.js@2.5.0 easy-pie-chart font-awesome hammerjs screenfull
Regards
Is anyone else getting this error? if i comment out this line it works and can build and deploy properly with ng serve.
ERROR in /Users/.../.../src/app/typescripts/angular-bootstrap-md/free/charts/chartDirective.ts (319,3): Type 'number[]' has no properties in common with type 'Color'.
Hi,
Can you write more details?
If you use Chart component in your project? Which version of MDB Angular do you use?
Regards
Hi,
I have purchased today from the free to the pro version. After the download, i follow up this guide, but in the folder of the MDB Pro project I don't get the typescript folder, nor a "src" folder. My pro version is 4.4.1.
Can anyone help me?
Thanks.
Regards
Hello,
If it's version 4.4.1 then you can't have typescript folder there because what you bought is mdb jQuery.
Hi guys,
I get some warning during compiling, CLI has detected some circular dependency in these files :
WARNING in Circular dependency detected:
srcapppackagesangular-bootstrap-mdproaccordioncomponentssb-item.ts -> srcapppackagesangular-bootstrap-mdproaccordioncomponentssqueezebox.ts -> srcapppackagesangular-bootstrap-mdproaccordioncomponentssb-item.ts
WARNING in Circular dependency detected:
srcapppackagesangular-bootstrap-mdproaccordioncomponentssqueezebox.ts -> srcapppackagesangular-bootstrap-mdproaccordioncomponentssb-item.ts -> srcapppackagesangular-bootstrap-mdproaccordioncomponentssqueezebox.ts
WARNING in Circular dependency detected:
srcapppackagesangular-bootstrap-mdproalertstoasttoast.component.ts -> srcapppackagesangular-bootstrap-mdproalertstoasttoast.service.ts -> srcapppackagesangular-bootstrap-mdproalertstoasttoast.component.ts
WARNING in Circular dependency detected:
srcapppackagesangular-bootstrap-mdproalertstoasttoast.service.ts -> srcapppackagesangular-bootstrap-mdproalertstoasttoast.component.ts -> srcapppackagesangular-bootstrap-mdproalertstoasttoast.service.ts
Did I make a mistake during the set up ?
Thanks by advance
We know about this issue and we will work on it. However, I can't tell when it will be fixed.
Hello I'm working with and Angular6 project and would like to add mdbootstrap, are he instructions the same?
Thank you
