Добавить MDBootstrap в проект Angular

Я успешно добавил Bootstap в проект Angular и хотел сделать то же самое с MDBoostrap (я не знаю, будет ли Bootstrap по-прежнему полезен?)

Я выполнил официальную процедуру прямо здесь, используя установку npm.

Но когда я пытаюсь импортировать стиль, у меня возникает следующая ошибка

введите описание изображения здесь

Вот мой app.module.ts файл:

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 { }

мой angular-cli.json файл:

"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"
      ],

и import в моем style.scss файле:

@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

Как я уже сказал, первые 2 импорта в порядке, но 2 других выдают ошибки.

Глядя на ошибку, у меня возникает ощущение, что система смотрит на myProject/font репозиторий, которого на самом деле не существует, но я действительно не понимаю, почему.

ОБНОВЛЕНИЕ:

Я обнаружил, что roboto.scss файл использует относительный 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;

}

где $roboto-font-path = ../fonts/roboto/. Это явно кажется проблемой.

Это можно решить, используя resolve-url-loader и изменив конфигурацию на

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

но при использовании angular-cli это не может быть моим случаем.

ОБНОВЛЕНИЕ 2:

На самом деле это работает!

@import.... в файле styles.scss бесполезны.

Моя большая ошибка заключалась в том, что я пытался использовать компонент Mdb pro и тестировать на нем свою конфигурацию ... Мне очень жаль, ребята.

Спасибо за вашу помощь.


person Y.Uzumaki    schedule 13.02.2018    source источник


Ответы (1)


Узумаки,

Первое: какую операционную систему вы используете? Windows, Linux или Mac?

Второе: вы создали свой проект с параметром --style=scss?

Чтобы он заработал, выполните следующие действия:
ng new name --style=scss

затем установите пакет:

npm install angular-md-bootstrap --save

затем добавьте импорт в app.module.ts:

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

затем добавьте стили и расположение скриптов в tsconfig.app.json файл:

"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"
],

затем установите дополнительные библиотеки, используя:

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

затем в tsconfig.json файл в корневом каталоге добавьте:

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

а для файла tsconfig.app.json в каталоге /src я добавил:

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

Теперь все должно работать нормально.


Если вы не создали проект с атрибутом --style=scss, вам необходимо сделать следующее:

ng set defaults.styleExt scss

И измените каждое расширение с .css на .scss. Для своего проекта я изменил файлы:

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

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

И в src/app/app.components.ts

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

Теперь все должно работать нормально, даже если вы не создали свой проект с помощью --styles=scss.

Для вашего существующего проекта dDelete from app.module.ts эти строки:

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

С уважением,
Дамиан из MDBootstrap

person Bloodcast69    schedule 14.02.2018
comment
Я хотел добавить MDBootstrap в существующий проект, поэтому попробовал второе решение, но, к сожалению, у меня это не сработало. У меня все еще такая же ошибка. Не понимаю, где он ищет font/roboto/Roboto-Bold.eot файл. Возможно, мне придется начать с нуля, используя команду ng new name --style=scss, но пока постараюсь избежать этого. - person Y.Uzumaki; 14.02.2018
comment
Узумаки, у вас есть файлы .css в каталоге src или src / app? Если нет, попробуйте еще раз ввести npm install с вашим ключом авторизации. - person Bloodcast69; 15.02.2018
comment
Проблема заключалась в импорте в мой файл styles.scss. На самом деле мне не нужно импортировать их сюда, чтобы MDBoostrap работал. Более того, я пытался использовать компонент MDBootstrap pro, поэтому я подумал, что он не работает, но на самом деле все в порядке ... Спасибо - person Y.Uzumaki; 15.02.2018