0
I am trying to configure Bootstrap 4 in Angular 8.3.6, I am following the following steps:
ng new novaAplicação(create the project)npm install bootstrap jquery popper.js --save(install libraries)set CSS and JS files in angular.json in the style and script arrays as below:
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.css", "src/styles.scss" ], "scripts": [ "node_modules/jquery/dist/jquery.js", "node_modules/popper.js/dist/umd/popper.js", "node_modules/bootstrap/dist/js/bootstrap.js" ]Insert bootstrap test components into the app.component.html. In this case I put an Alert.
A simple Primary Alert-check it out!
When I run the server (ng serve) only the text appears, without style formatting, when I use a component that has some kind of movement (dropdowns for example), this movement also does not work. It’s like you’re not recognizing the files (css, js) set in the angular.json.
The alternative seems to be to put the bootstrap links(css and js) directly in index.html, or, copy the files to the Assets folder, but I do not see how good practice seen the manual show the way I initially detailed.
Below the configuration:
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.803.6
@angular-devkit/build-angular 0.803.6
@angular-devkit/build-optimizer 0.803.6
@angular-devkit/build-webpack 0.803.6
@angular-devkit/core 8.3.6
@angular-devkit/schematics 8.3.6
@angular/cli 8.3.6
@ngtools/webpack 8.3.6
@schematics/angular 8.3.6
@schematics/update 0.803.6
rxjs 6.4.0
typescript 3.5.3
webpack 4.39.2
But vc saw if there is an error in the browser console, if there was what error was? I don’t know if you noticed but the bootstrap’s Js file path on angular json. is with an invalid extension!
– LeAndrade
Hello Leandrade! There are no errors in the console when running the server, neither in the browser console nor in the terminal. Fixed here the file extension, I will fix here in the post, but it continues with the same problem, it seems that the information of arrays (scripts, Styles) do not migrate while running the server.
– Gonzaga Neto
It’s José, in theory it was supposed to work, it seems that everything is configured correctly, I just can’t say 100% I never worked with Angular in version 8, It may be that I changed some configuration to use Bootstrap, pq until version 7, what you did was enough to be able to use.
– LeAndrade
I found some posts on the Angular forum reporting this problem in version 8 but they were closed without being treated, I will reopen there.
– Gonzaga Neto
Did you try using scss? I did a project recently with it, but instead of putting it in angular.json, I put an import in my style.scss.
– Giuliana Bezerra
Yes, it is possible to work if you link the js and css files in index.html, or if css inserts an import in style.css. But it is a way to get around the problem, and not a solution according to the proposal of the tool, I think it is a bug, I reported on the forum of Angular, are checking, having the solution, I will put here.
– Gonzaga Neto