1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Installing MDB angular 4 in existing angular-cli project

St Clair Clarke pro asked 6 years ago

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

Bernardao free answered 5 years ago

Found it https://mdbootstrap.com/angular/5min-quickstart/ in the NPM installation part

Bernardao free answered 5 years ago

Hello I'm working with and Angular6 project and would like to add mdbootstrap, are he instructions the same? Thank you

Adrian Sawicki free answered 6 years ago

We know about this issue and we will work on it. However, I can't tell when it will be fixed.

clement.boulevart pro answered 6 years ago

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

St Clair Clarke pro commented 6 years ago

Hi Clement, I get similar warnings about circular dependencies. I wish the fellows at MDB would sort it out. Lots of warnings in my console.

clement.boulevart pro commented 6 years ago

Thank you very much for your feedback. No worries about that then I guess.

Adrian Sawicki free answered 6 years ago

Hello, If it's version 4.4.1 then you can't have typescript folder there because what you bought is mdb jQuery.

skinow pro answered 6 years ago

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

Rafał Rogulski free answered 6 years ago

Hi, Can you write more details? If you use Chart component in your project? Which version of MDB Angular do you use? Regards

davram88 pro answered 6 years ago

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'.

Rafał Rogulski free answered 6 years ago

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

Rafał Rogulski free answered 6 years ago

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

Rafał Rogulski free answered 6 years ago

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

St Clair Clarke pro answered 6 years ago

Stuck with the same issue as alobban@afnww.com. Hope this is settled soon and the solution posted here. Cheers

Rafał Rogulski free answered 6 years ago

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

alobban@afnww.com pro answered 6 years ago

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?

alobban@afnww.com pro answered 6 years ago

Based on the README file, 4.0.0. and yes "defaults": { "styleExt": "scss", "component": {} }

Rafał Rogulski free answered 6 years ago

Hi, What version of angular-bootstrap-md do you have? Do you change styleExt to scss in angular-cli.json? Regards

alobban@afnww.com pro answered 6 years ago

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?

alobban@afnww.com pro answered 6 years ago

So the 3 folders (img, font and scss) where are or should these files being referenced in the application?

Rafał Rogulski free answered 6 years ago

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

St Clair Clarke pro answered 6 years ago

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

Rafał Rogulski free answered 6 years ago

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
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

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
mdb-angular-pro-4-0-1
About author
St Clair Clarke
Pro User 12Support score
6Questions 4Answers 0Snippets