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
Found it
https://mdbootstrap.com/angular/5min-quickstart/
in the NPM installation part
Hello I'm working with and Angular6 project and would like to add mdbootstrap, are he instructions the same?
Thank you
Hello I'm working with and Angular6 project and would like to add mdbootstrap, are he instructions the same?Thank you
Please insert min. 20 characters.
Post
Hello I'm working with and Angular6 project and would like to add mdbootstrap, are he instructions the same?
Thank you
We know about this issue and we will work on it. However, I can't tell when it will be fixed.
We know about this issue and we will work on it. However, I can't tell when it will be fixed.
Please insert min. 20 characters.
Post
We know about this issue and we will work on it. However, I can't tell when it will be fixed.
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
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.tsWARNING in Circular dependency detected:srcapppackagesangular-bootstrap-mdproaccordioncomponentssqueezebox.ts -> srcapppackagesangular-bootstrap-mdproaccordioncomponentssb-item.ts -> srcapppackagesangular-bootstrap-mdproaccordioncomponentssqueezebox.tsWARNING in Circular dependency detected:srcapppackagesangular-bootstrap-mdproalertstoasttoast.component.ts -> srcapppackagesangular-bootstrap-mdproalertstoasttoast.service.ts -> srcapppackagesangular-bootstrap-mdproalertstoasttoast.component.tsWARNING in Circular dependency detected:srcapppackagesangular-bootstrap-mdproalertstoasttoast.service.ts -> srcapppackagesangular-bootstrap-mdproalertstoasttoast.component.ts -> srcapppackagesangular-bootstrap-mdproalertstoasttoast.service.tsDid I make a mistake during the set up ?Thanks by advance
Please insert min. 20 characters.
Post
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
Hello,
If it's version 4.4.1 then you can't have typescript folder there because what you bought is mdb jQuery.
Hello,If it's version 4.4.1 then you can't have typescript folder there because what you bought is mdb jQuery.
Please insert min. 20 characters.
Post
Hello,
If it's version 4.4.1 then you can't have typescript folder there because what you bought is mdb jQuery.
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
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
Please insert min. 20 characters.
Post
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
Hi,
Can you write more details?
If you use Chart component in your project? Which version of MDB Angular do you use?
Regards
Hi,Can you write more details? If you use Chart component in your project? Which version of MDB Angular do you use?Regards
Please insert min. 20 characters.
Post
Hi,
Can you write more details?
If you use Chart component in your project? Which version of MDB Angular do you use?
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'.
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'.
Please insert min. 20 characters.
Post
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,
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.84. 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.tsimport { 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 manuallynpm install --save chart.js@2.5.0 easy-pie-chart font-awesome hammerjs screenfull Regards
Please insert min. 20 characters.
Post
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.84. 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.tsimport { 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 manuallynpm install --save chart.js@2.5.0 easy-pie-chart font-awesome hammerjs screenfull Regards
Please insert min. 20 characters.
Post
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.84. 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.tsimport { 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 manuallynpm install --save chart.js@2.5.0 easy-pie-chart font-awesome hammerjs screenfull Regards
Please insert min. 20 characters.
Post
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
Stuck with the same issue as alobban@afnww.com. Hope this is settled soon and the solution posted here.
Cheers
Stuck with the same issue as alobban@afnww.com. Hope this is settled soon and the solution posted here.Cheers
Please insert min. 20 characters.
Post
Stuck with the same issue as alobban@afnww.com. Hope this is settled soon and the solution posted here.
Cheers
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
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
Please insert min. 20 characters.
Post
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
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?
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.mapFailed to decode downloaded font: http://test.com/font/roboto/Roboto-Regular.woff2Failed 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?
Please insert min. 20 characters.
Post
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?
Based on the README file, 4.0.0.
and yes
"defaults": {
"styleExt": "scss",
"component": {}
}
Based on the README file, 4.0.0.and yes "defaults": { "styleExt": "scss", "component": {} }
Please insert min. 20 characters.
Post
Based on the README file, 4.0.0.
and yes
"defaults": {
"styleExt": "scss",
"component": {}
}
Hi,
What version of angular-bootstrap-md do you have?
Do you change <code>styleExt</code> to scss in angular-cli.json?
Regards
Hi,What version of angular-bootstrap-md do you have?Do you change styleExt
to scss in angular-cli.json?Regards
Please insert min. 20 characters.
Post
Hi,
What version of angular-bootstrap-md do you have?
Do you change styleExt
to scss in angular-cli.json?
Regards
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?
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?
Please insert min. 20 characters.
Post
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?
So the 3 folders (img, font and scss) where are or should these files being referenced in the application?
So the 3 folders (img, font and scss) where are or should these files being referenced in the application?
Please insert min. 20 characters.
Post
So the 3 folders (img, font and scss) where are or should these files being referenced in the application?
Hi
1. Sorry my bad, because I forgot about moving typescript files. You can find them in <code>mdb-angular-pro/src/app/</code> folder is called <code>typescripts</code>, move this folder to <code>yourProject/src/app/</code> 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
Hi1. 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
Please insert min. 20 characters.
Post
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
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
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
Please insert min. 20 characters.
Post
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,
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 <code>mdb-angular-pro/</code> folders <code>img</code>, <code>scss</code> and <code>font</code> to <code>your_project/</code> - all these folders should be a move to this same place
2. Add external lib to <code>package.json</code>:
paste this line at the end of <code>dependencies</code>
"@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 <code>styleExt</code> to scss: <code>"styleExt": "css" -> "styleExt": "scss"</code>
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
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 place2. 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 install3. 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
Please insert min. 20 characters.
Post
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