Angular - including CSS file in index.html

Question

I\'m trying to use the angular2-busy library in an angular project created with the CLI, but am having an issue importing the stylesheet:

Answer 1

You are missing the self closing / at the end of your code. It's possible the browser is not fixing this for you.

<link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css" />

Also removing rel="stylesheet" would definitely not fix the problem since the browser needs to know exactly what kind reference you are referring to.

If fixing the closing tag does not work then your path is wrong. You can also try adding a ../ to the beginning of your path. This will make it relative to the folder the site is in.

<link rel="stylesheet" href="../node_modules/angular2-busy/build/style/busy.css" />

Answer 2

Try

  <link rel="stylesheet" href="node_modules/angular2-busy/build/style/busy.css" >

Answer 3

Angular CLI have it's own way to initialize your global css/js.

They are located in .angular-cli.json configuration

Locate "styles": and add your css there

Example :

"styles": [
   "../node_modules/angular2-busy/build/style/busy.css",
   "styles.css"
],

Hope that helps.

Answer 4

Steps to Create an Angular Project with Linked CSS

1. In angular.json delete all the references to CSS files under "styles". It should look like this now:

    "styles": [],
   

2. In your index.html under your "src" folder, add in your link references to your CSS files manually with paths starting at the "src" folder but not including it. You can store your css wherever you want in your project now as long as those folders of files are under your "src" root folder somewhere. My physical CSS files in my project for the path below now sit under "src/styles" but the link path should just be my styles folder plus the file name:

   < link href="styles/mystyles.css" rel="stylesheet" / >

3. Any CSS files for bootstrap, font-awesome, etc. that you want in your project have to be manually copied from your "node_modules" folder in your project into a folder under your "src" folder, just like you CSS file above in #2. Or you can reference them from some fully qualified url online. If you want to create a link to them as above in "index.html" or import them into the CSS file in #2, that will also work. If you were importing them before from the "node_modules" folder that path will not work now as the Angular CLI or webpack wont be resolving those paths as its not compiling your CSS now. So change them to point to the local folder path above.

If you dont want to link them you can simply import the two "min" versions of bootstrap and font-awesome CSS files and then drop them in the same folder as your main style sheet and import them into that stylesheet with these two tags:

@import "bootstrap.min.css";
@import "font-awesome.min.css";

4. In the same angular.json file above, under the "assets" JSON setting, add a reference to the location of your CSS files in #2 and #3 so the builder can copy them into your dist folder. Note the new styles path at the bottom. If you have CSS in other folders you can add them here as well. This tells the builder to create the CSS directories in the dist folder and copy all the CSS files inside them, so when you build for production your index.html links point to the right CSS files on the server:

   "assets": [
     "src/favicon.ico",
     "src/assets",
     "src/api",
     "src/styles"
   ],
   

You now have a powerful set of link elements to all your CSS in the head of your index.html file and can edit them in the Angular project like you normally do, knowing they will work in both the Angular development test server and in your dist production copy. Your website will also benefit from browser caching of CSS one time in memory and permanent file caches.

It took me a day to dig through documentation and testing to figure out what should have been a natural part of any simple website with linked CSS. I'm sorry they made this so convoluted but this works great now. This simply removes your CSS from the compile and build angular system that pushes all your CSS into a javascript file and then embeds that in an inline style sheet block in the memory of your browser. Using your own linked CSS html tags is far superior and allows better caching and control of CSS cascade rules.

Good Luck!

Answer 5

Basically there are three different ways to do that :-

1. By adding it to the "styles" array in angular-cli.json file as is shown by @penleychan in his answer.

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

2. You can directly import the css file into styles.css file (or any other css file) that is included in "styles" array in angular-cli.json file by adding the @import statement at the top of that file.

@import "~bootstrap/dist/css/bootstrap.min.css";

3. Include the css file in index.html page by adding a link element.

<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />

You can find a more elaborated explanation and a few more alternatives at this link