Add MDBootstrap to an Angular project

Question

I successfully added Bootstap to an Angular project and wanted to do the same with MDBoostrap ( I don't know if Bootstrap will still be useful tho ? )

I followed the official procedure just here using the npm installation.

But when I try to import the style I have the following error

Here is my app.module.ts file :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
/*Ajout Test du dossier ngx bootstrap*/
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    /*Ajout*/
    MDBBootstrapModule.forRoot(),
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

my angular-cli.json file :

"index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [

        "../node_modules/font-awesome/scss/font-awesome.scss",
        "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
        "../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
        "./styles.scss"
      ],
      "scripts": [
        "../node_modules/chart.js/dist/Chart.js",
        "../node_modules/hammerjs/hammer.min.js"
      ],

and the import in my style.scss file :

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; //OK
@import "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss"; //OK
@import "../node_modules/font-awesome/scss/font-awesome.scss"; // ERROR : ../fonts/fontawesome-webfont.eot
@import "../node_modules/angular-bootstrap-md/scss/mdb-free.scss"; // ERROR : ../font.roboto.Robto-Bold.eot

Like I have commented the first 2 imports are OK but the 2 others throws errors.

Looking at the Error I have the sensation that the system is looking at a myProject/font repesitory that indeed doesn't exist but I really don't get why.

UPDATE :

I found that roboto.scss file use a relative URL

@font-face {
font-family: "Roboto";
src: local(Roboto Thin), url('#{$roboto-font-path}Roboto-Thin.eot');
src: url("#{$roboto-font-path}Roboto-Thin.eot?#iefix") format('embedded-opentype'),
    url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
    url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"),
    url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype");

font-weight: 200;

}

where $roboto-font-path = ../fonts/roboto/. That clearly seems to be the problem.

It could be resolved using the resolve-url-loader and changing the configuration to

{
test: /\.scss$/,
loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']
}

but using angular-cli it can't be my case.

UPDATE 2 :

In fact it works !

The @import.... in the styles.scss file are useless.

The big mistake I made was trying to use an Mdb pro component and testing my configuration on it... I'm sorry guys.

Thanks for your help.

Answer 1

Uzumaki,

First thing: Which operating system do you use? Windows, Linux or Mac?

Second thing: Did you create your project with --style=scss parameter?

Follow these steps to make it work properly:
ng new name --style=scss

then install the package:

npm install angular-md-bootstrap --save

then add imports to app.module.ts:

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

then add styles and scripts locations to tsconfig.app.json file:

"styles": [
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
"../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
"./styles.scss"
],
"scripts": [
"../node_modules/chart.js/dist/Chart.js",
"../node_modules/hammerjs/hammer.min.js"
],

then install additional libraries using:

npm install -–save [email protected] font-awesome hammerjs

then to tsconfig.json file in root directory add:

"include": ["node_modules/angular-bootstrap-md/**/*.ts",  "src/**/*.ts"],

and for tsconfig.app.json file in /src directory i added:

"include": [ "**/*.ts", "../node_modules/angular-bootstrap-md/index.ts" ]

All should work fine now.

---

If you haven't created the project with --style=scss attribute, you have to do the following:

ng set defaults.styleExt scss

And change every extension from .css to .scss. For my project, I have changed files:

src/styles.css -> src/styles.scss,

src/app/app.component.css -> src/app/app.component.scss

And in src/app/app.components.ts

stylesUrls ['./app.component.css'] -> stylesUrls: ['./app.component.scss']

Now everything should work fine even if you haven't created your project using --styles=scss.

For your existing projectdDelete from app.module.ts these lines:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

Best Regards,
Damian from MDBootstrap