search

angular / angular-cli

CLI tool for Angular
https://cli.angular.dev
MIT License
26.79k stars 11.98k forks source link

Bootstrap styles not loading #3411

Closed Harsangeet closed 7 years ago

Harsangeet commented 7 years ago

Hi,

I followed the steps for Global Library Installation https://github.com/angular/angular-cli#global-library-installation

  1. Installed bootstrap@3.3.7 npm install bootstrap --save

  2. Then added the needed script files to to apps[0].scripts in angular-cli.json file:

 "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],

and the Bootstrap CSS to the apps[0].styles array:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],
  1. Restarted ng serve

But the bootstrap styles are not loading

OS- Windows 7 Enterprise

angular-cli: 1.0.0-beta.21 node: 6.9.1 os: win32 x64

hansl commented 7 years ago

@filipesilva Any idea?

ghost commented 7 years ago

I'm using Bootstrap v4 with exactly this approach in beta.21 without any issue...

vfedoriv commented 7 years ago

I too. And when downgrade to bootstrap 3.3.7 - still work. (node 7.2.0)

yanxiaodi commented 7 years ago

I have the same problem with bootstrap v3.3.7. I use the same config like you and it doesn't work now.

lukas-kloeppel commented 7 years ago

I'm facing the same problem with angular-cli: 1.0.0-beta.21, node 7.2.1 and 4.0.0-alpha.6.

Bootstrap content is included in the generated styles.bundles.css file, but not available in the page

Dinistro commented 7 years ago

I can confirm this behavior in 1.0.0-rc.0. I will try to create a reproduction and add it here, if I'm done.

Dinistro commented 7 years ago

I found the problem in my case:

If you try to use a bundle from a linked npm package it breaks, because webpack works with the absolute path of the files and so, the exclude options of webpack aren't working anymore. I'm not sure if this is an issue of webpack or not.

There are more problems with linked projects, e.g. #5049, where this could be the reason of the failure.

lukeguzeng commented 7 years ago

me also. the style is applied is i import bootstrap.css in styles.css. but i can not get it working in angular-cli.json > styles array.

filipesilva commented 7 years ago

Closing as outdated. If this still happens, please let me know.

Zhuinden commented 7 years ago

I'm trying to follow a tutorial and I added the following to my .angular-cli.json

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

But bootstrap does not show on the page.

Changing my index.html into this ugly mess works, but I'm pretty sure this webpack magic should handle it.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<app-root>Loading...</app-root>
<script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

I also have "bootstrap": "3.3.7" in my package.json. Not sure if that did anything. I'm new to this.

filipesilva commented 7 years ago

@Zhuinden the example in https://github.com/angular/angular-cli/wiki/stories-global-lib is for Bootstrap 4, but you are using Bootstrap 3.

alextait1 commented 6 years ago

I had this issue, then a good old exit and re-run of ng serve was all I needed to do.

faizy6641 commented 6 years ago

@filipesilva ,Could u pls check my issue #9690?i am also facing similar type of issue. I am stuck in this issue from past 2 weeks,pls help me out.Thanks

manojsgh commented 6 years ago

I had the same problem with bootstrap 4. I uninstalled and installed version 3 and it worked npm -install bootstrap@3 --save .angular-cli.json "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ],

shireefkhatab commented 6 years ago

Solution 1 (with Bootstrap installed) All you need to do is:

1) Go to .angular-cli.json under the root directory of your angular app.

2) Modify the styles array to include bootstrap before styles.css

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], Note: the path to bootstrap is relative to /src/index.html that's why you need "../" before node_modules.

3) Exit the current session of ng serve and start it again.

Here is an awesome tutoral: https://www.youtube.com/watch?v=JYPyy-hvjYc&list=PL6n9fhu94yhXwcl3a6rIfAI7QmGYIkfK5&index=1#t=05m18s

Solution 2 (with Bootstrap referenced) All you need to is:

1) Go to styles.css under the root directory of your angular app.

2) Add this line at the top:

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css'); Here is Angular docs: https://angular.io/guide/forms#create-an-initial-html-form-template

VerticalWorks commented 6 years ago

For me, I just added the following to my Angular-cli.json file, and it worked... remember, WebPack needs to know "where and what to include :) Be sure to restart "ng serve" "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],

ManojSonowal commented 6 years ago

Solution of manojsgh worked for me too.

mutantkeyboard commented 6 years ago

I have resolved this by reading the link provided by @filipesilva

nadyscoolcodes commented 6 years ago

Thanks @alextait1 !! Your method worked for me.......

irfanakbar47 commented 6 years ago

Restart npm server

nadyscoolcodes commented 6 years ago

Okay

On Wed 2 May, 2018, 2:06 AM irfanakbar47, notifications@github.com wrote:

Restart npm server

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/3411#issuecomment-385782090, or mute the thread https://github.com/notifications/unsubscribe-auth/AYVbk57P9H1m-pwjj_ClfjoMvHXUa6onks5tuMdGgaJpZM4LEpPr .

STEPHINRACHEL commented 6 years ago

restart the application using ng serve

Yi98 commented 6 years ago

@alextait1 Works like a charm. Thank you so much :)

zahasoftware commented 6 years ago

manojsgh solution works for me, I was trying the filipesilva solution but wihout results.

francesfang commented 6 years ago

I ran into the same issue,Bootstrap was not loading with Angular 6, no matter how I tried to import , finally solved by downgrading bootstrap 4 to 3

alalicon577 commented 6 years ago

add to styles.css @import "~bootstrap/dist/css/bootstrap.min.css";

yawningphantom commented 6 years ago

I can confirm that this issue is because of bootstrap 4. I am using angular 6 and was trying to include bootstrap v4 it wasn't showing up and then I downgraded to bootstrap v3 and it works like a charm. Simply use the command npm install bootstrap@3 --save to downgrade to bootstrap v3

echosanjeet commented 6 years ago

try removing single dot (.). See below. This worked for me. "./node_modules/bootstrap/dist/css/bootstrap.min.css"

navgag33 commented 6 years ago

Ran into the same issue and had to downgrade to version 3 of bootstrap and it worked.

robeverett commented 6 years ago

I also have the same issue, however I am using version 4.1.3 as I want to be up to date. (The instructor is still using 3.3.7) I am following a Udemy tutorial.

In my angular.json, I have this: "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.less" ],

because at some point I would like the flexibility of .less.

robeverett commented 6 years ago

Downgrading to version 3 isn't a solution and is absurd. Imagine if as a professional developer you got told: "Oh our API won't work with .net core, so you'll have to re-write that app that you've just spent the last 6 months building to perfection in .net 4.5 !" :(

robeverett commented 6 years ago

The only way I can get to use the version 4 + styles is to use a CDN link at the top of app\src\styles.css:

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';

That's great when on occasions the bootstrapcdn server is down and all my users see an unstyled app - very professional.

Could someone PLEASE explain why 4 + can't be used the same as 3.3.7 upwards, WHAT is broke and WHY ?

robeverett commented 6 years ago

https://www.techiediaries.com/angular-bootstrap/

That link should clear up a lot of confusion.

navgag33 commented 6 years ago

Thank You so Much @dotNetAthlete, So cut to the chase, The only thing we need to do is to use the latest Bootstrap: Add @import "~bootstrap/dist/css/bootstrap.css" to your styles.css in the src folder and you are good to go.

P.S : Still need to Install bootstrap first

:-)

vantive commented 6 years ago

I checked all the options and tried each suggested here in the post. But only working option is by uninstalling 4.* version by (npm uninstall bootstrap --save) and next by installing bootstrap 3.3.7 (npm install bootstrap@3.3.7 --save)..

**

it worked like charm.

**

for other advanced members/users who dont want to disturb their existing version they have to deal with some intricacies of how to deal with such issues (for e.g. popper.js, jquery.js versions etc) and also know how to map these with the current bootstrap version.. then it might work!

but for me the priority to was to make my learning curve smooth and dont get mingled in these intricacies for now.

all the best!

happy coding.

sanitreddy commented 6 years ago

After installing the bootstrap dependency into your project just plug in the below code in your angular.json file.

"styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "./node_modules/bootstrap/dist/js/bootstrap.min.js" ]

Using, Angular CLI: 6.2.7 Node: 8.11.1 OS: win32 x64 Angular: 6.1.10

Hope this is helpful!

ndibrithalea commented 5 years ago

Had thesame problem. Go to your angular.json And do this: "styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], 2- Close you server and launch it again: ng-serve.

rahuls360 commented 5 years ago

I had the same issue yesterday. I found a solution to it. I was importing the styles and script files in the wrong place in angular.json file It must be under build and not test object

I found the solution here https://stackoverflow.com/questions/51998505/styles-not-picking-from-angular-json-styles-array-angular-6-but-working-fine-wi

Houuse commented 5 years ago

don't work until downgrade , best solution Uninstall angular -> install react -> enjoy

arif7503 commented 5 years ago

Just put

"scripts": [ "./node_modules/bootstrap/dist/js/bootstrap.js" ],

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

Hope that it would work :)

bhavinshiroya1994 commented 5 years ago

same issue please let me know if any one getting solution.

nenadbulatovic commented 5 years ago

It happen to me today. Ubuntu, Angular 8, Bootstrap 3. Firstly I resolved it by adding @import "~bootstrap/dist/css/bootstrap.min.css"; into styles.css but then I decided to look more into it and I compare angular.json file one from the previous projects where Bootstrap 3 was loading without issues. It is only that "Meld" (compare tool) reveled to me that in a hurry erroneously I added path to the bootstrap "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], under the "test" section instead under "architect" section. Once moved to ""architect" section, bootstrap started loading.

Anatoly03 commented 5 years ago

I'm inputting all 3 scripts and the bootstrap styling inside the index.html, same error.

MohamedAbdeljelil commented 5 years ago

It happen to me today. Ubuntu, Angular 8, Bootstrap 3. Firstly I resolved it by adding @import "~bootstrap/dist/css/bootstrap.min.css"; into styles.css but then I decided to look more into it and I compare angular.json file one from the previous projects where Bootstrap 3 was loading without issues. It is only that "Meld" (compare tool) reveled to me that in a hurry erroneously I added path to the bootstrap "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], under the "test" section instead under "architect" section. Once moved to ""architect" section, bootstrap started loading.

Thanks i have the same problem and it's work now

angular-automatic-lock-bot[bot] commented 5 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.