Bootstrap does not work in Angular CLI v. 6.1.2

3

I have a big problem ... I do not load the Bootstrap stylesheet due to a MIME problem.

What can I do to solve it?

Eye, I've been investigating and apparently it's the CLI version type.

Correct me if I'm wrong, but I can not fix it.

Help!

This is the error that generates me:

"Refused to apply style from ' link ' because its MIME type ('text / html ') is not supported on stylesheet MIME type, and strict MIME checking is enabled. "

    
asked by Yarizza 09.08.2018 в 15:44
source

4 answers

4

A simple solution is to import bootstrap in an indirect way: in your file ./src/styles.scss you can add a line:

@import "../node_modules/bootstrap/scss/bootstrap";

And Bootstrap will be compiled directly from your source code.

Even, going a step further, you might not include all bootstrap, importing the parts you're going to use and eliminating those that do not .

Of course this implies that you have Boostrap as a dependency in package.json .

    
answered by 09.08.2018 / 17:03
source
3

you must install it directly with the features offered by npm npm install bootstrap and attach them to the file angular.json in the following way (In the section of array of styles):

"styles": [
            "src/styles.scss",
            "node_modules/bootstrap/dist/css/bootstrap.min.css",
          ],

The problem would be that when trying to use all the features offered by Bootstrap you would make a mess, because you need to use the various supplements of JavaScript of the library:

Example

  

In general it is better to avoid using jQuery in an application with   Angular: If the application uses a nav that does not exist in the screen of   login, jQuery / Bootstrap will not add the behavior because it does not   it exists when the "onload" event is launched. Or if an element disappears   of the DOM and then it is generated again, it will lose all behavior   added by jQuery / Bootstrap.   -Pablo Lozano

Or you can install the ng-bootstrap library which is very good because it focuses precisely on being compatible with Angular without the need to use Javascript to execute certain functions. You install it with the following command:

npm install --save @ng-bootstrap/ng-bootstrap

Here is the documentation: ng-bootstrap

    
answered by 09.08.2018 в 17:00
1

angular-cli.json (Found in the root of your project) you must place the path of your bootstrap in the script and styles section as seen in the image

I hope it serves you.

    
answered by 09.08.2018 в 16:59
1

Just to tell everyone that I finally found a method that worked for me. It was enough to import into the 'styles.css' file the bootstrap library, and fly!

@import "vendor / bootstrap / css / bootstrap.min.css";

Greetings to all! And thank you very much.

    
answered by 09.08.2018 в 19:56